Full Calendar Month Picker

Demostrates Month Picker integration with FullCalnedar.js

by aflynt

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,
			//MinMonth: "+10y",
			//MaxMonth: "+10y",
			OnAfterMenuClose: function() {
				var d = $("#fc-datepicker").MonthPicker('Validate')
				console.log(d)
				if (d !== null){
					$('#calendar').fullCalendar('gotoDate', d);
				}
			}
		});
		//$("td.month-picker-previous a").removeClass('ui-state-disabled')
		$("#fc-datepicker-header").click(function()...