Calendar Front End Test (No sections)

by omni5cience

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://kylestetz.github.io/CLNDR/js/clndr.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=false;" />
<h1 class="calendar-header">Calendar of Events</h1>
<div class="calendar-container"></div>
<div class="event-list-container"></div>

<script type="text/template" id="calendar-template">
    <div class="grid clearfix">
        <% _.each(daysOfTheWeek, function(day) { %>
            <div class="day header"><%= day %></div>
        <% }); %>
        <% _.each(days, function(day) { %>
            <div class="<%= day.classes %>" id="<%= day.id %>">
                <span class="day-number"><%= day.day %></span>
                 <% if (day.events && day.events.length > 1) { %>
                    <div class="event-number"><%= day.events.length %> events</div>
					<div class="event-bullet">&bull;</div>
                <% } else if (day.events && day.events.length == 1) { %>
				    <div class="event-number">1 event</div>
                    <div class="event-bullet">&bull;</div>
                <% } %>
            </div>
        <% }); %>
    </div>
    <p class="calendar-description">Tap on a day to see events happening then.</p>
</script>
<script type="text/template" id="event-item-template">
<li class="event-item clearfix">
	<% if (e.photo_url) { %>
	<div class="image">
		<img src="<%= e.photo_url %>">
	</div>
	<% } %>
	<div class="event-body">
		<h3 class="event-title"><%= e.title %></h3>
		<span class="event-time"><%= moment(e.date).format("h:mm a") %></span>
		<span class="expand">&times;</span>
		<section class="teaser">
			<p><%= e.teaser %></p>
		</section>
		<section class="full-info">
			<summary class="description">
				<%= e.description...

SCSS

* {
	//margin: 0;
	box-sizing: border-box;
}
body.calendar {
	.calendar-container {
		display: block;
	}
	.event-list-container {
		display: none;
	}
}
body:not(.calendar) {
	.calendar-container {
		display: none;
	}
	.event-list-container {
		display: block;
	}
}
body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 200;
	background-color: #ddd;
    overflow: scroll;
    color: #333;
}
.calendar-header, .calendar-description {
    text-align: center;
    margin: 0.3em 0;
}

.grid {
	padding: 0.5em;
	max-width: 968px;
	min-width: 200px;
	//position: relative;
	margin: 0 auto;
	background-color: white;
}
$width = 2px;
.grid .header {
	//width: 100%;
	font-weight: 400;
	margin-bottom: 4px;
	background-color: #333;
	color: #ddd;
	//outline: 2px solid white;

}
.grid .day:nth-child(7n) {
	margin-right: 0;
}
$day-color = #ebebeb
.day {
	background-color: $day-color;
	//background-color: #e6e6e6;
	//display: inline-block;
	float: left;
	width: 18px;
	width: 13.8571%;
	//width: calc('14.2857% - #{$width}');
	//width: calc('(100% - #{6 * $width}) / 7');
	padding: 2.8em 0 3em;
	margin: 0 0.5% 0.5% 0;
	//margin-bottom: 0.5%;
	text-align: center;
	//border-bottom: 2px solid white;
	position: relative;
	//margin-right: $width;
	//margin-right: 0.5%;
}
#calendar-day-2013-09-22 {
    margin-bottom: 0;
}
.event {
	background-color: darken($day-color, 4%);
	//padding: 1.25em 0;
	//color: #278ed3;
	font-weight: 400;
}
.today {
    background-color: #CECECE;
}
.event-number {
	position: absolute;
	left: 0;
	right: 0;
	line-height: 0.5;
}
.event-bullet {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	line-height: 0.5;
}
.day.events div {
	//text-decoration: underline;
}

.grid .day:empty {
	border: none;
	background-color: rgba(0,0,0,0);
	//outline: none;
}

.clearfix {
	*zoom:1;
}
.clearfix:before, .clearfix:after {
	display:table;
	content:" ";
	//line-height:0;
}
.clearfix:after {
	clear:both;
}

@media all and (max-width: 600px) {
	.event...

JavaScript

$(".event-list-container").on("click", ".close", function() {
    $(document.body).toggleClass("calendar", true);
}).on("click", ".event-item", function(){
    $(this).toggleClass("expanded");
});

FastClick.attach(document.body);

window.event_item = _.template($("#event-item-template").html(), null, {variable: "e"});
var event_list = _.template($("#event-list-template").html());

var calendar_template = $("#calendar-template").html();
events = [{"date":"2013-09-29T12:00:00-04:00","duration":18000,"title":"Nano","description":"This interactive exhibit has been designed to engage family audiences in nanoscale science, engineering and technology.  ","teaser":"This interactive exhibit has been designed to engage family audiences in nanoscale science, engineering and technology.  ","location":{"id":12,"title":"Newark Museum","phone":"973-596-6550","fax":null,"url":"http://www.newarkmuseum.org","street_number":"49","street_name":"Washington Street","postal_code":"07102","city":"Newark","hours":"Wednesday-Sunday Noon-5pm","description":"The Newark Museum, established as the largest New Jersey museum, invites you to enjoy unforgettable experiences in the arts and natural sciences."},"validation_context":null,"errors":{}}];
    $(".calendar-container").clndr({
        template: calendar_template,
        events: events,
        clickEvents: {
            click: function(target) {
                console.log(target);
                if (target["events"].length > 0) {
                    $(".event-list-container").html(event_list(target));
                    $(document.body).toggleClass("calendar", false);
                }
            }
        }
    });