Kalendář
angl.
Calendar
Slouží pro zobrazení události.
Kalendář událostí
<div class="calendar">
<div class="calendar-container">
<h4>Kalendář</h4>
<div id="kalendar">
<div class="calendar-panel">
<div id="calendar">
<div class="calendar-head">
<div class="calendar-month">
<span id="monthAndYear"></span>
<div class="control-month">
<button type="button" id="btnPreviousMonth" class="btn btn-lg btn-calendar-arrow" title="Předchozí měsíc" aria-label="Předchozí měsíc">
<i class="icon icon-left-arrow"></i>
</button>
<button type="button" id="btnNextMonth" class="btn btn-lg btn-calendar-arrow" title="Další měsíc" aria-label="Další měsíc">
<i class="icon icon-right-arrow"></i>
</button>
</div>
</div>
</div>
<div class="calendar-body">
<table class="calendar-table">
<thead>
<tr>
<th>Po</th>
<th>Út</th>
<th>St</th>
<th>Čt</th>
<th>Pá</th>
<th>So</th>
<th>Ne</th>
</tr>
</thead>
<tbody class="calendar-tbody">
<tr>
<td>
<button type="button" date="2018-10-29" class="btn btn-lg btn-calendar non-actual non-event" id="day0">29</button>
</td>
<td>
<button type="button" date="2018-10-30" class="btn btn-lg btn-calendar non-actual non-event" id="day1">30</button>
</td>
<td>
<button type="button" date="2018-10-31" class="btn btn-lg btn-calendar non-actual non-event" id="day2">31</button>
</td>
<td>
<button type="button" date="2018-11-01" class="btn btn-lg btn-calendar non-event" id="day3">1</button></td>
<td>
<button type="button" date="2018-11-02" class="btn btn-lg btn-calendar non-event" id="day4">2</button></td>
<td>
<button type="button" date="2018-11-03" class="btn btn-lg btn-calendar non-event" id="day5">3</button></td>
<td>
<button type="button" date="2018-11-04" class="btn btn-lg btn-calendar non-event" id="day6">4</button></td>
</tr>
<tr>
<td>
<button type="button" date="2018-11-05" class="btn btn-lg btn-calendar non-event" id="day7">5</button></td>
<td>
<button type="button" date="2018-11-06" class="btn btn-lg btn-calendar non-event" id="day8">6</button></td>
<td>
<button type="button" date="2018-11-07" class="btn btn-lg btn-calendar today non-event" id="day9">7</button></td>
<td>
<button type="button" date="2018-11-08" class="btn btn-lg btn-calendar non-event" id="day10">8</button></td>
<td>
<button type="button" date="2018-11-09" class="btn btn-lg btn-calendar non-event" id="day11">9</button></td>
<td>
<button type="button" date="2018-11-10" class="btn btn-lg btn-calendar non-event" id="day12">10</button>
</td>
<td>
<button type="button" date="2018-11-11" class="btn btn-lg btn-calendar event non-event" id="day13">11</button>
</td>
</tr>
<tr>
<td>
<button type="button" date="2018-11-12" class="btn btn-lg btn-calendar non-event" id="day14">12</button>
</td>
<td>
<button type="button" date="2018-11-13" class="btn btn-lg btn-calendar" id="day15">13</button>
</td>
<td>
<button type="button" date="2018-11-14" class="btn btn-lg btn-calendar non-event" id="day16">14</button>
</td>
<td>
<button type="button" date="2018-11-15" class="btn btn-lg btn-calendar active" id="day17">15</button>
</td>
<td>
<button type="button" date="2018-11-16" class="btn btn-lg btn-calendar non-event" id="day18">16</button>
</td>
<td>
<button type="button" date="2018-11-17" class="btn btn-lg btn-calendar non-event" id="day19">17</button>
</td>
<td>
<button type="button" date="2018-11-18" class="btn btn-lg btn-calendar non-event" id="day20">18</button>
</td>
</tr>
<tr>
<td>
<button type="button" date="2018-11-19" class="btn btn-lg btn-calendar non-event" id="day21">19</button>
</td>
<td>
<button type="button" date="2018-11-20" class="btn btn-lg btn-calendar non-event" id="day22">20</button>
</td>
<td>
<button type="button" date="2018-11-21" class="btn btn-lg btn-calendar non-event" id="day23">21</button>
</td>
<td>
<button type="button" date="2018-11-22" class="btn btn-lg btn-calendar non-event" id="day24">22</button>
</td>
<td>
<button type="button" date="2018-11-23" class="btn btn-lg btn-calendar non-event" id="day25">23</button>
</td>
<td>
<button type="button" date="2018-11-24" class="btn btn-lg btn-calendar non-event" id="day26">24</button>
</td>
<td>
<button type="button" date="2018-11-25" class="btn btn-lg btn-calendar non-event" id="day27">25</button>
</td>
</tr>
<tr>
<td>
<button type="button" date="2018-11-26" class="btn btn-lg btn-calendar non-event" id="day28">26</button>
</td>
<td>
<button type="button" date="2018-11-27" class="btn btn-lg btn-calendar non-event" id="day29">27</button>
</td>
<td>
<button type="button" date="2018-11-28" class="btn btn-lg btn-calendar non-event" id="day30">28</button>
</td>
<td>
<button type="button" date="2018-11-29" class="btn btn-lg btn-calendar event" id="day31">29</button>
</td>
<td>
<button type="button" date="2018-11-30" class="btn btn-lg btn-calendar non-event" id="day32">30</button>
</td>
<td>
<button type="button" date="2018-12-01" class="btn btn-lg btn-calendar non-actual non-event" id="day33">1</button>
</td>
<td>
<button type="button" date="2018-12-02" class="btn btn-lg btn-calendar non-actual non-event" id="day34">2</button>
</td>
</tr>
<tr>
<td>
<button type="button" date="2018-12-03" class="btn btn-lg btn-calendar non-actual non-event" id="day35">3</button>
</td>
<td>
<button type="button" date="2018-12-04" class="btn btn-lg btn-calendar non-actual non-event" id="day36">4</button>
</td>
<td>
<button type="button" date="2018-12-05" class="btn btn-lg btn-calendar non-actual non-event" id="day37">5</button>
</td>
<td>
<button type="button" date="2018-12-06" class="btn btn-lg btn-calendar non-actual non-event" d="day38">6</button>
</td>
<td>
<button type="button" date="2018-12-07" class="btn btn-lg btn-calendar non-actual non-event" id="day39">7</button>
</td>
<td>
<button type="button" date="2018-12-08" class="btn btn-lg btn-calendar non-actual non-event" id="day40">8</button>
</td>
<td>
<button type="button" date="2018-12-09" class="btn btn-lg btn-calendar non-actual non-event" id="day41">9</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="udalosti">
<div class="content__inner">
<div class="calendar-label"></div>
<div class="calendar-event">
<div></div>
</div>
</div>
</div>
<div class="more-btn">
<button class="btn btn-outline-primary btn-inverse" type="button">
Zobrazit vše
</button>
</div>
</div>
</div>
</div>
Responzivní (RWD) zobrazení
Slouží pro zobrazení na menších zařízeních (mobilech, tabletech). Více o typech zařízení najdete na stránce Mřížka.
Pro náhled chování na menším zařízení lze využít náhled komponenty Výběr data.
Použití
- Pro přehled o událostech, které uživatele čekají nebo již proběhly
- Pro zobrazení jednotlivých událostí
Popis komponenty
Komponenta se skládá z pěti částí:
Označení
Používejte označení, které dá uživateli kontext použití komponenty. Název by měl vždy korespondovat se zobrazovaným obsahem.
Příklady vhodného označení:
- Kalendář
- Nadcházející události
- Moje události
- atd.
Přepínání měsíců
Slouží k prohlížení měsíců, kde uživatel pro přechod na následující měsíc využije šipky vpravo, pro zobrazení minulého měsíce využije šipky vlevo.
- Zobrazujte vždy aktuální měsíc a rok
Přepínání měsíců ovlivňuje týdenní kalendář (zobrazuje se vždy odpovídající týden podle měsíce)
Týdenní kalendář
- Týdenní kalendář vždy podléhá vybranému měsíci v roce
- Ve výchozím stavu zobrazujte aktuální měsíc rozdělený po týdnech
-
Zobrazujte i dny z minulého měsíce (zobrazte vždy dny, které uplynuly od začátku týdne)
Například:
- Pokud je prvním dnem v měsící pátek 1. 12. 2017, zobrazte i interval 27. 11.-30. 11. (pondělí - čtvrtek).
-
Zobrazujte i dny z následujícího měsíce (zobrazte vždy dny, které scházejí k dokončení následujícího týdne, což umožní rychlý přehled jaké události uživatele čekají v dalším týdnu, aniž by musel zvolit následující měsíc)
Například:
- Pokud je posledním dnem v měsíci neděle 31. 12. 2017, zobrazte i následující týden 1. 1.-7. 1. 2018
- Pokud je posledním dnem v měsíci čtvrtek 30. 11. 2017, zobrazte i následující interval 1. 12.-3. 12. 2017
Zobrazení dnů a událostí
Dbejte na barevné odlišení jednotlivých dnů.
- Aktuální den
- Den bez události (ať už nadcházející nebo uplynulý)
- Den s událostí (ať už nadcházející nebo proběhlou)
Náhled události
- Může být použit pro zobrazení jedné nebo více následujících událostí
- Není nutné zobrazovat, pokud není k dispozici dostatek místa
Tlačítko
- Slouží pro zobrazení dalších událostí nebo spuštění související akce (např. založení nové události).
- Více o komponentě Tlačítko
