当我们从月视图中选择多个日期时,Jquery fullcalendar会在agendaDay视图中显示结束日期

时间:2015-02-02 19:37:39

标签: php jquery fullcalendar

我在我的php网站上实现了jquery fullcalendar。我想为日期做多次选择。选择多个日期后自动跳转到agendaDay视图我可以选择不同的时间。请帮我解决这个问题。请有人告诉我是否有可能在月视图中选择多个日期,选择后会跳转到agendaDay视图。我需要在agendaday视图中结束日期,以便我可以将其添加到数据库中。假设我在月视图中选择日期从“03-02-2015”到“07-02-2015”。在选择它之后跳转到日视图,它只给出“03-02-2015”。没有显示“07-02-2015”。我需要在我的数据库中添加此结束日期,以便我可以定义我的日程安排从3 feb到7 feb。

这是我从月到日跳转的代码

select: function(start, end, jsEvent, view) {           
            if (view.name=='month') {
                var d = new Date(); 
                var month = new Array();
                month[0] = "01";
                month[1] = "02";
                month[2] = "03";
                month[3] = "04";
                month[4] = "05";
                month[5] = "06";
                month[6] = "07";
                month[7] = "08";
                month[8] = "09";
                month[9] = "10";
                month[10] = "11";
                month[11] = "12";
                var curr_date = d.getDate();
                var curr_month = month[d.getMonth()];
                var curr_year = d.getFullYear(); 
                if (curr_date < 10) {
                     curr_date = "0" + curr_date;
                }
                var curdate = curr_year + '-' + curr_month + '-' + curr_date;

                if(start.format() < curdate)
                {
                    alert('You cannot fix schedule for past date');
                }
                else
                {
                    $('#calendar').fullCalendar('changeView', 'agendaDay');
                    $('#calendar').fullCalendar('gotoDate', start, end);
                }
            } else { 

                var start = start.format(); 
                var end = end.format(); 

                fee_add("Today Schedule",start, end);
            }
        },

1 个答案:

答案 0 :(得分:0)

在agendaDay视图中显示多日事件的日期范围

使用eventRender回调,您可以完全自定义事件的显示方式。

eventRender: function (event, element, view ) {
    if(view.name == 'agendaDay'){ // If day view
        element.find('.fc-time').remove(); // Remove the original time element
        element.prepend( // Add start and end
            "<span>" + event.start.format('MMM D') + // Format however you want
            "-</span><span>" + event.end.format('MMM D') + "</span>");
    }
},

你的select功能不必要地复杂化了。利用fullcalendar中的所有日期都是momentjs个对象这一事实。

select: function (start, end, jsEvent, view) {
    if (view.name == 'month') {
        if (start.isBefore(moment())) { // moment() creates a date object with the current date
            alert('You cannot fix schedule for past date');
            return;
        } else {
            $('#calendar').fullCalendar('changeView', 'agendaDay');
            $('#calendar').fullCalendar('gotoDate', start, end);
        }
    }
    $('#calendar').fullCalendar('addEventSource', [{ // This might be different for you
                                                   // but you need to actually add the new event somehow
        title: "new event",
        start: start,
        end: end
    }]);
}

这是一个有效的 JSFiddle