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
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,
}
],
});
scheduler.resources = employeeArray;
scheduler.events = appointmentArray;