Premium support for our pure JavaScript UI components


Post by jk@datapult.dk »

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 }
    ]
});

Post by tasnim »

Hi,

This is by design, changing the startDate will keep the duration and move the event. And changing endDate will change duration

Good Luck :),
Tasnim


Post by jk@datapult.dk »

Thanks for that explanation. What is the recommended way to override this behavior?


Post by arcady »

You can use https://www.bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#function-setStartDate method which has 2nd argument allowing to specify if you want to resize event or move it.


Post by jk@datapult.dk »

Thanks but this would change the underlying eventModel, right? I am looking to give the user an intuitive experience using the eventEditor.


Post by alex.l »

It will change nothing internal, but you will need to replace TaskEditor's default fields to your own to have this behaviour.
Here is the full guide how to customize TaskEditor https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/basics/taskedit

All the best,
Alex


Post Reply