date.getDate() is not a function. (In 'date.getDate()', 'date.getDate()' is undefined) FullCalendar in Ionic 3

Question

I'm coding on a Ionic 3 project where i use a FullCalendar plugin for display a calendar ui. I've a problem with this code in the module of page when i try to change background of a single day on calendar. I've used dayRender function of FullCalendar.

$('#calendar').fullCalendar({

            dayRender: function (date, cell) {
              var today = new Date('2017-09-11T00:40Z')
              if (date.getDate() == today.getDate()) {
                  this.cell.css("background-color", "red");
              }
            },
});

I've this Runtime error in output:

date.getDate() is not a function. (In 'date.getDate()', 'date.getDate()' is undefined) FullCalendar in Ionic 3

so i don't understand why, because date is a Date object that was already defined in FullCalendar library.

Any Solutions?

ps: Sorry for my bad english.

Answer 1

The documentation of the dayRender callback at https://fullcalendar.io/docs/display/dayRender/ says

date is the Moment for the given day.

So date in your code is a momentJS object, not a Date object. That's why the getDate method doesn't exist on it. You'd be better to create today as a momentJS object too, and then you can compare them directly:

$('#calendar').fullCalendar({
  dayRender: function (date, cell) {
    var today = moment('2017-09-11T00:00Z');
    if (date.isSame(today, "day")) {
      cell.css("background-color", "red");
    }
  },
  //...
});

For more detailed info on the code I've written, see http://momentjs.com/docs/#/parsing/string/ for details of dates that the moment constructor can parse, and http://momentjs.com/docs/#/query/is-same/ for details of the date comparison method.

You can see a working example of the above here: http://jsfiddle.net/sbxpv25p/22/