单击按钮从 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 个日期时间选择器用于复制事件。

例子我有..

1/13/2016 作为开始日期和 2016 年 1 月 15 日作为结束日期 << DATE / EVENTS TO COPY

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

我将获取 1/13/2016 和 1/15/2016 的所有事件，并将事件转移到 1/20/2016 和 1/22/2016。请帮忙。

第一张图片：

第二张图片：

我使用了这个代码：

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 and updateEvent methods of 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]);
}

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

Maybe Helpful Hint

To see how the clientEvents function works and what format it returns data in, you can use the fullCalendar demo (http://fullcalendar.io/js/fullcalendar-2.6.0/demos/agenda-views.html). Open Chrome DevTools and use this function: var events = $('#calendar').fullCalendar('clientEvents', function(evt){return true;}); then print out events.

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

Get events in full calendar given dates from DTP on button click. Jquery/Javascript

javascript

jquery

calendar

date

fullcalendar