How to set up the current day (today) as a default date on FullCalendar? ~ Solution

Thursday, December 21, 2017

How to set up the current day (today) as a default date on FullCalendar?

HTML PAGE ADD THIS
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css">
<body>
<div id='calendar'></div>
</body>

add this script code

$('#calendar').fullCalendar();

// change month
$('#months-tab').on('change', function() {
// get month from the tab. Get the year from the current fullcalendar date
var month = $(this).find(":selected").attr('data-month'),
year = $("#calendar").fullCalendar('getDate').format('YYYY');

var m = moment([year, month, 1]).format('YYYY-MM-DD');

$('#calendar').fullCalendar('gotoDate', m );
});

// go to prev year
$("#prev-year").on('click', function() {
$('#calendar').fullCalendar( 'prevYear' );
});

// set the month as the current month
// has to be -1 because this is 0 based
var month = $("#calendar").fullCalendar('getDate').format('MM') -1 ;
// set the correct month selected
$("#months-tab").find('option[data-month=' + month + ']').prop('selected', true);

OUTPUT: