As far as I’m aware, I’m taking all the steps listed in the documentation for editing an event with a Custom Form. Here is the code I have for showing the custom form and saving the results of it back into the event:
// Attach custom form
scheduler.showLightbox = function (id)
{
ShowCustomForm(id, scheduler.getEvent(id));
}
// Displays the custom form for the event type
function ShowCustomForm(id, evt)
{
// Configure the custom form
$('.evt-dlg-collapsable').show();
// Time Period Attributes
var time = { hour: evt.start_date.getHours(), minute: evt.start_date.getMinutes() };
$(".evt-dlg-time-start").val($.datepicker.formatDate('yy-mm-dd', evt.start_date) + ' ' + $.datepicker.formatTime('HH:mm', time));
time = { hour: evt.end_date.getHours(), minute: evt.end_date.getMinutes() };
$(".evt-dlg-time-end").val($.datepicker.formatDate('yy-mm-dd', evt.end_date) + ' ' + $.datepicker.formatTime('HH:mm', time));
// Details Attributes
$(".evt-dlg-details-name").val(evt.text);
$(".evt-dlg-details-location").val(evt.details_location);
$(".evt-dlg-details-address").val(evt.details_address);
$(".evt-dlg-details-room").val(evt.details_room);
$(".evt-dlg-details-city").val(evt.details_city);
$(".evt-dlg-details-state").val(evt.details_state);
$(".evt-dlg-details-zip").val(evt.details_zip);
$(".evt-dlg-details-area").val(evt.details_area);
$(".evt-dlg-details-phone1").val(evt.details_phone1);
$(".evt-dlg-details-phone2").val(evt.details_phone2);
$(".evt-dlg-details-url").val(evt.details_url);
$(".evt-dlg-details-manager").val(evt.details_manager);
$(".evt-dlg-details-email").val(evt.details_email);
$(".evt-dlg-details-shared :input").prop("checked", !!evt.details_shared);
$(".evt-dlg-details-multi :input").prop("checked", !!evt.details_multi);
// Assets Attributes
$(".evt-dlg-assets-title").val(evt.assets_title);
$(".evt-dlg-assets-code-due").val(evt.assets_code_due);
$(".evt-dlg-assets-due").val(evt.assets_due);
// Display the light box
scheduler.startLightbox(id, dlgEvt.DomElement);
dlgEvt.show();
}
// Saves the results of a custom form
function SaveForm()
{
// Get the event and dialog
var evt = scheduler.getEvent(scheduler.getState().lightbox_id);
// Time Period Attributes
evt.start_date = new Date($(".evt-dlg-time-start").val());
evt.end_date = new Date($(".evt-dlg-time-end").val());
// Details Attributes
evt.text = $(".evt-dlg-details-name").val();
evt.details_location = $(".evt-dlg-details-location").val();
evt.details_address = $(".evt-dlg-details-address").val();
evt.details_room = $(".evt-dlg-details-room").val();
evt.details_city = $(".evt-dlg-details-city").val();
evt.details_state = $(".evt-dlg-details-state").val();
evt.details_zip = $(".evt-dlg-details-zip").val();
evt.details_area = $(".evt-dlg-details-area").val();
evt.details_phone1 = $(".evt-dlg-details-phone1").val();
evt.details_phone2 = $(".evt-dlg-details-phone2").val();
evt.details_url = $(".evt-dlg-details-url").val();
evt.details_manager = $(".evt-dlg-details-manager").val();
evt.details_email = $(".evt-dlg-details-email").val();
evt.details_shared = $(".evt-dlg-details-shared :input").prop("checked");
evt.details_multi = $(".evt-dlg-details-multi :input").prop("checked");
// Assets Attributes
evt.assets_title = $(".evt-dlg-assets-title").val();
evt.assets_code_due = $(".evt-dlg-assets-code-due").val();
evt.assets_due = $(".evt-dlg-assets-due").val();
// Save
scheduler.endLightbox(true, dlgEvt.DomElement);
}
The custom form is essentially a large dialog with a number of fields which are just saved directly to the event fields and converted to JSON. All of the custom form’s functionality works perfectly, except that when I convert an event that is contained within a single day to a multi-day event or create a new event that is multi-day I get the visual glitch displayed in the attached image.
I believe this to be a simple rendering issue with the event, but am unable to find the root cause as to why multi-day events render incorrectly when they are derived from my custom form.