Toolbar-Menü
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Bilder
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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.

 
Kalender 2016
Mo
Di
Mi
Do
Fr
Sa
So
28
29
30
31
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
01
 


  • Quelltext
    Quelltext kopieren 
    <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.
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.

Seite drucken