Toolbar-Menü

5.5 Kalender

Die Kalenderkomponente zeigt Termine an und ermöglicht das Umblättern innerhalb der Monate und Jahre. Der Hintergrund hervorzuhebender Tage, bzw. aktiver Elemente, ist in der Grundfarbe einzufärben. Auf eingefärbten Elementen ist die Textfarbe in WEIß auszuführen, bei fehlendem Kontrast zur Grundfarbe kann die Standardtextfarbe verwendet werden.

Die Kalenderkomponente zeigt Termine an und ermöglicht das Umblättern innerhalb der Monate und Jahre. Der Hintergrund hervorzuhebender Tage, bzw. aktiver Elemente, ist in der Grundfarbe einzufärben. Auf eingefärbten Elementen ist die Textfarbe in WEIß auszuführen, bei fehlendem Kontrast zur Grundfarbe kann die Standardtextfarbe verwendet werden.

Beispielbild für ein Monatskalendarium, das den Monat Januar 2016 in roten Zahlen und Schriftart darstellt. Die abgekürzten Wochentage sind in einer Reihe darunter angeordnet, gefolgt von den einzelnen Tagen des Monats, die in einem übersichtlichen Raster angeordnet sind. Die Zahlen für die Tage sind hell hinterlegt, um eine einfache Unterscheidung zu ermöglichen. Einige Tage sind farblich hervorgehoben, um besondere Ereignisse oder Feiertage anzuzeigen.
Beispielbild für ein Monatskalendarium, das den Monat Januar 2016 in roten Zahlen und Schriftart darstellt. Die abgekürzten Wochentage sind in einer Reihe darunter angeordnet, gefolgt von den einzelnen Tagen des Monats, die in einem übersichtlichen Raster angeordnet sind. Die Zahlen für die Tage sind hell hinterlegt, um eine einfache Unterscheidung zu ermöglichen. Einige Tage sind farblich hervorgehoben, um besondere Ereignisse oder Feiertage anzuzeigen.

Quelltext

 
<div class="bb-calendar">
    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-pager small-1 columns"> 
                <a href="#" title="Jahr zurück">
                    <i class="bb-icon-text fa fa-backward fa-lg"></i>
                </a>
            </div>
            <div class="bb-calendar-pager small-1 columns">
                <a href="#" title="Monat zurück">
                    <i  class="bb-icon-text fa fa-caret-left fa-lg"></i>
                </a>
            </div>
            <div class="bb-calendar-title small-3 columns">Kalender 2016</div>
            <div class="bb-calendar-pager small-1 columns">
                <a href="#" title="Monat vor">
                    <i class="bb-icon-text fa fa-caret-right fa-lg"></i>
                </a>
            </div>
            <div class="bb-calendar-pager small-1 columns end">
                <a href="#" title="Jahr vor">
                    <i class="bb-icon-text fa fa-forward fa-lg"></i>
                </a>
            </div>       
        </div>    
    </div>
    <div class="row bb-calendar-week-headline">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day-headline small-1 columns">Mo</div>
            <div class="bb-calendar-day-headline small-1 columns">Di</div>
            <div class="bb-calendar-day-headline small-1 columns">Mi</div>
            <div class="bb-calendar-day-headline small-1 columns">Do</div>
            <div class="bb-calendar-day-headline small-1 columns">Fr</div>
            <div class="bb-calendar-day-headline small-1 columns">Sa</div>
            <div class="bb-calendar-day-headline small-1 columns end">So</div>
        </div>
    </div>

    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day before small-1 columns" title="Tage aus dem Vormonat">28</div>
            <div class="bb-calendar-day before small-1 columns" title="Tage aus dem Vormonat">29</div>
            <div class="bb-calendar-day before small-1 columns" title="Tage aus dem Vormonat">30</div>
            <div class="bb-calendar-day before small-1 columns" title="Tage aus dem Vormonat">31</div>
            <div class="bb-calendar-day small-1 columns"><a href="#" title="Tag mit Ereignis"><b>01</b></a></div>
            <div class="bb-calendar-day small-1 columns">02</div>
            <div class="bb-calendar-day small-1 columns end">03</div>
        </div>
    </div>
    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day small-1 columns">04</div>
            <div class="bb-calendar-day hover-mark-light small-1 columns" title="Hover &quot;Leicht markiert&quot;"><a href="#" title="Hover &quot;Leicht markiert&quot;"><b>05</b></a></div>
            <div class="bb-calendar-day hover-mark-light small-1 columns" title="Hover &quot;Leicht markiert&quot;">06</div>
            <div class="bb-calendar-day hover-mark-light small-1 columns" title="Hover &quot;Leicht markiert&quot;"><a href="#" title="Hover &quot;Leicht markiert&quot;"><b>07</b></a></div>
            <div class="bb-calendar-day small-1 columns">08</div>
            <div class="bb-calendar-day mark-light hover-mark small-1 columns" title="leicht markiert, bspw. &quot;Ereignis 2&quot;"><a href="#" title="leicht markiert, bspw. &quot;Ereignis 2&quot;"><strong>09</strong></a></div>
            <div class="bb-calendar-day small-1 columns end">10</div>
        </div>
    </div>
    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day small-1 columns">11</div>
            <div class="bb-calendar-day hover-mark small-1 columns" title="Hover &quot;Markiert&quot;"> <a href="#" title="Hover &quot;Markiert&quot;"><b>12</b></a></div>
            <div class="bb-calendar-day hover-mark small-1 columns" title="Hover &quot;Markiert&quot;"> <b>13</b></div>
            <div class="bb-calendar-day hover-mark small-1 columns" title="Hover &quot;Markiert&quot;"> <a href="#" title="Hover &quot;Markiert&quot;"><b>14</b></a></div>
            <div class="bb-calendar-day mark hover-mark-light small-1 columns" title="Hover &quot;Markiert&quot;"> <a href="#" title="Hover &quot;Markiert&quot;"><b>15</b></a></div>
            <div class="bb-calendar-day small-1 columns">16</div>
            <div class="bb-calendar-day small-1 columns end"> 17</div>
        </div>
    </div>
    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day small-1 columns"> 18</div>
            <div class="bb-calendar-day hover small-1 columns" title="Hover &quot;Umrahmt&quot;"><a href="#" title="Hover &quot;Umrahmt&quot;"><b>19</b></a></div>
            <div class="bb-calendar-day hover small-1 columns" title="Hover &quot;Umrahmt&quot;">20</div>
            <div class="bb-calendar-day hover small-1 columns" title="Hover &quot;Umrahmt&quot;"><a href="#" title="Hover &quot;Umrahmt&quot;"><b>21</b></a></div>
            <div class="bb-calendar-day small-1 columns">22</div>
            <div class="bb-calendar-day bordered mark-light hover-mark small-1 columns" title="leicht markiert und umrahmt, bspw. &quot;Heute ohne Ereignis&quot;"><strong>23</strong></div>
            <div class="bb-calendar-day small-1 columns end">24</div>
        </div>
    </div>
    <div class="row">
        <div class="small-12 small-centered columns">
            <div class="bb-calendar-day small-1 columns">25</div>
            <div class="bb-calendar-day small-1 columns">26</div>
            <div class="bb-calendar-day small-1 columns">27</div>
            <div class="bb-calendar-day small-1 columns"> 28 </div>
            <div class="bb-calendar-day small-1 columns">29</div>
            <div class="bb-calendar-day small-1 columns">30</div>
            <div class="bb-calendar-day after small-1 columns end" title="Tage des Folgemonats">01</div>
        </div>
    </div>
