Ad

Get Events In Full Calendar Given Dates From DTP On Button Click. Jquery/Javascript

<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">

Hi guys, I have this first 2 date time pickers to set the span of dates to get in the FullCalendar, and the other set of 2 date time pickers where to copy the events.

Example I have..

1/13/2016 as start date and 1/15/2016 as end date << DATE / EVENTS TO COPY

AND 1/20/2016 and 1/22/2016 <-- WHERE TO COPY

I will get all events from 1/13/2016 and 1/15/2016 and transfer the events to 1/20/2016 and 1/22/2016. Please help.

First picture: enter image description here

Second picture: enter image description here

I used this code :

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

I think I'm getting the right info. but again. The clientEvents doesn't get the events in the day. and the updateEvent doesn't reflect on the FullCalendar. But when I'm debugging I think I'm getting the right infos based on the logs.

Ad

Answer

The value comparisons are not completely correct (you will need to do some date manipulations), but I think this is kind of what you're looking for, using the 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]);
}

Hopefully this gives you a push in the right direction.

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.

Ad
source: stackoverflow.com
Ad