Calendar
Calendar
The calendar is one of our biggest modules. To get started with the calendar look through the code on this page. We used the BEM notation to make it easily readable for development.
Example
- WK
- MON
- TUE
- WED
- THU
- FRI
- SAT
- SUN
- 1
- 2
- 3
- 4
- 5
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Eat
Kill Obi Wan
Kill Obi Wan
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Kill Obi Wan
Rescue Princess Lea
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Train Jedi Skills
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Rescue Princess Lea
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Kill Obi Wan
Kill Obi Wan
Kill Obi Wan
Train Jedi Skills
Rescue Princess Lea
Imports
- SASS:
@import "base"; @import "imports/modules/calendar";
Code
<section class="cal--h-view">
<time class="cal__head" datetime="2013-07">
July 2013
</time>
<ol class="cal__col-head">
<li class="l-cal__col-head__cell"><div class="cal__cell">WK</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">MON</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">TUE</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">WED</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">THU</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">FRI</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">SAT</div></li>
<li class="l-cal__col-head__cell"><div class="cal__cell">SUN</div></li>
</ol>
<div class="l-cal__row-head">
<ol class="cal__row-head">
<li class="l-cal__row-head__cell"><div class="cal__cell">1</div></li>
<li class="l-cal__row-head__cell"><div class="cal__cell">2</div></li>
<li class="l-cal__row-head__cell"><div class="cal__cell">3</div></li>
<li class="l-cal__row-head__cell"><div class="cal__cell">4</div></li>
<li class="l-cal__row-head__cell"><div class="cal__cell">5</div></li>
</ol>
</div>
<div class="l-cal__rows">
<ol class="cal__rows">
<li class="cal__row">
<ol class="cal__cells">
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-01"> 1 <span class="cal__additional-info">Mon</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">11:00</time>
<time class="to" datetime="2013-07-01 20:00">0:00</time>
</h4>
<p class="cal__entry__title">Eat</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-02">2 <span class="cal__additional-info">Tue</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-03">3 <span class="cal__additional-info">Wed</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-04">4 <span class="cal__additional-info">Thu</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-05">5 <span class="cal__additional-info">Fri</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-06">6 <span class="cal__additional-info">Sat</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-07">7 <span class="cal__additional-info">Sunday</span></time>
</div>
</div>
</li>
</ol>
</li>
<li class="cal__row">
<ol class="cal__cells">
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-01">8 <span class="cal__additional-info">Mon</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
<div class="cal__cell__overflow">
</div>
<a class="cal__show-more" href="">Show All</a>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-02">9 <span class="cal__additional-info">Tue</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--current">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-03">10 <span class="cal__additional-info">Wed</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-04">11 <span class="cal__additional-info">Thu</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-05">12 <span class="cal__additional-info">Fri</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-06">13 <span class="cal__additional-info">Sat</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-07">14 <span class="cal__additional-info">Sunday</span></time>
</div>
</div>
</li>
</ol>
</li>
<li class="cal__row">
<ol class="cal__cells">
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-01">15 <span class="cal__additional-info">Mon</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
<div class="cal__cell__overflow">
</div>
<a class="cal__show-more" href="">Show All</a>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-02">16 <span class="cal__additional-info">Tue</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-03">17 <span class="cal__additional-info">Wed</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-04">18 <span class="cal__additional-info">Thu</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-05">19 <span class="cal__additional-info">Fri</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-06">20 <span class="cal__additional-info">Sat</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-07">21 <span class="cal__additional-info">Sunday</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
</div>
</div>
</li>
</ol>
</li>
<li class="cal__row">
<ol class="cal__cells">
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-01">22 <span class="cal__additional-info">Mon</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-02">23 <span class="cal__additional-info">Tue</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-03">24 <span class="cal__additional-info">Wed</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-04">25 <span class="cal__additional-info">Thu</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-05">26 <span class="cal__additional-info">Fri</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-06">27 <span class="cal__additional-info">Sat</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-07">28 <span class="cal__additional-info">Sunday</span></time>
</div>
</div>
</li>
</ol>
</li>
<li class="cal__row">
<ol class="cal__cells">
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-01">29 <span class="cal__additional-info">Mon</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
<div class="cal__cell__overflow">
</div>
<a class="cal__show-more" href="">Show All</a>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--is-empty">
<time class="cal__cell__title" datetime="2013-07-02">30 <span class="cal__additional-info">Tue</span></time>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-03">31 <span class="cal__additional-info">Wed</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
<div class="cal__cell__overflow">
</div>
<a class="cal__show-more" href="">Show All</a>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--out-of-date">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-04">1 <span class="cal__additional-info">Thu</span></time>
<ol class="cal__entries">
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 09:00">9:00</time>
<time class="to" datetime="2013-07-01 10:00">10:00</time>
</h4>
<p class="cal__entry__title">Kill Obi Wan</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 12:00">12:00</time>
<time class="to" datetime="2013-07-01 13:00">1:00</time>
</h4>
<p class="cal__entry__title">Train Jedi Skills</p>
</li>
<li class="cal__entry">
<h4 class="cal__entry__period">
<time class="from" datetime="2013-07-01 18:00">6:00</time>
<time class="to" datetime="2013-07-01 20:00">8:00</time>
</h4>
<p class="cal__entry__title">Rescue Princess Lea</p>
</li>
</ol>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--out-of-date cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-05">2 <span class="cal__additional-info">Fri</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--out-of-date cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-06">3 <span class="cal__additional-info">Sat</span></time>
</div>
</div>
</li>
<li class="l-cal__cell">
<div class="cal__cell cal__cell--out-of-date cal__cell--is-empty">
<div class="cal__cell__inner">
<time class="cal__cell__title" datetime="2013-07-07">4 <span class="cal__additional-info">Sunday</span></time>
</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
</section>