0

When a user clicks on a day slot in a month view in the Fullcalendar dayClick event I'd like to have an alert saying that this particular date is not available, for example, a Labor Day holiday.

I wrote this code, but it's not working, I need that somebody please help me to understand what is wrong here:

    dayClick: function (date, allDay, jsEvent, view) {   
    var myDate=new Date();
    myDate.setFullYear(2012,09,02);

    if (date == myDate){
        alert('Labor Day Weekend. No reservations available'); 
        $(this).css('background-color', 'red');
        return false;

Also, the 'red' slot works for this 'blocked' day, but then when I click on another day on a calendar, it also turns red. What is wrong here? Please help! Thank you very much for your help!

Gregg
  • 61
  • 1
  • 1
  • 9

1 Answers1

0

A couple of things:

  1. Month in date is 0-based. Which means myDate.setFullYear(2012,09,02) is setting the date to Oct 02 2012. I think you were trying to set it to Sep 02 - in which case you need to use myDate.setFullYear(2012,08,02).
  2. When you do new Date() it creates a date with the current date and time. And when you do date.setFullYear() it only overwrites the date - not the time. This might cause issues with comparisons. I have always used new Date(2012, 9, 2, 0, 0, 0, 0) to simply this.
  3. Finally, I think this is what is causing the issue on your end, the == operator doesn't work for dates. You will need to explicitly use a valueOf function to compare - like getTime(). Refer to this answer for more details.

I summed all these in a fiddle for you - http://jsfiddle.net/100thGear/sStbC/

Let me know if this helps!

Community
  • 1
  • 1
ganeshk
  • 5,583
  • 3
  • 27
  • 31
  • Yes! Thank you! It works just fine! Just one more issue about the 'red' slot. It works for the blocked day, and it continues working as 'red' for other days if you switch between months on a calendar... Is there any way to have it as 'red' only for a blocked day? Thank you again for your help! – Gregg Aug 27 '12 at 17:40
  • This is because of the way FullCalendar is rendered. Changing the view doesn't re-render the calendar slots unfortunately - it just realigns the current view to fit the new slots. I would advise using the `viewDisplay` callback instead of `dayClick` to change all your holidays for that month. This will allow you to render your holidays correctly when the month changes. And this way the users know that it is a holiday even before they click the day - which I feel is more optimal. – ganeshk Aug 27 '12 at 17:49
  • Thank you! I'll read the documentation about the viewDisplay callback. – Gregg Aug 27 '12 at 17:56