Full Calendar Month Picker

Demostrates Month Picker integration with FullCalnedar.js

by Narsim K

HTML

<link rel="stylesheet" href="https://kidsysco.github.io/jquery-ui-month-picker/MonthPicker.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js"></script>
<script src="https://kidsysco.github.io/jquery-ui-month-picker/MonthPicker.min.js"></script>
<div id='calendar'></div>

CSS

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}

#ui-datepicker-div {
    z-index: 5;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}

JavaScript

$('#calendar').fullCalendar({
	    header: {
	        left: 'prev,next today',
	        center: 'prev title next',
	        right: 'month,basicWeek,basicDay'
	    },
	    defaultDate: '2017-02-12',
	    navLinks: true, // can click day/week names to navigate views
	    editable: true,
	    eventLimit: true, // allow "more" link when too many events
	    events: [{
	            title: 'All Day Event',
	            start: '2017-02-01'
	        },
	        {
	            title: 'Long Event',
	            start: '2017-02-07',
	            end: '2017-02-10'
	        },
	        {
	            id: 999,
	            title: 'Repeating Event',
	            start: '2017-02-09T16:00:00'
	        },
	        {
	            id: 999,
	            title: 'Repeating Event',
	            start: '2017-02-16T16:00:00'
	        },
	        {
	            title: 'Conference',
	            start: '2017-02-11',
	            end: '2017-02-13'
	        },
	        {
	            title: 'Meeting',
	            start: '2017-02-12T10:30:00',
	            end: '2017-02-12T12:30:00'
	        },
	        {
	            title: 'Lunch',
	            start: '2017-02-12T12:00:00'
	        },
	        {
	            title: 'Meeting',
	            start: '2017-02-12T14:30:00'
	        },
	        {
	            title: 'Happy Hour',
	            start: '2017-02-12T17:30:00'
	        },
	        {
	            title: 'Dinner',
	            start: '2017-02-12T20:00:00'
	        },
	        {
	            title: 'Birthday Party',
	            start: '2017-02-13T07:00:00'
	        },
	        {
	            title: 'Click for Google',
	            url: 'http://google.com/',
	            start: '2017-02-28'
	        }
	    ]
	});

	// start the hack for the date picker
	$(".fc-header-toolbar .fc-center h2").attr('id', 'fc-datepicker-header').before('<input size="1" style="height: 0px; width:0px; border: 0px;" id="fc-datepicker" value="" />');
	$("#fc-datepicker").MonthPicker({
	    Button: false,
	   ...