De PHPhulp kroeg
Achtergrondkleur van de dagen in een kalender aanpassen (ul li-items)
Alle dagen in de kalender hebben een witte achtergrond, ik zou de kleur willen aanpassen naargelang de dag.
De CSS code:
Code (php)
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
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;
}
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)
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
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;
}
'<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)
1
2
3
4
5
2
3
4
5
for($j=1;$j<=7;$j++)
{
$content.=$this->_showDay($i*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.
Code (php)
1
private $today = 0;
Na regel 60 voeg toe :
Code (php)
1
$this->today = date('d');
In function showday() vervang regel 124 :
Code (php)
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)
1
2
3
2
3
.mask1 {
background-color: ivory !important;
}
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)
1
$this->today = date('Y-m-d', time());
en vervang regel 124 door :
Code (php)
1
2
2
$mask1 = ( $this->today == $this->currentDate ? 'mask1':'' );
return '<li id="li-'.$this->currentDate.'" class="' . $mask1 . '">'.$cellContent. '<br /></li>' . PHP_EOL;
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 :