php - arshaw 全日历 : several issue

Question

您好，
我正在使用 arshaw fullcalendar属性(property)预订网站 v1.5.2(仅月 View )，它是一个很棒的插件，但我遇到了一些问题，我在 google code 上看到过类似的问题，但实际上并没有什么清楚的。 :(, 请帮我解决这些问题

这里是 working demo和 JS Code

到目前为止我做了什么

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

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

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

• 当管理员点击一个事件时，他可以查看任何事件的详细信息

• 管理员可以添加/编辑和删除日历上 future 日期或日期范围的新事件，这些事件将存储在new_charges.php

这是我的问题

a) 我希望一个或多个日期只允许一个事件。

b) 目前，如果用户点击有任何预订事件或特殊收费事件的日期，那么它会提醒该日期已预订,但是之后它会显示一个提示框来输入事件标题，

这是因为我同时使用了dayClick 和select 方法

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

c) 假设 1 月 15 日(由 fc-day17 div 包装)被预订了(我已经为事件应用了类 booked ) 现在当我转到下个月并单击 fc-day17 div 时，它还会提醒该日期已被预订，而没有预订 通过检查代码，我发现对于相同的 div，它仍然有类 booked 再过几个月

我认为 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) 如何隐藏与前几个月相关的所有事件？

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

意味着我们选择满足 filter 的当月天数 (:not(.fc-other-month))条件(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> 
            }
}