5

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.

ADyson
  • 57,178
  • 14
  • 51
  • 63
Lamoichenzio
  • 75
  • 1
  • 1
  • 7

1 Answers1

6

The documentation of the dayRender callback at https://fullcalendar.io/docs/v3/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/

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • 1
    Also, we can add that you can "generate" a real today date in moment by calling `moment` without any arguments. – ADreNaLiNe-DJ Sep 19 '17 at 09:01
  • I've already read that date is a momentJs object as say the doc, but in my IDE for the function day render it say: (property) dayRender: (date: Date, cell: HTMLTableDataCellElement). Actually if i use your code, date.isSame(today) not work because date isn't a momentJS object (at least according to IDE). – Lamoichenzio Sep 19 '17 at 09:22
  • Unfortunately your IDE is talking out of its backside :-). And the documentation for the product itself is going to be more accurate than what your IDE has tried to guess or infer. I also just noticed a couple of little mistakes in what I wrote, which I have now corrected in the above answer. You can also see a working example of my code here: http://jsfiddle.net/sbxpv25p/21/ – ADyson Sep 19 '17 at 09:32
  • 1
    I'm using VisualStudio Code, and now your last code something works (anyway the IDE return an error) and something not works. I don't now how i "refresh" VS C but i must fix it. Anyway the error are: "Property 'isSame' does not exist on type 'Date'" "Property 'css' does not exist on type 'HTMLTableDataCellElement'" but some time works and some time not works....lol In any case thanks man – Lamoichenzio Sep 19 '17 at 10:04
  • you can just ignore those errors though and run the code, surely? It's just an IDE warning. Or have you got it set somehow so you can't run it unless all the warnings/errors are gone? (Sorry I don't know VS Code enough to understand how it can be set up). And what does "something not works" mean exactly? You have a problem when you run it for real, or not? If so then please describe it. As you can see from the JSFiddle I posted, what I wrote should work. So if you have a problem, either you didn't copy it right, or something else is interfering. So we would need that detail in order to fix it. – ADyson Sep 19 '17 at 10:06
  • another error that i think is only for timezone is that the day on which the colour is changed is the day preceding that written in today – Lamoichenzio Sep 19 '17 at 10:08
  • sorry men, i want to say that sometimes works e sometimes not works. Anyway, i can ignore this error, but are very annoyance. – Lamoichenzio Sep 19 '17 at 10:11
  • You are right about the timezone I think, or at least something related: `var today = moment('2017-09-11T00:00Z');` will fix it. Have updated the answer. Of course I should also point out that "today" is not a very good name for the variable, since the date is hard-coded :-). If you actually want it to dynamically use today's date then simply `var today = moment();` would do it – ADyson Sep 19 '17 at 10:14
  • okay i found the cause of problem. i don't know why but although I have installed the 3.5.1 release of FullCalendar, the IDE (VS but also Atom) recognizes the old version of FullCalendar in which dayRender function accepts a Date object. For solving this issue i've created a moment variable in the function with date (the input of dayRender) as argument. Now works. i've still have problems with cell.css but now the comparison between the dates works. – Lamoichenzio Sep 19 '17 at 15:10
  • Perhaps it was reading some old version installed on your machine, or from some online source it was configured to. What's the problem with cell.css? In your original it was wrong but I corrected it in my answer (`this.cell.css` should be just `cell.css`) – ADyson Sep 19 '17 at 15:11
  • i used cell.css but i've this error: "[ts] Property 'css' does not exist on type 'HTMLTableDataCellElement'." In debug on browser after tell this error works and change the color of day, but if i want to debug on phone i've an error in compite time and so not works. i've update also typescript but nothing – Lamoichenzio Sep 19 '17 at 15:17
  • Strange, in the JSFiddle the error does not occur at all. And `cell` is a jQuery object not a HTML element. I am using JS not typescript, so maybe that comes into it. Possibly typescript is not doing something right in the compile, it's hard to know. Phone browsers are not all the same, so testing on different browsers O/Ss might help. But most will run jQuery no problem. Are these IDE errors again, or actual runtime errors in the browser consoles? – ADyson Sep 19 '17 at 15:31
  • I have an error in both IDE and in runtime on the browser, but after close error in browser works. – Lamoichenzio Sep 19 '17 at 15:34
  • I can't really help you so much without knowing a lot more detail. My version works, so it's hard to know what is wrong. – ADyson Sep 19 '17 at 15:37
  • The error is caused by an error similar to the previous one. The function is dayRender: function(date, cell), that in the last release accepts date(a moment object) and cell(a jquery object). In my project i don't now why but cell is an HtmlTableDateCellElement, so the property .css of jquery object not work. So in dayRender function, i defined a new variable "jcell = $(cell) that created a new jquery object jcell from argument cell. Now works everythings without problems, but i don't understand why i have this issue with this library. Thanks again for spending your time. – Lamoichenzio Sep 19 '17 at 15:45
  • No problem. But that's an IDE error again because of the IDE trying to infer types from an old version of the library. That shouldn't cause any kind of error within the browser itself, so long as the browser is referencing the latest version of fullCalendar. I can't really see why the browser is getting errors too, but there we are. – ADyson Sep 19 '17 at 15:46