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

  1. WK
  2. MON
  3. TUE
  4. WED
  5. THU
  6. FRI
  7. SAT
  8. SUN
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Rescue Princess Lea

      4. Eat

      1. Kill Obi Wan

      1. Kill Obi Wan

      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Rescue Princess Lea

      4. Kill Obi Wan

      5. Train Jedi Skills

      6. Rescue Princess Lea

      Show All
      1. Kill Obi Wan

      1. Kill Obi Wan

      1. Rescue Princess Lea

      2. Kill Obi Wan

      3. Train Jedi Skills

      4. Rescue Princess Lea

      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Train Jedi Skills

      4. Rescue Princess Lea

      Show All
      1. Kill Obi Wan

      1. Rescue Princess Lea

      2. Kill Obi Wan

      3. Train Jedi Skills

      4. Rescue Princess Lea

      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Rescue Princess Lea

      1. Kill Obi Wan

      1. Kill Obi Wan

      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Rescue Princess Lea

      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Rescue Princess Lea

      4. Kill Obi Wan

      5. Train Jedi Skills

      6. Rescue Princess Lea

      Show All
      1. Kill Obi Wan

      2. Train Jedi Skills

      3. Train Jedi Skills

      4. Rescue Princess Lea

      Show All
      1. Kill Obi Wan

      2. Train Jedi Skills

      3. 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>