Theme "darkGreyBlue" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:
<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->
<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/darkGreyBlue.css"/>
5. Komponenten
- 5.1 Accordion
- 5.2 Pictures
- 5.3 Formulare
- 5.4 Icons
- 5.5 Kalender
- 5.6 Listen
- 5.7 Mega-Menü
- 5.8 Mobile-Menü
- 5.9 Meldungen
- 5.10 Slider
- 5.11 Tabellen
- 5.12 Tabs (Horizontal)
- 5.13 Tabs (Vertikal)
- 5.14 Teaser
- 5.15 Tonaufnahmen
- 5.16 Videos
- 5.17 Externe Inhalte
Platzierung
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.
-
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 "Leicht markiert""><a href="#" title="Hover "Leicht markiert""><b>05</b></a></div> <div class="bb-calendar-day hover-mark-light small-1 columns" title="Hover "Leicht markiert"">06</div> <div class="bb-calendar-day hover-mark-light small-1 columns" title="Hover "Leicht markiert""><a href="#" title="Hover "Leicht markiert""><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. "Ereignis 2""><a href="#" title="leicht markiert, bspw. "Ereignis 2""><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 "Markiert""> <a href="#" title="Hover "Markiert""><b>12</b></a></div> <div class="bb-calendar-day hover-mark small-1 columns" title="Hover "Markiert""> <b>13</b></div> <div class="bb-calendar-day hover-mark small-1 columns" title="Hover "Markiert""> <a href="#" title="Hover "Markiert""><b>14</b></a></div> <div class="bb-calendar-day mark hover-mark-light small-1 columns" title="Hover "Markiert""> <a href="#" title="Hover "Markiert""><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 "Umrahmt""><a href="#" title="Hover "Umrahmt""><b>19</b></a></div> <div class="bb-calendar-day hover small-1 columns" title="Hover "Umrahmt"">20</div> <div class="bb-calendar-day hover small-1 columns" title="Hover "Umrahmt""><a href="#" title="Hover "Umrahmt""><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. "Heute ohne Ereignis""><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/js/vendor/jquery.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/vendor/what-input.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/app.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.
Spezifische Anforderungen
keine Beschränkungen
Barrierefreiheit
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.
Responsive Design
Die Kalenderkomponente wird in kleinen Auflösungen nicht umgebrochen. Sie wird skaliert oder ausgeblendet.