<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- put this within head tag, this location creates a validation error --> <link rel='stylesheet' href='http://fullcalendar.io/js/fullcalendar-2.2.3/fullcalendar.css' /> <div class="container"> <div class="row"> <div class="col-md-12"> <img src="http://i.imgur.com/7nylkQZ.png" alt=""> <p><strong>A responsive calendar</strong> which is best viewed: <a href="http://bootsnipp.com/iframe/V0PMQ" target="_blank">full screen</a> <br> FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API. <a href="http://fullcalendar.io/" target="_blank">FullCalendar Reference and Github</a> </p> <hr> <div id='calendar'></div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FV0PMQ" target="_blank"><small>HTML</small>⁵</a> </p> </div> </div> </div> <script src='http://fullcalendar.io/js/fullcalendar-2.2.3/lib/moment.min.js'></script> <script src='http://fullcalendar.io/js/fullcalendar-2.2.3/fullcalendar.min.js'></script>

$(document).ready(function() { // page is now ready, initialize the calendar... // options and github - http://fullcalendar.io/ $('#calendar').fullCalendar({ dayClick: function() { alert('a day has been clicked!'); } }); });