CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-scheduler
guy49987
guy49987

Reputation: 104

FullCalendar - Make date not clickable

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');
                }
            });

Upvotes: 0

Views: 4923

Answers (2)

sandrina-p
sandrina-p

Reputation: 4160

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/

Upvotes: 2

Vishal Kumar Sahu
Vishal Kumar Sahu

Reputation: 1396

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...

Upvotes: 0

Related Questions