Блог

Я хочу, чтобы временные интервалы, занятые событиями, были недоступны для просмотра. Если я просто установлю для свойства event editable значение false , это не поможет: я все еще могу щелкнуть рядом с этим событием. Есть ли способ сделать весь временной интервал, занимаемый событием, недоступным для кликабельности? Может быть, каким-то образом увеличить его ширину, чтобы охватить весь день (на самом деле, это было бы желательным поведением)?

Этот код сработает, если день занят каким-либо событием. Таким образом, теоретически вы можете заблокировать щелчок, выполнив return false; в этой логике.

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

Код, который выполняет волшебство, нуждается в jquery. и вам нужен этот фрагмент кода.

   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 amp;amp; offset.left < mousex) amp;amp; ((offset.top > containerD.top) amp;amp; (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');
    }
},
  

Ну, вы можете растянуть события на весь день, используя следующий CSS:

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

Но я бы назвал это обходным путем.

FullCalendar предназначен для отображения нескольких событий в день. Следовательно, столбцы достаточно малы, чтобы отображать перекрывающиеся события.

Лучшим решением для системы бронирования был бы календарь, который не поддерживает перекрывающиеся события. К сожалению, я ничего не могу порекомендовать.