"FullCalendar - Responsive"
Bootstrap 3.2.0 Snippet by roymj88

<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><sup>5</sup></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({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }, eventLimit: true, // allow "more" link when too many events events: [ { title: 'All Day Event', start: '2015-02-01' }, { title: 'Long Event', start: '2015-02-07', end: '2015-02-10' }, { id: 999, title: 'Repeating Event', start: '2015-02-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2015-02-16T16:00:00' }, { title: 'Conference', start: '2015-02-11', end: '2015-02-13' }, { title: 'Meeting', start: '2015-02-12T10:30:00', end: '2015-02-12T12:30:00' }, { title: 'Lunch', start: '2015-02-12T12:00:00' }, { title: 'Meeting', start: '2015-02-12T14:30:00' }, { title: 'Happy Hour', start: '2015-02-12T17:30:00' }, { title: 'Dinner', start: '2015-02-12T20:00:00' }, { title: 'Birthday Party', start: '2015-02-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2015-02-28' } ], editable: true, }); });

Related: See More


Questions / Comments: