在点击按钮的DTP中获取完整日历中的事件。 jQuery的/ JavaScript的

时间:2016-01-13 02:08:22

标签: javascript jquery date calendar fullcalendar

<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日作为结束日期&lt;&lt; 日期/事件要复制

AND 1/20/2016和2016年1月22日&lt; - 要复制的地方

我将参加2016年1月13日和2016年1月15日的所有活动,并将活动转移到2016年1月20日和2016年1月22日。请帮忙。

第一张图片: enter image description here

第二张图片: enter image description here

我使用了这段代码:

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上。但是当我调试时,我认为我根据日志获得了正确的信息。

1 个答案:

答案 0 :(得分:3)

价值比较并不完全正确(您需要进行一些日期操作),但我认为这是您正在寻找的一种,使用clientEventsupdateEvent 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