有什么办法让时间间隔在fullcalendar中无法点击?

时间:2011-05-20 11:04:33

标签: javascript jquery fullcalendar

我希望事件占用的时间间隔不可点击。如果我只是将事件属性editable设置为false,则无效:我仍然可以在该事件附近点击。任何方式使所有时间间隔,由事件占用不可点击? 也许以某种方式拉伸它的宽度以覆盖整天(实际上,这将是一个理想的行为)?

2 个答案:

答案 0 :(得分:1)

如果事件占用了一天,则会触发此代码。所以理论上你可以通过返回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 && 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 :(得分:-1)

好吧,您可以使用以下CSS将事件延伸到一天的全部高度:

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

但我会称之为一个解决方案。

fullCalendar旨在显示一天中的多个事件。因此,条形小到足以显示重叠事件。

预订系统的更好解决方案是不支持重叠事件的日历。不幸的是,我无法推荐。