Calendar Component (LESS, no framework)

<section class="upcoming-events">
	<header>
		<h1 class="calendar-header">
			
		</h1>
		<ol class="days">
			<li class="day" data-letter="S" data-abbr="Sun">Sunday</li>
			<li class="day" data-letter="M" data-abbr="Mon">Monday</li>
			<li class="day" data-letter="T" data-abbr="Tue">Tuesday</li>
			<li class="day"  data-letter="W" data-abbr="Wed">Wednesday</li>
			<li class="day"  data-letter="T" data-abbr="Thu">Thursday</li>
			<li class="day"  data-letter="F" data-abbr="Fri">Friday</li>
			<li class="day"  data-letter="S" data-abbr="Sat">Saturday</li>
		</ol>
	</header>
	<ol class="dates">
		
	</ol>
</section>

<script id="date-template" type="text/x-handlebars-template">
	<li data-month="{{month}}" data-today="{{today}}" data-has-events="{{hasEvents}}">
		<div class="details">
			<span class="date">{{dateNum}}</span>
			{{#if hasEvents}}
				{{#each events as |event|}}
					<span class="event" {{#if event.allDay}}data-all-day-event="{{event.allDay}}"{{/if}}>
						{{event.name}}
					</span>
				{{/each}}
			{{/if}}
		</div>
	</li>
</script>