Our pure JavaScript Scheduler component


Post by bprescott_msd »

Mats:

Somehow I was able to get past the error from above, not sure exactly how. But now I am running into a different error in Javascript. This one occurs when I try to drag an event on the schedule to a different time. The error fires once the event moves a little bit, and continues to fire until I release the mouse button to end the event drag.

Here is the stack trace from the error:
scheduler.module.js:91186 Uncaught TypeError: this.currentOrientation.getStartEndDatesFromRectangle is not a function
    at Scheduler.getStartEndDatesFromRectangle (scheduler.module.js:91186)
    at EventDrag.resolveStartEndDates (scheduler.module.js:80417)
    at EventDrag.updateDragContext (scheduler.module.js:79298)
    at EventDrag.onDrag (scheduler.module.js:79004)
    at DragHelper.trigger (scheduler.module.js:5071)
    at DragHelper.update (scheduler.module.js:41905)
    at DragHelper.internalMove (scheduler.module.js:41844)
    at DragHelper.onMouseMove (scheduler.module.js:41860)
    at HTMLDocument.handler (scheduler.module.js:11579)
getStartEndDatesFromRectangle @ scheduler.module.js:91186
resolveStartEndDates @ scheduler.module.js:80417
updateDragContext @ scheduler.module.js:79298
onDrag @ scheduler.module.js:79004
trigger @ scheduler.module.js:5071
update @ scheduler.module.js:41905
internalMove @ scheduler.module.js:41844
onMouseMove @ scheduler.module.js:41860
handler @ scheduler.module.js:11579
And here is the code that creates our scheduler object.
    scheduler = new Scheduler({
        appendTo: 'schedulerContainer',
        minHeight: '20em',
        mode: 'vertical',
        rowHeight: 45,
        barMargin: 5,
        eventStyle: 'plain',
        viewPreset: 'oneday',
        //viewPreset: 'hourAndDay',
        useInitialAnimation: 'slide-from-left',
        timeRanges: true,
        enableDeleteKey: false,
        showAddEventInContextMenu: false,
        showRemoveEventInContextMenu: false,
        showRemoveRowInContextMenu: false,
        zoomOnMouseWheel: false,
        zoomOnTimeAxisDoubleClick: false,

        startDate: scheduleStartDate,
        endDate: scheduleEndDate,

        features: {
            filterBar: true,
            cellEdit: false,
            eventEdit: false,
            stripe: true,
            sort: 'name',
            group: scheduleGrouping,
            
            timeRanges: {
                enableResizing: true,
                showCurrentTimeLine: true,
                currentDateFormat: 'h:mm A'
            },
            resourceTimeRanges: true,
            
            eventTooltip: {
                hoverDelay: 1000,

                header: {
                    titleAlign: 'start'
                },

                template: data =>
                    data.eventRecord.id.toString().substring(0, 2) === 'TC' ?
                        `
                <span><span style="font-weight: bolder;">Employee:</span> ${data.eventRecord.resource.name}</span> 
                ` +
                        (
                            (DateHelper.format(data.eventRecord.startDate, 'LT') === DateHelper.format(data.eventRecord.endDate, 'LT')) ?
                                `
                <span><span style="font-weight: bolder;">Time:</span> ${DateHelper.format(data.eventRecord.startDate, 'LT')}</span>
                `
                                :
                                `
                <span><span style="font-weight: bolder;">Start Time:</span> ${DateHelper.format(data.eventRecord.startDate, 'LT')}</span>
                <span><span style="font-weight: bolder;">End Time:</span> ${DateHelper.format(data.eventRecord.endDate, 'LT')}</span>               
                `
                        )
                        :
                        `
                <span><span style="font-weight: bolder;">Assigned to:</span> ${data.eventRecord.resource.name}</span>
                <br />
                <span><span style="font-weight: bolder;">Date:</span> ${DateHelper.format(data.eventRecord.startDate, 'dddd MM/DD/YYYY')}</span>
                <span><span style="font-weight: bolder;">Time:</span> ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}</span>
                <br />
                <span>${data.eventRecord.customer}</span>
                <span>${data.eventRecord.address}</span> 
                <span>${data.eventRecord.city}, ${data.eventRecord.state} ${data.eventRecord.zipcode}</span> 
                <br />
                <span>${data.eventRecord.contact}</span> 
                <br />
                <span><span style="font-weight: bolder;">Status:</span> ${data.eventRecord.status}</span> 
                <span><span style="font-weight: bolder;">Type:</span> ${data.eventRecord.type}</span> 
                <span><span style="font-weight: bolder;">Pre-Notification:</span> ${data.eventRecord.prenotification}</span> 
                <span><span style="font-weight: bolder;">Priority:</span> ${data.eventRecord.priority}</span> 
                <span><span style="font-weight: bolder;">Window:</span> ${data.eventRecord.window}</span> 
                <span><span style="font-weight: bolder;">Route:</span> ${data.eventRecord.route} ${data.eventRecord.day} ${data.eventRecord.stop}</span>
                <br />
                <span>${data.eventRecord.notes}</span>
                `
            },

            //summary: {
            //    renderer({ element, events }) {
            //        const value = events.length / 10;
            //        element.style.height = `${100 * value}%`;

            //        if (value > 0.5) {
            //            element.classList.add('b-summarybar-label-inside');
            //        }
            //        else {
            //            element.classList.remove('b-summarybar-label-inside');
            //        }

            //        return `<label>${events.length || ''}</label>`;
            //    }
            //},

            eventContextMenu: {
                // Add extra items shown for each event
                items: {
                    deleteEvent: false,
                    dispatchNowItem: {
                        text: 'Dispatch NOW',
                        icon: 'mat-icon material-icons b-fa-textsms',
                        onItem({ eventRecord }) {

                            let strMessage = eventRecord.data.customer + '\r\n' + eventRecord.data.contact + '\r\n' + eventRecord.data.address + '\r\n' + eventRecord.data.city + ' ' + eventRecord.data.state + ' ' + eventRecord.data.zipcode;
                            let strURL = window.location.origin + '/pages/Appointments.aspx?_commandName=Select&_commandArgument=editForm1&AppointmentID=' + eventRecord.id + '&_controller=Appointments';

                            let mobileNumber = employeeArray.filter(x => x.id === eventRecord.data.resourceId)[0].mobile;
                            $app.touch.show({
                                controller: 'SendSMS', startCommand: 'New', startArgument: 'createForm1',
                                defaultValues: [
                                    { name: 'EmployeeID', value: eventRecord.data.resourceId },
                                    { name: 'MobileNumber', value: mobileNumber },
                                    { name: 'Message', value: strMessage + '\r\n\r\nTap the link below to open this appointment:' },
                                    { name: 'AppointmentURL', value: strURL },
                                ],
                                done: function (dataView) {

                                }
                            });
                        }
                    },
                    openCustomerItem: {
                        text: 'Open Customer',
                        icon: 'mat-icon material-icons b-fa-city',
                        onItem({ eventRecord }) {

                            $app.touch.show({
                                controller: 'Customers',
                                cache: false,
                                view: 'editForm1',
                                filter: [{ name: 'CustomerID', value: eventRecord.data.customerId }],
                                done: function (dataView) {
                                    FillAppointments();
                                    FillWaitingListTags();
                                }
                            });
                        }
                    },
                    openAppointmentItem: {
                        text: 'Open Appointment',
                        icon: 'mat-icon material-icons b-fa-user-clock',
                        onItem({ eventRecord }) {
                            $app.touch.show({
                                controller: 'Appointments',
                                cache: false,
                                view: 'editForm1',
                                filter: [{ name: 'AppointmentID', value: eventRecord.data.id }],
                                done: function (dataView) {
                                    FillAppointments();
                                    FillWaitingListTags();
                                }
                            });
                        }
                    },
                    navigateInGoogleMapsItem: {
                        text: 'Navigate in Google Maps',
                        icon: 'mat-icon material-icons b-fa-map-marker',
                        onItem({ eventRecord }) {

                            window.open('https://www.google.com/maps/place/' + eventRecord.data.address + ' ' + eventRecord.data.city + ' ' + eventRecord.data.state + ' ' + eventRecord.data.zipcode);
                        }
                    },
                    moveMenuItem: {
                        text: 'Move',
                        icon: 'mat-icon material-icons b-fa-plane',
                        menu: [
                            {
                                text: 'Today',
                                icon: 'mat-icon material-icons b-fa-calendar',
                                onItem({ eventRecord }) {
                                    var daysDiff = DateHelper.diff(eventRecord.startDate, today, 'day', false);
                                    eventRecord.startDate = DateHelper.add(eventRecord.startDate, daysDiff, 'day');

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Tomorrow',
                                icon: 'mat-icon material-icons b-fa-calendar',
                                cls: 'b-separator',
                                onItem({ eventRecord }) {
                                    var daysDiff = DateHelper.diff(eventRecord.startDate, today, 'day', false);
                                    eventRecord.startDate = DateHelper.add(eventRecord.startDate, daysDiff + 1, 'day');

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Back 1 hour',
                                icon: 'mat-icon material-icons b-fa-arrow-left',
                                cls: 'b-separator',
                                onItem({ eventRecord }) {
                                    eventRecord.startDate = DateHelper.add(eventRecord.startDate, -1, 'hour');

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Ahead 1 hour',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                onItem({ eventRecord }) {
                                    eventRecord.startDate = DateHelper.add(eventRecord.startDate, 1, 'hour');

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Next Monday',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                cls: 'b-separator',
                                onItem({ eventRecord }) {
                                    let oldStartDate = eventRecord.startDate;
                                    let oldHours = oldStartDate.getHours();
                                    let oldMinutes = oldStartDate.getMinutes();
                                    let d = new Date();
                                    let n = d.getDay();
                                    let newStartDate;
                                    if (n < 1) {
                                        newStartDate = DateHelper.add(d, (1 - n), 'day');
                                    } else {
                                        newStartDate = DateHelper.add(d, (8 - n), 'day');
                                    }

                                    newStartDate.setHours(oldHours);
                                    newStartDate.setMinutes(oldMinutes);

                                    eventRecord.startDate = newStartDate;

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Next Tuesday',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                onItem({ eventRecord }) {
                                    let oldStartDate = eventRecord.startDate;
                                    let oldHours = oldStartDate.getHours();
                                    let oldMinutes = oldStartDate.getMinutes();
                                    let d = new Date();
                                    let n = d.getDay();
                                    let newStartDate;
                                    if (n < 2) {
                                        newStartDate = DateHelper.add(d, (2 - n), 'day');
                                    } else {
                                        newStartDate = DateHelper.add(d, (9 - n), 'day');
                                    }

                                    newStartDate.setHours(oldHours);
                                    newStartDate.setMinutes(oldMinutes);

                                    eventRecord.startDate = newStartDate;

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Next Wednesday',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                onItem({ eventRecord }) {
                                    let oldStartDate = eventRecord.startDate;
                                    let oldHours = oldStartDate.getHours();
                                    let oldMinutes = oldStartDate.getMinutes();
                                    let d = new Date();
                                    let n = d.getDay();
                                    let newStartDate;
                                    if (n < 3) {
                                        newStartDate = DateHelper.add(d, (3 - n), 'day');
                                    } else {
                                        newStartDate = DateHelper.add(d, (10 - n), 'day');
                                    }

                                    newStartDate.setHours(oldHours);
                                    newStartDate.setMinutes(oldMinutes);

                                    eventRecord.startDate = newStartDate;

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Next Thursday',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                onItem({ eventRecord }) {
                                    let oldStartDate = eventRecord.startDate;
                                    let oldHours = oldStartDate.getHours();
                                    let oldMinutes = oldStartDate.getMinutes();
                                    let d = new Date();
                                    let n = d.getDay();
                                    let newStartDate;
                                    if (n < 4) {
                                        newStartDate = DateHelper.add(d, (4 - n), 'day');
                                    } else {
                                        newStartDate = DateHelper.add(d, (11 - n), 'day');
                                    }

                                    newStartDate.setHours(oldHours);
                                    newStartDate.setMinutes(oldMinutes);

                                    eventRecord.startDate = newStartDate;

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            },
                            {
                                text: 'Next Friday',
                                icon: 'mat-icon material-icons b-fa-arrow-right',
                                onItem({ eventRecord }) {
                                    let oldStartDate = eventRecord.startDate;
                                    let oldHours = oldStartDate.getHours();
                                    let oldMinutes = oldStartDate.getMinutes();
                                    let d = new Date();
                                    let n = d.getDay();
                                    let newStartDate;
                                    if (n < 5) {
                                        newStartDate = DateHelper.add(d, (5 - n), 'day');
                                    } else {
                                        newStartDate = DateHelper.add(d, (12 - n), 'day');
                                    }

                                    newStartDate.setHours(oldHours);
                                    newStartDate.setMinutes(oldMinutes);

                                    eventRecord.startDate = newStartDate;

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'StartDateTime', newValue: eventRecord.startDate },
                                            { name: 'EndDateTime', newValue: eventRecord.endDate },
                                        ]
                                    });
                                }
                            }

                        ]
                    },
                    statusMenuItem: {
                        text: 'Status',
                        icon: 'mat-icon material-icons b-fa-user-edit',
                        menu: [
                            {
                                text: 'Waiting List',
                                icon: 'mat-icon material-icons mat-icon-move-to-inbox',
                                onItem({ eventRecord }) {

                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.data.id },
                                            { name: 'StartDateTime', newValue: null, value: new Date() },
                                            { name: 'EndDateTime', newValue: null, value: new Date() },
                                            { name: 'EmployeeID', newValue: null, value: -1 },
                                            { name: 'AppointmentStatusID', newValue: 1 },
                                        ],
                                        done: function (result) {
                                            FillWaitingList();
                                        }
                                    });
                                    eventRecord.remove();
                                }
                            },
                            {
                                text: 'Scheduled',
                                icon: 'mat-icon material-icons mat-icon-alarm-on',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 2 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'In-Route',
                                icon: 'mat-icon material-icons mat-icon-local-shipping',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 3 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Arrived',
                                icon: 'mat-icon material-icons mat-icon-person-pin-circle',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 4 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Working',
                                icon: 'mat-icon material-icons mat-icon-work',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 5 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Completed',
                                icon: 'mat-icon material-icons mat-icon-check-circle',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 6 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Cancelled',
                                icon: 'mat-icon material-icons mat-icon-cancel',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 7 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Reschedule',
                                icon: 'mat-icon material-icons mat-icon-settings-backup-restore',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 8 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            },
                            {
                                text: 'Exception',
                                icon: 'mat-icon material-icons mat-icon-report-problem',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Update',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.id },
                                            { name: 'AppointmentStatusID', newValue: 8 },
                                        ],
                                        done: function (result) {
                                            FillAppointments();
                                        }
                                    });
                                }
                            }
                        ]
                    },
                    deleteMenuItem: {
                        text: 'Delete',
                        icon: 'mat-icon material-icons b-fa-delete',
                        menu: [
                            {
                                text: 'ONLY this Appointment',
                                icon: 'mat-icon material-icons b-fa-delete-forever',
                                onItem({ eventRecord }) {
                                    $app.execute({
                                        controller: 'Appointments', command: 'Delete',
                                        values: [
                                            { name: 'AppointmentID', value: eventRecord.data.id },
                                        ],
                                        done: function (result) {
                                            FillWaitingList();
                                        }
                                    });
                                    FillAppointments();
                                    FillWaitingListTags();
                                    $app.touch.notify(ctr + 'Appointment removed.');
                                }
                            },
                            {
                                text: 'This Appointment and ALL Future Recurrences',
                                icon: 'mat-icon material-icons b-fa-delete-sweep',
                                onItem({ eventRecord }) {
                                    RemoveFutureRecurrences(eventRecord.data.recurrenceId, eventRecord.startDate);
                                }
                            },
                        ]
                    },
                },
                processItems({ eventRecord, items }) {
                    if (eventRecord.id.toString().substring(0, 2) === 'TC') {
                        return false;
                    }

                    return true; // context menu is shown
                }
            }
        },

        timeAxis: {
            continuous: false,

            generateTicks(start, end, unit, increment) {
                const ticks = [];

                while (start < end) {

                    if (unit !== 'hour' || start.getHours() >= scheduleStartHour
                        && start.getHours() <= scheduleEndHour) {
                        ticks.push({
                            startDate: start,
                            endDate: DateHelper.add(start,
                                increment, unit)
                        });
                    }

                    start = DateHelper.add(start, increment, unit);
                }
                return ticks;
            }
        },

        subGridConfigs: {
            locked: {
                width: 150 +
                (scheduleShowDepartments ? 100 : 0) +
                (scheduleShowEmployeeSkills ? 100 : 0) +
                (scheduleShowCurrentDisposition ? 200 : 0)
            }
        },

        resourceColumns: {
            columnWidth: 140//,
            //headerRenderer : ({ resourceRecord }) => `${resourceRecord.id} - ${resourceRecord.name}`
        },

        columns: [
            {
                type: 'resourceInfo',
                showImage: scheduleShowEmployeePicture,
                text: 'Employee Full Name',
                field: 'name',
                showEventCount: true,
                flex: 1.25,
                locked: true,

                cellMenuItems: [
                    {
                        text: 'Send Text Message',
                        icon: 'mat-icon material-icons b-fa-textsms',
                        onItem(cell) {
                            let mobileNumber = employeeArray.filter(x => x.id === cell.record.data.id)[0].mobile;
                            $app.touch.show({
                                controller: 'SendSMS', startCommand: 'New', startArgument: 'createForm1',
                                defaultValues: [
                                    { name: 'EmployeeID', value: cell.record.data.id },
                                    { name: 'MobileNumber', value: mobileNumber },
                                ],
                                done: function (dataView) {

                                }
                            });
                        }
                    },
                    {
                        text: 'Navigate in Google Maps',
                        icon: 'mat-icon material-icons b-fa-map-marker',
                        onItem(cell) {
                            navigateForEmployee(cell.record.data.id);
                        },
                    },
                    {
                        text: 'Plot Appointments',
                        icon: 'mat-icon material-icons b-fa-map',
                        onItem(cell) {

                            var c = document.getElementById("mapContainer");
                            c.style.width = mapWidth;

                            if (cell.record.groupChildren !== undefined) {
                                let arr = [];
                                cell.record.groupChildren.forEach(function (c) {
                                    arr.push(c.data.id);
                                });
                                FillGroupAppointmentsMap(arr);
                            }
                            else {
                                FillAppointmentsMap(cell.record.data.id);
                            }
                        }
                    },
                    {
                        text: 'Open Employee',
                        icon: 'mat-icon material-icons b-fa-user',
                        onItem(cell) {
                            ShowEmployeeEditForm(cell.record.data.id);
                        }
                    },
                    {
                        text: 'Clear Disposition',
                        icon: 'mat-icon material-icons b-fa-clear',
                        onItem(cell) {
                            $app.execute({
                                controller: 'Employees', command: 'Update',
                                values: [
                                    { name: 'EmployeeID', value: cell.record.data.id },
                                    { name: 'CurrentDisposition', newValue: null, value: '' },
                                    { name: 'CurrentDispositionAsOfDateTime', newValue: null, value: new Date() },
                                    { name: 'CurrentDispositionDetails', newValue: null, value: '' },
                                    { name: 'CurrentDispositionLatitude', newValue: null, value: 0 },
                                    { name: 'CurrentDispositionLongitude', newValue: null, value: 0 },
                                    { name: 'CurrentDispositionLocation', newValue: null, value: '' }
                                ],
                                done: function (result) {
                                    FillEmployees();
                                }
                            });
                        }
                    },
                ]
            },
            {
                text: 'Department',
                field: 'department',
                flex: 1,
                hidden: !scheduleShowDepartments,
            },
            {
                text: 'Skillset',
                field: 'skillset',
                flex: 1,
                cellCls: 'cell-word-wrap',
                hidden: !scheduleShowEmployeeSkills,
            },
            {
                text: 'Disposition',
                field: 'dispositionDetails',
                flex: 1.65,
                cellCls: 'cell-word-wrap-compact',
                hidden: !scheduleShowCurrentDisposition,
            }
        ],
    });
