How to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text) ?
Example of real mini-calendar jEvents image link.
Becuase CSS coding to example.
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
but cannot to change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text).
Full sample code.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.mod_events_td_daywithevents > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.mod_events_td_daywithevents > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
<tbody><tr class="mod_events_dayname">
<td class="mod_events_td_dayname"><span class="sunday">S</span></td>
<td class="mod_events_td_dayname">M</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">W</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">F</td>
<td class="mod_events_td_dayname"><span class="saturday">S</span></td>
</tr>
<tr>
<td class="mod_events_td_dayoutofmonth">29</td>
<td class="mod_events_td_dayoutofmonth">30</td>
<td class="mod_events_td_dayoutofmonth">31</td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
<td class="mod_events_td_daywithevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
<td class="mod_events_td_todaynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
<td class="mod_events_td_dayoutofmonth">1</td>
<td class="mod_events_td_dayoutofmonth">2</td>
</tr>
</tbody></table>
</body>
</html>
Output of sample code image link.
I have coded CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text with imagination link.
Try using :first-child and :last-child
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.mod_events_td_daywithevents > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.mod_events_td_daywithevents > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
tr :is(td:first-child, td:last-child) a.mod_events_daylink {
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
<tbody><tr class="mod_events_dayname">
<td class="mod_events_td_dayname"><span class="sunday">S</span></td>
<td class="mod_events_td_dayname">M</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">W</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">F</td>
<td class="mod_events_td_dayname"><span class="saturday">S</span></td>
</tr>
<tr>
<td class="mod_events_td_dayoutofmonth">29</td>
<td class="mod_events_td_dayoutofmonth">30</td>
<td class="mod_events_td_dayoutofmonth">31</td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
<td class="mod_events_td_daywithevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
<td class="mod_events_td_todaynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
<td class="mod_events_td_dayoutofmonth">1</td>
<td class="mod_events_td_dayoutofmonth">2</td>
</tr>
</tbody></table>
</body>
</html>