Achtergrondkleur van de dagen in een kalender aanpassen (ul li-items)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Math Beckers

Math Beckers

12/07/2021 16:59:42
Quote Anchor link
Ik heb code (https://www.startutorial.com/articles/view/how-to-build-a-web-calendar-in-php) gebruikt om een kalender weer te geven.
Alle dagen in de kalender hebben een witte achtergrond, ik zou de kleur willen aanpassen naargelang de dag.

De CSS code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div#calendar ul.dates{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
}


div#calendar ul.dates li{
    border:1px solid;
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 5px;
    line-height:80px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:164px;
    height:120px;
    background-color: #FFF;
    font-size:25px;
    color:#000;
    text-align:center;
}


Het stukje PHP-code dat de kalender genereerd:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
        $content='<div id="calendar">'.
                    '<div class="box">'.
                        $this->_createNavi().
                    '</div>'.
                    '<div class="box-content">'.
                        '<ul class="label">'.$this->_createLabels().'</ul>';
                        $content.='<div class="clear"></div>';
                        $content.='<ul class="dates">';
        
                        $weeksInMonth = $this->_weeksInMonth($month,$year);
                        // Create weeks in a month
                        for( $i=0; $i<$weeksInMonth; $i++ ){
            
                            //Create days in a week
                            for($j=1;$j<=7;$j++)
                            {
                                  $content.=$this->_showDay($i*7+$j);
                            }
                        }
                    $content.='</ul>';
                $content.='<div class="clear"></div>';
            $content.='</div>';
        $content.='</div>';
        return $content;
    }


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
for($j=1;$j<=7;$j++)
{
    
    $content.=$this->_showDay($i*7+$j);
}

In dit stukje wil ik $j checken en de achtergrondkleur aanpassen.
Bv de weekenddagen een andere achtergrondkleur geven:
if ($j > 5) { ... }

Ik heb aan een aantal dingen geprobeerd, helaas zonder het gewenste resultaat.

Iemand enig idee?
Alvast bedankt.
 
PHP hulp

PHP hulp

18/12/2024 05:40:07
 
- Ariën -
Beheerder

- Ariën -

12/07/2021 17:32:06
Quote Anchor link
Wat heb je zoal geprobeerd?
 
Adoptive Solution

Adoptive Solution

12/07/2021 18:05:11
Quote Anchor link
In calendar.php na regel 24 voeg toe :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
private $today = 0;


Na regel 60 voeg toe :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$this->today = date('d');


In function showday() vervang regel 124 :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
return '<li id="li-'.$this->currentDate.'" class="' . ( $this->today == $cellContent ? 'mask1':'' ) . '">'.$cellContent. '<br /></li>' . PHP_EOL;


In calender.css voeg class toe aan het eind :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.mask1 {
    background-color: ivory !important;
}


Class naam en kleur naar smaak aanpassen.

Toevoeging op 12/07/2021 18:09:12:

Aanvulling.

Elke dag in elke maand (vandaag is de 12e) krijgt achtergrond kleur.

Dus nog even uitvogelen om het tot huidige maand te beperken.


Toevoeging op 12/07/2021 18:40:36:

Nog meer aanvulling.

Wijzig $this->today = date('d') in :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$this->today = date('Y-m-d', time());


en vervang regel 124 door :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
$mask1 =  ( $this->today == $this->currentDate ? 'mask1':'' );
return '<li id="li-'.$this->currentDate.'" class="' . $mask1 . '">'.$cellContent. '<br /></li>' . PHP_EOL;


Toevoeging op 13/07/2021 00:45:06:

Negeer alle voorgaande wijzigingen.
Breng dit aan in de <head> van de webpagina :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<style>
#li-<?php echo date('Y-m-d', time()); ?> {
    background-color: navy !important;
    color: yellow !important;
}
</style>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.