Error Converting Single Day Events to Multi-Day Events

Scheduler Javascript
#1

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.

Example.png977×677 27.7 KB

#2

Figured it out. Turns out the an event is rendered as multi-day or single day based on:

evt._timed = scheduler.is_one_day_event(evt) && !evt.full_day;

If the event is “_timed” it shows as a single day and if it is not “_timed” it shows as a multi- or full-day render. My custom form wasn’t setting that variable. The “is_one_day_event” helper method I don’t believe is detailed in the documentation, but is of great help when doing custom forms.

#3

I have a custom lightbox which creates fullday events, and I set the hours to 00:00 to make my full-day events, but, after reading your posts, I think that I should additionally be setting

evt.full_day = true

to make sure that my events are being treated as full-day events.

#4

Problem with autosetting _timed flag for the custom form confirmed, next version will contain the fix ( it will set _timed flag automatically, after closing custom form with lightboxEnd command )