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

April 2021

Mo Di Mi Do Fr Sa So
01 02 03 04
05 06 07 08 09 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Alle Termine anzeigen
<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>