0
votes

I can't believe nobody asked this. This is driving me insane. Im using FullCalendar to let the user drop external events to the calendar. I´m folliwing the well known approach:

  $('#external-events div.external-event').each(function () {

                var eventObject = {
                    type: 2,
                    id: $(this).attr("data-id"),
                    title: $(this).attr("data-name"),
                    duration: $(this).attr("data-duration"),
                    guid: $(this).attr("data-guid"),
                    color: $(this).attr("data-color")
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({ zIndex: 999, revert: true, revertDuration: 0 });
            });

My calendar is configured like this (drop event):

  drop: function(date) {

   // 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.format();

  // render the event on the calendar
  //$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

   $.ajax({
       async: false,
       url: '@Url.Action("AddWorkoutToPlan", "Planning")',
       data: { 'planId': planId, 'workoutId': copiedEventObject.id, 'date': date.format() },
       success: function(data) {
          $('#calendar').fullCalendar('refetchEvents'); 
         }
          });
                },

As you can see, I don't render the event, I just make an ajax call and on success I refetch the events so I can get the DB id, in case the user wants to remove it.

This is how I get my events:

  events: {
                    url: '@Url.Action("GetPlannedActivities", "Planning")',
                    data: function() { return { planId: '@Model.Id' } },
                    beforeSend: function(xhr, opts) {
                        if (!$("#selectedPlan").val()) {
                            xhr.abort();
                            unblockContainer($("#calendar"));
                        }
                    },
                    success: function(data) {}
                },

This is working nice, but if the user moves from the current month, then the external events wont drag nor the drop callback is triggered... I don't know what is going wrong...

Any ideas?

1
It works on this version of Full calendar Calendar DemoDalorzo
Dalorzo, where is that guy code so I can compare? ;)MRFerocius

1 Answers

0
votes

Finally I rolled back the FullCalendar version from 2.1.0_BETA1 / BETA2 to v2.0.2 and now is working as expected.

So I guess this is a bug in the new version that uses DIVS instead of TABLES.