当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - how to get start and end date of external dragged and dropped event on fullcalendar

问题描述:

I have a quick question about fullcalendars drag and drop functionality.

Here is my JS Code

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

right: 'title'

},

editable: true,

droppable: true, // this allows things to be dropped onto the calendar !!!

drop: function(date, allDay) { // this function is called when something is dropped

// retrieve the dropped element's stored Event Object

var originalEventObject = $(this).data('eventObject');

console.log(originalEventObject.title);

// we need to copy it, so that multiple events don't have a reference to the same object

var copiedEventObject = $.extend({}, originalEventObject);

// assign it the date that was reported

// console.log(originalEventObject.start);

// console.log(originalEventObject.end);

copiedEventObject.start = date;

copiedEventObject.allDay = allDay;

// render the event on the calendar

// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)

$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

// is the "remove after drop" checkbox checked?

if ($('#drop-remove').is(':checked')) {

// if so, remove the element from the "Draggable Events" list

$(this).remove();

}

}

});

I would like to create a new variable called var dragged_event that looks something like below with each dragged and dropped event.

var dragged_event = "Name: " + originalEventObject.title + ", Start: " + ??? + ", End: " + ???

So the output look like something similar

console.log(dragged_event);

//Name: Birthday Start: Mar 06 2014 End: Mar 08 2014

Currently I'm unable to determined how to get the Start and End date of the dragged event. Could anyone lend me a hand in solving this please?

Thank you for reading.

网友答案:

There is on overload for

drop: function(date, allDay)

wich is

drop: function(start, end, allDay)

The start and end dates are stored into the 'start' and 'end' variables.

网友答案:

You can try something like

drop: function (date, allDay) {

          console.clear();
          console.log("dropped");
          console.log(date.format());


          var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
          var end = date.clone().add(defaultDuration); // on drop we only have date given to us
          console.log('end is ' + end.format());

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);



        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        copiedEventObject.backgroundColor = $(this).css("background-color");
        copiedEventObject.borderColor = $(this).css("border-color");

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove();
        }

      }

Gives this result

OR follow this example.

  • http://jsfiddle.net/dg9gp3e3/3/
分享给朋友:
您可能感兴趣的文章:
随机阅读: