Why December month only not loading when choosing option 12 in month drop down?

Question

I am working on full calendar. I manually added month drop down ,after got reference from internet. So far it working properly. The problem is, Up to September, it works fine. But when I choose Oct, it shows Sep only, then for Nov- it shows Oct, and for Dec, it shows Nov only. December is not working in this drop down and calendar.

My code below:

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mrch</option><option value="4">Aprl</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function (event) {
    $('#calendar_full').fullCalendar('changeView', 'month', this.value);
    $('#calendar_full').fullCalendar('gotoDate', y + '-' + this.value + '-1');
}); // y assigned as selected year.

If I change option value for Oct to 11, Nov to 12 and Dec to 13, October and November back to normal, still December not working.

How to fix it. Kindly help.

Answer 1

You are not creating valid date strings to pass to the fullCalendar functions.

1) this.value will be a single number. changeView expects you to provide a whole date (see documentation).

2) y + '-' + this.value + '-1' will produce dates like 2019-1-1 or 2019-10-1 which are not valid RFC2822 or ISO date formats, due to the single-digit values in the month and day sections.

You'll see a warning in the Console (generated by momentJS) when you try to use these values as dates because it cannot guarantee whether they will be interpreted correctly or not. Clearly in your case, there is some incorrect interpretation going on, leading to your issue. The momentJS documentation gives you a clear list of supported date formats. See also the related fullCalendar v3 dates documentation.

Also, using both changeView and goToDate is redundant here. If you want to ensure that "month" view is chosen, then use changeView, and also pass a date. If you just want to change the date without caring about the view type, then use goToDate. For this example I'm going to assume you want changeView.

The fix is simple:

1) ensure all your dropdown options have a 2-digit value

2) set your hard-coded day string to a two-digit 01 as well

3) pass the full date string to the fullCalendar function.

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="01">Jan</option><option value="02">Feb</option><option value="03">Mrch</option><option value="04">Aprl</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">Aug</option><option value="09">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function(event) {
  var dateStr = y + '-' + this.value + '-01';
  console.log(dateStr);
  $('#calendar_full').fullCalendar('changeView', 'month', dateStr);
});

Working demo: http://jsfiddle.net/f362m5du/2/