Cannot read property 'start_date' during event drag

Hi I’ve been trying out your product and it works great! My problem is that whenever I create an event through double clicking (edit form turned off during create) and I try to drag the event it produces errors:

Uncaught TypeError: Cannot read property 'start_date' of undefined Uncaught TypeError: Cannot read property 'end_date' of undefined

These errors don’t seem to occur when I resize the event first before I try to drag them. Here are some of the settings I have:

scheduler.config.multi_day = true; scheduler.config.xml_date = "%Y-%m-%d %H:%i"; scheduler.config.icons_select=["icon_details","icon_delete"]; //scheduler.config.hour_size_px = 30; scheduler.config.edit_on_create = false; scheduler.config.server_utc = true; scheduler.config.scroll_hour = 8; scheduler.config.collision_limit = 1; scheduler.config.lightbox.sections=[ {name:"description", height:100, map_to:"description", type:"textarea" , focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ] scheduler.init('scheduler',new Date(),"week");

I also have the callbacks “onEventCreated”, “onBeforeEventChanged”, and “onEventSaved” set, all of which make use of the start_date and end_date fields of the event object.

Hello,
the problem must be caused by something in event handlers (onEventCreated,onBeforeEventChanged,onEventSaved) handlers, can you post code of those?

Hi,

I’ve got a lot of function calls inside each so I’ll post them as well.

[code] scheduler.attachEvent(“onEventCreated”, function(id){
//alert(“onEventCreated”);
updateEventDetails(scheduler.getEvent(id));
return true;
});

  scheduler.attachEvent("onBeforeEventChanged", function(event, native_event, new_flag, event_old){
    //alert("onBeforeEventChanged");
    updateEventDetails(event);
    addOrUpdateSlotsArray(event, event.id);
    updateSlotsElement();
    addOrUpdateDaysArray(event);
    updateDaysElement();
    return true;
  });

  scheduler.attachEvent("onEventSave",function(id, event, new_flag){
    //alert("onEventSave");
    updateEventDetails(event);
    addOrUpdateSlotsArray(event, id);
    updateSlotsElement();
    addOrUpdateDaysArray(event);
    updateDaysElement();
    return true;
  });[/code]

The functions which make use of event.start_date and event.end_date are these ones. Thanks for the quick reply! Hope this helps.

[code] function updateEventDetails(event) {
minutes_available = (event.end_date - event.start_date) / (1000 * 60);
slots_with_contingency = Math.floor((minutes_available) / (duration + contingency));
event.preferred_slots = slots_with_contingency;
if (slots_with_contingency.toString() == “1”) {
event.text = slots_with_contingency.toString() + " slot"
}
else {
event.text = slots_with_contingency.toString() + " slots"
}
event.description = getSlotsString(event, slots_with_contingency);
};

function getMinutesString(minutes) {
if (minutes < 10) {
minutesString = “0” + minutes;
}
else
minutesString = minutes;
return minutesString;
};

function getSlotsString(event, slots_with_contingency) {
slots_string = “”;
current_start_time = event.start_date;
current_end_time = event.start_date;
for ( var slot_number = 1; slot_number <= slots_with_contingency; slot_number++ ) {
current_start_time = new Date(event.start_date.getTime() + ((duration + contingency) * (slot_number - 1) * 60000));
current_end_time = new Date(event.start_date.getTime() + (((duration * slot_number) + (contingency * (slot_number -1))) * 60000));
if (slots_string.length != 0)
slots_string = slots_string + ", ";
slots_string = slots_string + current_start_time.getHours() + “:” + getMinutesString(current_start_time.getMinutes()) + " - " + current_end_time.getHours() + “:” + getMinutesString(current_end_time.getMinutes());
}
return slots_string;
};

function addOrUpdateDaysArray(event) {
date = $.datepicker.formatDate(‘dd/mm/yy’, event.start_date).toString();
if ( isInArray(days_array, date) == false) {
days_array.push(date);
}
date = $.datepicker.formatDate(‘dd/mm/yy’, event.end_date).toString();
if ( isInArray(days_array, date) == false) {
days_array.push(date);
}
};[/code]

It’s weird though since I placed the alert messages there to know if the error occurs once it’s inside on of the callbacks. But what happened is with the alerts popping up the error didn’t happen. I’ll do some more testing to give you more information on the issue.

I think I’ve figured out when it occurs. Upon creation of an event (double click with the edit form turned off) there is an instant where the event in the scheduler hasn’t been saved yet (the event text is in bold). Once it’s saved the text seems to transition into a normal font styling (not bold). When you start dragging the event immediately after it’s creation while the font is still in bold (before it is saved in the database), if it transitions to the normal font style during the motion of your drag the errors

Uncaught TypeError: Cannot read property 'start_date' of undefined Uncaught TypeError: Cannot read property 'end_date' of undefined

occur and the event box gets ‘left behind’ in the drag motion. You will not be able to drag and resize the event once the error occurs although you can delete it.

Maybe we can place a condition preventing it from being moved until after it is saved?

Just to add to the information:

The id of the event when the error occurs is the time in milliseconds(?) (e.g. the value of jQuery.now();). But once it’s saved in the database (where I am assigning it’s id) it returns my expected value. This supports my hypothesis on why/when the error occurs.

For other people who may encounter this problem here’s the fix I made:

scheduler.attachEvent("onEventIdChange", function(old_id,new_id){
  event = scheduler.getEvent(new_id);
  event.database_saved = "true";
});

scheduler.attachEvent("onBeforeDrag", function(event_id, mode, native_event_object){
  event = scheduler.getEvent(event_id)
  if (mode == "create") {
    return false;
  }
  else if ((mode == "move") && (typeof event.database_saved == "undefined")) {
     return false;
  }
  else {
    return true;
  }
});