The data that populates the scheduler is read later on and then populated like this:
    scheduler.resources = employeeArray;
    scheduler.events = appointmentArray;

Post by mats »

Please always use CODE tags when posting code. I'll take a look, these are not relevant for vertical mode so can be removed:
 filterBar: true,
            cellEdit: false,
            stripe: true,
            sort: 'name',
            group: scheduleGrouping

Post by mats »

How is your viewPreset defined?

Post by mats »


Post by bprescott_msd »

Here is how the oneday view preset is defined:
PresetManager.registerPreset('oneday', {
    displayDateFormat: 'h:mm A',
    shiftIncrement: 1,
    shiftUnit: 'day',
    tickSize: 60,
    timeResolution: {
        unit: 'minute',
        increment: 15
    },
    headerConfig: {
        middle: {
            unit: 'hour',
            dateFormat: 'h A'
        },
        top: {
            unit: 'day',
            dateFormat: 'ddd DD/MM'
        }
    }
});

Post by jk@datapult.dk »

mats wrote: Wed Sep 11, 2019 11:30 am

@bprescott_msd Are you 'switching' during runtime (not supported) or configuring your Scheduler to be mode : 'vertical'?

Hi. With the risk of hi-jacking this thread is there any chance runtime changing might be supported? The product is already impressive but I can think of some use-case where this would give end-users a "wauv" feeling.


Post by mats »

Would be great yes but I'm afraid there's no plan for this, you'd need to toggle between two instances if you need this type of UX.


Post Reply