0

I'm working with fullcalendar and am wondering if there is a way to make certain dates unclickable. The function I have so far compares all "day squares" dates on the calendar to a maximum date I have defined earlier. If the date goes beyond the max date I add a class to grey them out. They are still clickable. Hiding them screws with the layout of the calendar and looks awful.

            // Grey out the dates that go beyond the maximum availability date 
            var maxParsed = Date.parse(maxDate.toString());
            $("td[data-date]").each(function(){
                var date = $(this).data('date');
                var dateParsed = Date.parse(date);
                if(!isNaN(dateParsed) && dateParsed > maxParsed){
                    $(this).addClass('fc-other-month');
                }
            });
guy49987
  • 94
  • 1
  • 10

2 Answers2

2

With css only you can handle that, I think. On your css do this:

.fc-other-month {
  pointer-events: none;
  cursor: default;
}

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

You can know more about it here: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

If it doesn't work, maybe a prevent default can do the trick.

$('.fc-other-month').on('click', function(e) {
   e.preventDefault();
   $(this).css({'pointer-events' : 'none'});
});

=== edit ====

I looked into documentation, they have eventClick. You can inside that function check if it's a "good date" or not and then return false if you don't want to be clickable.

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {

        if ( 1==1 || "this is a day without click feature") { //dummy code
           return false; //prevent clickable function
        }

    }
});

https://fullcalendar.io/docs/mouse/eventClick/

sandrina-p
  • 3,794
  • 8
  • 32
  • 60
  • These did not work. I even tried removing all the classes from the day square (as far as I can tell they just controlled color/position etc.) and calling .unbind() to unbind all events. Still clickable.. – guy49987 Nov 18 '16 at 19:48
  • Are you sure? I added directly on the demo (devtools) `pointer-events: none` and the numbers stopped being clickable. I also forced with js to add that css. try it again – sandrina-p Nov 18 '16 at 19:55
0

Take help of jQuery and return false on click event (I guess you assigned it different class) on the date you do not wish to be clicked. So they do not act on click...

Vishal Kumar Sahu
  • 1,232
  • 3
  • 15
  • 27