Geek Answers Handbook

Any way to make a time interval not clickable in fullcalendar?

I want the time slots occupied by events to be unavailable. If I just set the event property editable to false , this will not help: I ​​can still click next to this event. Any way to make the entire time interval occupied by an event not clickable? Could it somehow stretch its width to cover the whole day (in fact, this would be desirable behavior)?

+4
source share
2 answers

This code lights up if the day is busy with an event. Therefore, theoretically, you can block a click by doing return false; in this logic.

http://jsfiddle.net/ppumkin/2QAY4/

The code that does the magic requires jquery. and you need this piece of code.

  dayClick: function(date, allDay, jsEvent, view) { if ($('div.fc-event').length > 0) { // var containerD = $(this).offset(); var containerH = $(this).height(); var mousex = jsEvent.pageX; $('div.fc-event').each(function(index) { var offset = $(this).offset(); if (((offset.left + $(this).outerWidth()) > mousex && offset.left < mousex) && ((offset.top > containerD.top) && (offset.top < (containerD.top + containerH)))) { alert($(this).html()); //This will only fire if an empty space is clicked //This will not fire if an event is clicked on a day } }); } else { //Put code here to do things if no events on a day alert('There are no events on this day'); } },
+1
source

Well, you can stretch events to the full height of the day using the following CSS:

 .fc-event-skin { height: 60px; }

But I would call it workarround.

fullCalendar is designed to display multiple events per day. Therefore, the bars are small enough to display overlapping events.

The best solution for a reservation system is a calendar that does not support overlapping events. Sorry, I can’t recommend it.

-1
source

More articles:


All Articles