arshaw fullcalendar:几个问题

Question

您好,
我正在使用arshaw fullcalendarv1.5.2(仅限月视图)进行物业预订网站,它是一个很棒的插件,但我遇到了一些问题,我已经看到了类似的问题google code,但真的没有什么明确的.:(,请帮我解决这些问题

这是working demo和JS Code

到目前为止我做了什么

• 从下面的两个不同的json文件中获取事件数据

  • json_events.php:这包含由用户从前端预订的预订详细信息; 管理员无法更改此类事件的任何详细信息.

  • new_charges.php:这包含特殊费用事件详细信息,管理员添加/更新删除任何未来日期的新费用.

• 管理员可以在点击某个活动时查看任何活动的详细信息

• 管理员可以在日历上添加/编辑和删除新事件,以便将来存储日期或日期范围new_charges.php

这是我的问题

一个) I want that only one event is allowed for a date(s).

b)目前,如果用户点击任何预订活动或特殊费用活动的那一天,那么它会提醒当天预订, 但之后会显示一个输入活动标题的提示框,

这是发生,因为我都用了dayClick和select方法

How do i stops further propagation if a day already have an event ?

c)假设1月15日(由fc-day17div 包裹)被预订(我已经申请了一个booked活动课程),现在当我去下个月并点击fc-day17div时,它还会提醒当天预订,而没有通过检查预订代码我发现它仍然有booked相同div的另一个月的类

我觉得eventRender方法中有些东西丢失了？

does `eventRender()`  method is called only once when initialize the calendar 
or each time when we go `prev` or `next` month?

d)我在渲染事件期间通过json文件更改了特殊费用事件的背景颜色,但是当我删除这些事件时,它不会改变正常背景并且仍然说那天被预订了.

how do I make default background of a date if I delete the events of that day??

E) how to hide all events related to previous months?

Answer 1

// a) and b)
// We dont need dayClick event, only select
// I think you created calender something like this 
// var calendar = $('#calendar').fullCalendar({ ... })

select: function(start, end, allDay) {
    //debugger;
    var events = calendar.fullCalendar( 'clientEvents' );
    for (var i = 0; events.length > i ; i++){
        //If we have 1 day event
        if((events[i].end == null && (events[i].start.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime())) ||
        // If we have many days event 
        (events[i].end != null && ((events[i].start.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime()) || 
            (events[i].end.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime()) || 
            (events[i].start.getTime() <= start.getTime() && events[i].end.getTime() >= end.getTime())) 
        )){
            alert("Realy busy!!!");
            return;
        }
    }
    // If this time is not busy, for example, we promt to enter Event Title
    var title = prompt('Event Title:');
    if (title) {
       //............Adding event into calendar
    }
    calendar.fullCalendar('unselect');
},
// c) and d)
// This is invoked when we navigate throw the month callender 
eventAfterRender: function(event, element, view ){
    $(".booked").removeClass(".booked"); // Remove all booked class from element
    var elements = $(".fc-widget-content:not(.fc-other-month)").filter(function(){
        //We try to find day number witch corresponds to the event date
        return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
            || (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
            &&  $(this).find(".fc-day-number").text() <= event.end.getDate())
    });
    elements.addClass("booked");

    // e)
    // Hide all events related to previous and next months
    // If we event ends in previous month or starts in next we dont show it!
    if(
        (event.end == null && (view.start.getMonth() != event.start.getMonth())) //If we have 1 day event
        || (event.end != null && (view.start.getMonth() > event.end.getMonth() // If we have many day event
        || view.start.getMonth() < event.start.getMonth())) 

    ){
        $(element).hide();
    }
}

编辑这个结构

var elements = $(".fc-widget-content:not(.fc-other-month)").filter(function(){
    //We try to find day number witch corresponds to the event date
    return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
        || (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
        &&  $(this).find(".fc-day-number").text() <= event.end.getDate())
});

意味着我们选择当月 ( :not(.fc-other-month)) 中满足filter条件 ( return true) 的天数：该月的天数等于事件发生的天数

关于您的代码，正如我所说，您必须删除 dayClick 事件，并且您的选择事件是：

select: function (startDate, endDate, allDay, jsEvent) {
    // This is my addition //
        var events = calendar.fullCalendar( 'clientEvents' );
        for (var i = 0; events.length > i ; i++){
            //If we have 1 day event
            if((events[i].endDate == null && (events[i].start.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime())) ||
            // If we have many days event 
            (events[i].endDate != null && ((events[i].start.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime()) || 
                (events[i].end.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime()) || 
                (events[i].start.getTime() <= startDate.getTime() && events[i].end.getTime() >= endDate.getTime())) 
            )){
                alert('Sorry this date is already taken');
                return;
            }
        }

        // /This is my addition //      
    console.dir(jsEvent);
    if (liveDate > startDate) {
        alert('This date has been passed');
        return false;
    } else {
        var title = prompt('New Charges:');
        if (title) {
            calendar.fullCalendar('renderEvent', {
                        title: title,
                        start: startDate,
                        end: endDate,
                        allDay: allDay
                    }, false // make the event "unstick"
                    );
                    var startDateString = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd');
                    var endDateString = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd');
                    $.ajax({
                        type: 'POST',
                        url: './new_event.php?action=add',
                        data: {
                            startDate: startDateString,
                            endDate: endDateString,
                            eventTitle: title,
                            propID: propID
                        },
                        dateType: 'json',
                        success: function (resp) {
                            calendar.fullCalendar('refetchEvents');
                        }
                    });
                } // end of inner if
            } // end of else
            calendar.fullCalendar('unselect');
},

关于viewDisplay。 每次当我们转到上个月或下个月时它都会被触发，并且在 后触发eventAfterRender。如果我们使用eventAfterRender并转到没有事件的月份，我们就没有效果。空闲单元仍然被预订。我提供当月事件分析viewDisplay：

function viewCalDisplay(view) {

//...................
// Your code

            $(".booked").removeClass("booked"); // Remove all booked class from element
            var events = view.calendar.clientEvents(function(event){  
                //we need only events of current month
                return event.start.getMonth() == view.start.getMonth(); 

            } );

            for(i = 0; events.length > i; i++){
                var event = events[i];
                // We need only days of current month. We select <td> of calender table (by class .ui-widget-content)
                var elements = $(".ui-widget-content:not(.fc-other-month)").filter(function(){
                    //We try to find day number witch corresponds to the event date
                    return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
                        || (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
                        &&  $(this).find(".fc-day-number").text() <= event.end.getDate())
                });

                elements.addClass("booked"); //Only for this <td> 
            }
}