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.
<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>
<script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/2jquery.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/5foundation.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/what-input.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_3/js/finalApp.js"></script>
keine Beschränkungen
Die Alternativtexte der Tage haben die Form „Dienstag, 5. Januar 2016“.
Wird ein Element überfahren (Hover-Effekt), so gleicht es dem Stil des aktuellen Tages.
Die Kalenderkomponente wird in kleinen Auflösungen nicht umgebrochen. Sie wird skaliert oder ausgeblendet.