Hi all,
Could you have a look at this code - why does startTime change endDate?
Video: https://www.dropbox.com/s/mqw9dkff2z26xpr/Screen%20Recording%202023-03-17%20at%2023.24.26.mov?dl=0
import { Scheduler, DateHelper, PresetManager, ViewPreset } from '../../build/scheduler.module.js?466403';
import shared from '../_shared/shared.module.js?466403';
const myViewPreset = new ViewPreset({
id: 'myPreset',
name: 'myPreset',
defaultSpan: 7 * 4,
shiftIncrement: 1,
timeResolution: {
unit: 'day',
increment: 1
},
headers: [
{ unit: "week", dateFormat: "W", },
{ unit: "month", dateFormat: "MMMM", },
{ unit: "day", dateFormat: "D", },
{ unit: "day", dateFormat: "ddd", },
],
});
PresetManager.add(myViewPreset)
const resources = [
{ id: 'r1', name: 'Mike' },
{ id: 'r2', name: 'Linda' },
{ id: 'r3', name: 'Don' },
{ id: 'r4', name: 'Karen' },
{ id: 'r5', name: 'Doug' },
{ id: 'r6', name: 'Peter' },
{ id: 'r7', name: 'Sam' },
{ id: 'r8', name: 'Melissa' },
{ id: 'r9', name: 'John' },
{ id: 'r10', name: 'Ellen' }
];
const events = [
{
id: 1,
resourceId: 'r1',
startDate: new Date(2017, 0, 1, 0, 0,),
endDate: new Date(2017, 0, 1, 23, 59,),
name: 'Click me',
iconCls: 'b-fa b-fa-mouse-pointer'
},
{
id: 2,
resourceId: 'r2',
startDate: new Date(2017, 0, 2, 0, 0,),
endDate: new Date(2017, 0, 2, 23, 59,),
name: 'Drag me',
iconCls: 'b-fa b-fa-arrows-alt'
},
{
id: 3,
resourceId: 'r3',
startDate: new Date(2017, 0, 3, 0, 0,),
endDate: new Date(2017, 0, 3, 23, 59,),
name: 'Double click me',
eventColor: 'purple',
iconCls: 'b-fa b-fa-mouse-pointer'
},
{
id: 4,
resourceId: 'r4',
startDate: new Date(2017, 0, 4, 0, 0,),
endDate: new Date(2017, 0, 4, 23, 59,),
name: 'Right click me',
iconCls: 'b-fa b-fa-mouse-pointer'
},
{
id: 5,
resourceId: 'r5',
startDate: new Date(2017, 0, 5, 0, 0,),
endDate: new Date(2017, 0, 5, 23, 59,),
name: 'Resize me',
iconCls: 'b-fa b-fa-arrows-alt-h'
},
{
id: 6,
resourceId: 'r6',
startDate: new Date(2017, 0, 6, 0, 0,),
endDate: new Date(2017, 0, 6, 23, 59,),
name: 'Important meeting (read-only)',
iconCls: 'b-fa b-fa-exclamation-triangle',
eventColor: 'red',
readOnly: true
},
{
id: 7,
resourceId: 'r6',
startDate: new Date(2017, 0, 7, 0, 0,),
endDate: new Date(2017, 0, 7, 23, 59,),
name: 'Sports event',
iconCls: 'b-fa b-fa-basketball-ball'
},
{
id: 8,
resourceId: 'r7',
startDate: new Date(2017, 0, 8, 0, 0,),
endDate: new Date(2017, 0, 8, 23, 59,),
name: 'Dad\'s birthday!',
iconCls: 'b-fa b-fa-birthday-cake',
// Custom styling from data
style: 'background-color : teal; font-size: 18px',
// Prevent default styling
eventStyle: 'none'
}
];
//endregion
const scheduler = new Scheduler({
appendTo: 'container',
viewPreset: 'myPreset',
resources: resources,
events: events,
startDate: new Date(2017, 0, 1),
snapRelativeToEventStartDate: true,
fillTicks: true,
endDate: new Date(2017, 0, 30),
rowHeight: 50,
barMargin: 5,
multiEventSelect: true,
features: {
eventEdit: {
timeFormat: "LT",
editorConfig: {
width: '32em'
},
items: {
eventType: {
type: 'combo',
name: 'eventType',
label: 'Type',
weight: 2,
value: 'wish',
items: ['wish', 'shift'],
listeners: {
change: ({source, value}) => {
// toggle visibility of widgets belonging to eventTypes
source.owner.items.forEach(widget => {
if (widget.dataset && widget.dataset.eventType) {
widget.hidden = widget.dataset.eventType !== value;
widget.required = widget.dataset.eventType === value;
}
});
console.log("value", value)
const startOffset = value === 'shift' ? 8 : 0
const endTimeOffset = value === 'shift' ? 16 : 0
const endDateOffset = value === 'shift' ? -1 : 0
const startDate = source.parent.record.startDate;
const endDate = source.parent.record.endDate;
source.parent.widgetMap.startTimeField.value = DateHelper.add(DateHelper.clearTime(startDate), startOffset, "hour")
source.parent.widgetMap.endTimeField.value = DateHelper.add(DateHelper.clearTime(endDate), endTimeOffset, "hour")
source.parent.widgetMap.endDateField.value = DateHelper.add(DateHelper.clearTime(endDate), endDateOffset, "hour")
}
}
},
nameField: {
dataset: {eventType: 'shift'},
},
startTimeField: {
cls: 'b-inline',
flex: '30%',
required: true,
validateOnInput: false,
},
startDateField: {
cls: 'b-inline',
flex: '50%',
required: true,
validateOnInput: false,
picker: {
showWeekColumn: true,
}
},
endTimeField: {
cls: 'b-inline',
flex: '30%',
required: true,
validateOnInput: false,
},
endDateField: {
cls: 'b-inline',
flex: '50%',
required: true,
validateOnInput: false,
picker: {
showWeekColumn: true,
},
listeners: {
change: ({source, value}) => {
// By default, a full day spans from 00:00 until 00:00 the next day. This works great for wishing a full day off.
// However, if you wish from the Monday to the Wednesday it will be until Wednesday 00:00, which is only up until Tuesday.
// So if selecting future dates, be sure fast-forward until 23:59:59
const originalEndDate = source.parent.record.endDate;
const futureDateIsSelected = originalEndDate < value
if (futureDateIsSelected) {
source.parent.widgetMap.endTimeField.value = DateHelper.add(DateHelper.endOf(value), -1, 'second')
return;
}
},
}
},
noteField: {
label: "Note",
name: "note",
type: 'textarea',
ref: 'noteField',
placeholder: 'Note...',
weight: 800,
}
},
}
},
columns: [
{ text: 'Name', field: 'name', width: 130 }
]
});