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

Door Math Beckers op 12-07-2021 16:59

2.039 views

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:


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:

        $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;
    }


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.

- Ariën -

12-07-2021 17:32

Wat heb je zoal geprobeerd?

A Adoptive Solution

12-07-2021 18:05

In calendar.php na regel 24 voeg toe :

private $today = 0;

Na regel 60 voeg toe :

$this->today = date('d');

In function showday() vervang regel 124 :

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 :

.mask1 {
	background-color: ivory !important;
}

Class naam en kleur naar smaak aanpassen.

[size=xsmall]Toevoeging op 12/07/2021 18:09:12:[/size]

Aanvulling.

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

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

[size=xsmall]Toevoeging op 12/07/2021 18:40:36:[/size]

Nog meer aanvulling.

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

$this->today = date('Y-m-d', time());

en vervang regel 124 door :

$mask1 =  ( $this->today == $this->currentDate ? 'mask1':'' );
return '<li id="li-'.$this->currentDate.'" class="' . $mask1 . '">'.$cellContent. '<br /></li>' . PHP_EOL;

[size=xsmall]Toevoeging op 13/07/2021 00:45:06:[/size]

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

 <style>
#li-<?php echo date('Y-m-d', time()); ?> {
	background-color: navy !important;
	color: yellow !important;
}
</style>

Reageren

Inloggen om te reageren