在按钮单击时从 DTP 获取给定日期的完整日历中的事件。 jQuery/Javascript

Question

<p> From: </p>
<input type="date" id="from-date" class="form-control"/>
<p> To: </p>
<input type="date" id="to-date" class="form-control"/>

<p> From: </p>
<input type="date" id="from-date-copy" class="form-control"/>
<p> To: </p>
<input type="date" id="to-date-copy" class="form-control"/>
<input type="button" id="copy">

大家好，我有前 2 个日期时间选择器来设置进入 FullCalendar 的日期跨度，另外还有 2 个日期时间选择器来复制事件。

例如我有..

2016 年 1 月 13 日作为开始日期 和 2016 年 1 月 15 日作为结束日期 要复制的日期/事件

AND 1/20/2016 和 1/22/2016 复制到哪里

我将获取 2016 年 1 月 13 日和 2016 年 1 月 15 日的所有活动，并将这些活动转移到 2016 年 1 月 20 日和 2016 年 1 月 22 日。请帮忙。

第一张图片：

第二张图：

我使用了这个代码：

function bindCopyEventsButton() {
    $("#copy").click(function(event) {
        var eventsInDay;
        var eventsHolder = [];
        var startDate = $("#from-date").val();
        var endDate = new Date($("#to-date").val());

        var whereToCopyStartDate = new Date($('#from-date-copy').val());
        var whereToCopyEndDate = new Date($('#to-date-copy').val());
        var whereToCopyStart = whereToCopyStartDate.getDate();
        var whereToCopyEnd = whereToCopyEndDate.getDate();

        var e1start = new Date(startDate);
        var e1end = endDate == null ? e1start : endDate;

        for (var d = e1start; d <= e1end; d.setDate(d.getDate() + 1)) {

            //Get all events in the day
            eventsInDay = getEventsInDay(d);

            //For copy and paste. Will be used later. It's currently performing cut and paste
            //eventsHolder.push(eventsInDay);

            //Iterate all events in the day for updating
            for(var e = 0; e < eventsInDay.length; e++) {

                //Check if still applicable
                if(whereToCopyStart <= whereToCopyEnd){ 

                    //Get start hour of the event
                    var startTimeHour = eventsInDay[e].start._i.getHours();
                    console.log("startTimeHour : " + startTimeHour);

                    //Get end hour of the event
                    var endTimeHour = eventsInDay[e].end._i.getHours();
                    console.log("endTimeHour : " + endTimeHour);

                    //Get start date of the event
                    var x = eventsInDay[e].start._i.getDate();
                    console.log("Start date.getDate : " + x);
                    //Get end date of the event
                    var y = eventsInDay[e].end._i.getDate();
                    console.log("End date.getDate : " + y);


                    //Set start date of the event to the value of the from date
                    eventsInDay[e].start._i.setDate(whereToCopyStart); 

                    //If the start date and end date are the same use same end date. else start date + 1
                    if(x == y){ 
                        eventsInDay[e].end._i.setDate(whereToCopyStart);
                    } else {
                        eventsInDay[e].end._i.setDate(whereToCopyStart + 1);
                    }

                    console.log("Event GET START DATE : " + eventsInDay[e].start._i.getDate());
                    console.log("Event GET END DATE : " + eventsInDay[e].end._i.getDate());

                    //Set the start hours of event
                    eventsInDay[e].start._i.setHours(startTimeHour);

                    //Set the end hours of event
                    eventsInDay[e].end._i.setHours(endTimeHour);

                    //Update Calendar
                    $('#preferred-schedule').fullCalendar('updateEvent',  eventsInDay[e]);

                    //Add 1 to the  **where to copy** start date
                    whereToCopyStart = (whereToCopyStart + 1);
                }
            }
        }           
    });
}

function getEventsInDay(date) {
    return $('#preferred-schedule').fullCalendar('clientEvents', function(evt) {
        if (date >= evt.start && date <= evt.end) {
            return true;
        }
    });
}

我认为我得到了正确的信息。但又一次。 clientEvents 没有收到当天的事件。并且 updateEvent 不会反映在 FullCalendar 上。但是当我调试时，我认为我会根据日志获得正确的信息。

Answer 1

值比较并不完全正确（您需要进行一些日期操作），但我认为这正是您正在寻找的，使用 clientEvents 和 updateEvent 的 FullCalendar 方法：

//Find all the events that match the criteria
var events = $('#calendar').fullCalendar('clientEvents', function(evt){
    if(evt.start >= $('#from-date').val() && evt.end <= $('#to-date').val()){
        return true;
    }
    return false;
});

//Loop through the events and update them
for(var e = 0; e < events.length; e++){
    events[e].start = $('#from-date-copy');
    events[e].end = $('#to-date-copy');
    $('#calendar').fullCalendar('updateEvent', events[e]);
}

希望这能让您朝着正确的方向前进。

可能有用的提示

查看clientEvents 函数的工作原理以及它的格式 返回数据，你可以使用 fullCalendar 演示 (http://fullcalendar.io/js/fullcalendar-2.6.0/demos/agenda-views.html)。 打开 Chrome DevTools 并使用这个函数：var events = $('#calendar').fullCalendar('clientEvents', function(evt){return true;}); 然后打印出events。