$(document).ready( function() { // here's some magic to make sure the dates are happening this month. var thisMonth = moment().format('YYYY-MM'); // Here's our events array. We could grab this via AJAX as well. var eventArray = [ { date: thisMonth + "-24 07:52", title: "This is an event title", url: "http://google.com", time: "7:15PM" }, { date: thisMonth + "-28", title: "the 28th, Part 1", url: "http://www.google.com" }, { date: thisMonth + "-28", title: "the 28th, Part 2", arbitraryObject: 42 }, { date: thisMonth + "-16", title: "Another title", anotherObject: "clndr exposes whatever is in your event object" } ]; var clndr1 = $('.cal1').clndr({ events: eventArray, clickEvents: { click: function(target) { console.log(target); } } }); var clndr2 = $('.cal2').clndr({ template: $('#template-calendar').html(), events: eventArray, startWithMonth: moment().add('month', 0), clickEvents: { click: function(target) { console.log(target); } } }); // bind both clndrs to the left and right arrow keys $(document).keydown( function(e) { if(e.keyCode == 37) { // left arrow clndr1.back(); clndr2.back(); } if(e.keyCode == 39) { // right arrow clndr1.forward(); clndr2.forward(); } }); });
<div class="container"> <h3></h3> <div class="cal1"> </div> <div class="cal2"> <script type="text/template" id="template-calendar"> <div class="clndr-controls"> <div class="clndr-previous-button">‹</div> <div class="month"><%= month %></div> <div class="clndr-next-button">›</div> </div> <div class="clndr-grid"> <div class="days-of-the-week"> <% _.each(daysOfTheWeek, function(day) { %> <div class="header-day"><%= day %></div> <% }); %> <div class="days"> <% _.each(days, function(day) { %> <div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div> <% }); %> </div> </div> </div> </script> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono); .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .noselect { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .cal1 { margin: 30px auto; max-width: 600px; font-family: 'Droid Sans Mono'; font-size: 14px; } .cal1 .clndr .clndr-controls { display: inline-block; width: 100%; position: relative; margin-bottom: 10px; } .cal1 .clndr .clndr-controls .month { float: left; width: 33%; text-align: center; } .cal1 .clndr .clndr-controls .clndr-control-button { float: left; width: 33%; } .cal1 .clndr .clndr-controls .clndr-control-button.rightalign { text-align: right; width: 34%; } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button { cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover { background: #ddd; } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button { cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover { background: #ddd; } .cal1 .clndr .clndr-table { table-layout: fixed; width: 100%; } .cal1 .clndr .clndr-table .header-days { height: 30px; font-size: 10px; background: #eee; } .cal1 .clndr .clndr-table .header-days .header-day { vertical-align: middle; text-align: center; border-left: 1px solid #ccc; border-top: 1px solid #ccc; color: #555; } .cal1 .clndr .clndr-table .header-days .header-day:last-child { border-right: 1px solid #ccc; } .cal1 .clndr .clndr-table tr { height: 85px; } .cal1 .clndr .clndr-table tr td { vertical-align: top; } .cal1 .clndr .clndr-table tr .day { border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 100%; height: inherit; } .cal1 .clndr .clndr-table tr .day:hover { background: #eee; } .cal1 .clndr .clndr-table tr .day.today { background: #EAEAEA; } .cal1 .clndr .clndr-table tr .day.today:after{ content:"今日だよ!"; padding-left:15px; font-size:x-small; } .cal1 .clndr .clndr-table tr .day.today:hover { background: #72c6d8; } .cal1 .clndr .clndr-table tr .day.today.event { background: #a7dbc1; } .cal1 .clndr .clndr-table tr .day.event { background: #A3BCDE; } .cal1 .clndr .clndr-table tr .day.event:hover { background: #96d478; } .cal1 .clndr .clndr-table tr .day:last-child { border-right: 1px solid #ccc; } .cal1 .clndr .clndr-table tr .day .day-contents { box-sizing: border-box; padding: 8px; font-size: 12px; text-align: right; } .cal1 .clndr .clndr-table tr .empty { border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 100%; height: inherit; background: #ddd; } .cal1 .clndr .clndr-table tr .empty:hover { background: #ddd; } .cal1 .clndr .clndr-table tr .empty:last-child { border-right: 1px solid #ccc; } .cal1 .clndr .clndr-table tr:last-child .day { border-bottom: 1px solid #ccc; } .cal1 .clndr .clndr-table tr:last-child .empty { border-bottom: 1px solid #ccc; } .cal2 { max-width: 177px; margin: 0 auto; font-family: 'Droid Sans Mono'; } .cal2 .clndr .clndr-controls { display: block; display: inline-block; width: 100%; margin-bottom: 3px; } .cal2 .clndr .clndr-controls .clndr-previous-button { float: left; width: 10%; text-align: left; cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .cal2 .clndr .clndr-controls .clndr-previous-button:hover { background-color: #f4f4f4; } .cal2 .clndr .clndr-controls .month { float: left; width: 80%; text-align: center; } .cal2 .clndr .clndr-controls .clndr-next-button { float: left; width: 10%; text-align: right; cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .cal2 .clndr .clndr-controls .clndr-next-button:hover { background-color: #f4f4f4; } .cal2 .clndr .clndr-grid { text-align: center; border: 1px solid #FF4545; display: inline-block; } .cal2 .clndr .clndr-grid .header-day { float: left; width: 25px; height: 25px; background: #FF4545; } .cal2 .clndr .clndr-grid .day { float: left; width: 25px; height: 25px; } .cal2 .clndr .clndr-grid .day.event { background-color: #B4E09F; } .cal2 .clndr .clndr-grid .day.today { background-color: #E3C57F; } .cal2 .clndr .clndr-grid .empty { float: left; width: 25px; height: 25px; background: #ddd; }