var currentMonth = moment().format('YYYY-MM'); var nextMonth = moment().add('month', 1).format('YYYY-MM'); var events = [ { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' }, { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' }, { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' }, { date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' } ]; $("#full-clndr").clndr({ template: $("#full-clndr-template").html(), events: events });
<div id="full-clndr"></div> <script type="text/template" id="full-clndr-template"> <div class="clndr-grid"> <div class="days-of-the-week clearfix"> <% _.each(daysOfTheWeek, function(day) { %> <div class="header-day"><%= day %></div> <% }); %> </div> <div class="days clearfix"> <% _.each(days, function(day) { %> <div class="<%= day.classes %>" id="<%= day.id %>"> <span class="day-number"><%= day.day %></span> <% switch(day.events.length) { %> <% case 0: break; %> <% case 1: %> <div>1 event</div> <% break; default: %> <div><%= day.events.length %> events</div> <% } %> <div><%= day.events.length %></div> </div> <% }); %> </div> </div> </script>
#full-clndr { background-color: #ebebeb; font-weight: 700; -moz-box-shadow: 4px 4px 0 #343434; -webkit-box-shadow: 4px 4px 0 #343434; box-shadow: 4px 4px 0 #343434; } #full-clndr .clndr-grid { float: left; width: 65%; border-right: 2px solid white; } #full-clndr .clndr-grid .days-of-the-week { width: 100%; background-color: #3883a3; } #full-clndr .clndr-grid .days-of-the-week .header-day { float: left; width: 14.2857%; padding: 14px; text-align: center; color: white; } #full-clndr .clndr-grid .days { width: 100%; } #full-clndr .clndr-grid .days .day, #full-clndr .clndr-grid .days .empty { float: left; width: 14.2857%; height: 66px; padding: 24px 0; text-align: center; color: #4f4f4f; background-color: #ebebeb; border-bottom: 2px solid white; background-image: url('./triangle.svg'); background-size: cover; background-position: center; } #full-clndr .clndr-grid .days .day.event .day-number, #full-clndr .clndr-grid .days .empty.event .day-number { padding-bottom: 4px; border-bottom: 2px solid #3883a3; } #full-clndr .clndr-grid .days .today { background-color: white; background-image: none; } * { margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { font-family: Inconsolata, Monaco, 'Andale Mono', Courier; font-size: 18px; color: #212121; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } strong { font-weight: 700; } @media all and (max-width: 768px) { #full-clndr .clndr-grid { width: 100%; border: none; } }