</div>

Benötigtes Javascript

 
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

  • Ziffern folgen dem Stil des Standardtexts
  • Der Hintergrund des aktuellen Tags ist in Grundfarbe, bzw. in der blassen Grundfarbe, eingefärbt. Die Datumszahl wird dabei WEIß. Bei fehlendem Kontrast zur Grundfarbe kann die Standardtextfarbe verwendet werden.
  • Datumszahlen von Terminen können in der Grundfarbe eingefärbt sein.
  • Die Datumszahlen vorheriger oder nachfolgender Monate sollen in HELLGRAU eingefärbt werden.
  • Ziffern folgen dem Stil des Standardtexts
  • Der Hintergrund des aktuellen Tags ist in Grundfarbe, bzw. in der blassen Grundfarbe, eingefärbt. Die Datumszahl wird dabei WEIß. Bei fehlendem Kontrast zur Grundfarbe kann die Standardtextfarbe verwendet werden.
  • Datumszahlen von Terminen können in der Grundfarbe eingefärbt sein.
  • Die Datumszahlen vorheriger oder nachfolgender Monate sollen in HELLGRAU eingefärbt werden.

Spezifische Anforderungen

keine Beschränkungen

keine Beschränkungen

Barrierefreiheit

Die Alternativtexte der Tage haben die Form „Dienstag, 5. Januar 2016“.

Die Alternativtexte der Tage haben die Form „Dienstag, 5. Januar 2016“.

Aktionsverhalten

Wird ein Element überfahren (Hover-Effekt), so gleicht es dem Stil des aktuellen Tages.

Wird ein Element überfahren (Hover-Effekt), so gleicht es dem Stil des aktuellen Tages.

Responsive Design

Die Kalenderkomponente wird in kleinen Auflösungen nicht umgebrochen. Sie wird skaliert oder ausgeblendet.

Die Kalenderkomponente wird in kleinen Auflösungen nicht umgebrochen. Sie wird skaliert oder ausgeblendet.

Seite drucken