1. Komponenty

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í:

Schéma kalendáře

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ů.

Zobrazení dnů a událostí

  • 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

Užitečné odkazy