Calendar
Für den Kalender wird eine Vorlage bereitgestellt mit den zu verwendenden Klassen und Strukturen um Kalendern auf den Seiten ein homogenes Aussehen zu verleihen. Eine Funktionalität wird nicht bereitgestellt, da ein Kalender je nach Anforderungen und Backend vollkommen unterschiedlich funktionieren kann und soll.
.modul-calendar
Kalender
<div class="modul-calendar">
<h2 class="title">Kalender</h2>
<div class="calendar-table">
<div class="calendar-head">
<h3 class="title">
<span class="month">April</span>
<span class="year">2021</span>
</h3>
<div class="controls">
<button type="button" class="prev disabled" title="Voriger Monat nicht möglich" aria-label="Einen Monat zurück nicht möglich"></button>
<button type="button" class="next change-month" title="Nächster Monat" aria-label="Einen Monat weiter" data-datestart="01.05.2021"></button>
</div>
</div>
<table>
<thead>
<tr class="dayname">
<th>Mo</th>
<th>Di</th>
<th>Mi</th>
<th>Do</th>
<th>Fr</th>
<th>Sa</th>
<th>So</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>01</td>
<td>02</td>
<td>03</td>
<td class="sonnfeiertag">04</td>
</tr>
<tr>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td class="sonnfeiertag">11</td>
</tr>
<tr>
<td class="nichtbuchbar">12</td>
<td class="nichtbuchbar">13</td>
<td class="nichtbuchbar">14</td>
<td class="nichtbuchbar">15</td>
<td class="nichtbuchbar">16</td>
<td>17</td>
<td class="sonnfeiertag">18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td class="buchbar heutemarkierung">
<a href="#" title="Events am 21. 04 2021">21</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 22. 04 2021">22</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 23. 04 2021">23</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 24. 04 2021">24</a>
</td>
<td class="buchbar sonnfeiertag">
<a href="#" title="Events am 25. 04 2021">25</a>
</td>
</tr>
<tr>
<td class="buchbar">
<a href="#" title="Events am 26. 04 2021">26</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 27. 04 2021">27</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 28. 04 2021">28</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 29. 04 2021">29</a>
</td>
<td class="buchbar ">
<a href="#" title="Events am 30. 04 2021">30</a>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<a class="more" href="#">Alle Termine anzeigen</a>
</div>
</div>