Our pure JavaScript Scheduler component


Post by m.kiriejevas »

Hello,

    viewPreset : {
        base           : 'day',
        shiftIncrement : 1,
        shiftUnit      : 'month'
    },

how can i scroll time line to some day in the range of current time span without altering the TimeSpan?
If user switches to next month it is needed the timeline to be focused to the first day of month. Now the day is the same as user was displayed before changing month.

using scrollToDate alters TimeSpan also <-2weeks> <ToDate> <+ 2weeks> instead <first day of month> <ToDate> <last day of month>

Thanks


Post by marcio »

Hey m.kiriejevas,

Could you please share your configuration?? I added your viewPreset here https://bryntum.com/products/scheduler/examples/basic/ and added a button to call scrollToDate, and the TimeSpan wasn't changed to <-2weeks> <ToDate> <+ 2weeks> like you mentioned. If you could add your configuration to our demo code and share it here would be easier for us to assist you.

Best regards,
Márcio


Post by m.kiriejevas »

Hi, marcio,
please find sample configuration based on Basic example. It seems strange things happen when "workingTime" is enabled. When this property is commented out it works as expected.
When set up:

  1. Press "Today"
  2. Press ">" (next month)
    Observe strange timeline rendered.
import { Scheduler } from '../../build/scheduler.module.js';
import shared from '../_shared/shared.module.js';

//region Data

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' }
    ],
    events = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 2,
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows-alt'
        },
        {
            id           : 3,
            resourceId   : 'r3',
            startDate    : new Date(2017, 0, 1, 14),
            duration     : 2,
            durationUnit : 'h',
            name         : 'Double click me',
            eventColor   : 'purple',
            iconCls      : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 4,
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 5,
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            id         : 6,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            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, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            id         : 8,
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11, 30),
            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

let startOfMonth = new Date(2017, 0, 1, 6);
let endOfMonth = new Date(startOfMonth.getFullYear(), startOfMonth.getMonth()+1, 0, 20);
const scheduler = new Scheduler({
    appendTo         : 'container',
    resources        : resources,
    events           : events,
    startDate        : startOfMonth,
    endDate          : endOfMonth,
    viewPreset : {
        base           : 'day',
        shiftIncrement : 1,
        shiftUnit      : 'month'
    },
    snap: true,
    timeResolution : {
        unit      : 'minute',
        increment : 15
    },
    weekStartDay: 1,
    workingTime: { fromDay : 1, toDay : 5, fromHour : 6, toHour : 20},
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    columns          : [
        { text : 'Name', field : 'name', width : 130 }
    ],

tbar : [
    '->',
    {
        type  : 'buttongroup',
        items : [
            {
                type    : 'button',
                icon    : 'b-fa-angle-left',
                tooltip : 'Previous month',
                async onAction() {
                    let start = scheduler.startDate;
                    start = new Date(scheduler.startDate.getFullYear(), scheduler.startDate.getMonth() - 1, 1);
                    let end = new Date(start.getFullYear(), start.getMonth()+1, 0, scheduler.endDate.getHours());
                    await Promise.all([
                        scheduler.timeAxis.clearFilters()
                    ]).then(()=>{
                        scheduler.setTimeSpan(start, end);
                    }).then(() => {
                        scheduler.eventStore.load();
                    }).then(() => {
                        scheduler.refreshRows();
                        scheduler.renderContents();
                        scheduler.scrollToDate(new Date(end.getFullYear(), end.getMonth(), end.getDate()), { block : 'end' });
                    });
                }
            },
            {
                type    : 'button',
                ref     : 'todayButton',
                text    : 'Today',
                tooltip : 'Focus to today',
                async onAction() {
                    const today = new Date();
                    let start = new Date(today.getFullYear(), today.getMonth(), 1);
                    let end = new Date(start.getFullYear(), start.getMonth()+1, 0, scheduler.endDate.getHours());
                    console.log(end);

                    await Promise.all([
                        scheduler.timeAxis.clearFilters()
                    ]).then(()=>{
                        scheduler.setTimeSpan(start, end);
                    }).then(() => {
                        scheduler.eventStore.load();
                    }).then(() => {
                        scheduler.refreshRows();
                        scheduler.renderContents();
                        scheduler.scrollToDate(new Date(today.getFullYear(), today.getMonth(), today.getDate()), { block : 'start' })
                    });
                }
            },
            {
                type    : 'button',
                icon    : 'b-fa-angle-right',
                tooltip : 'Next month',
                async onAction() {
                    let start = new Date(scheduler.startDate.getFullYear(), scheduler.startDate.getMonth()+1, 1);
                    let end = new Date(scheduler.startDate.getFullYear(), scheduler.startDate.getMonth()+2, 0, scheduler.endDate.getHours());

                    await Promise.all([
                        scheduler.timeAxis.clearFilters()
                    ]).then(()=>{
                        scheduler.setTimeSpan(start, end);
                    }).then(() => {
                        scheduler.eventStore.load();
                    }).then(() => {
                        scheduler.refreshRows();
                        scheduler.renderContents();
                        scheduler.scrollToDate(new Date(start.getFullYear(), start.getMonth(), start.getDate()), { block : 'start' });
                    })
                }
            }
        ]
    }
]
});

marcio wrote: Tue Nov 29, 2022 2:41 pm

Hey m.kiriejevas,

Could you please share your configuration?? I added your viewPreset here https://bryntum.com/products/scheduler/examples/basic/ and added a button to call scrollToDate, and the TimeSpan wasn't changed to <-2weeks> <ToDate> <+ 2weeks> like you mentioned. If you could add your configuration to our demo code and share it here would be easier for us to assist you.


Post by tasnim »

I'm not able to reproduce it. Could you please show us a video on how are you reproducing it?

Here is how I tried to repro this

chrome_YzR3EGG6EG.gif
chrome_YzR3EGG6EG.gif (2.14 MiB) Viewed 495 times

Post by m.kiriejevas »

Hey Tasnim,
actually you have reproduced it!

As you can see in your video:

  • when we first load the page, initial date range in the timeline are: [beginning of month]..[end of month]
  • when you switch month and scroll to the beginning of grid - you see not the beginning of month. When you scroll to the end of grid - you see not the end of the month. This is the problem.
    When switching months we need to maintain calendar month interval, not other kind of interval of 30day length (in this case beginning date of timeaxis and end date of timeaxis are dates from different months).

No comment out the line

workingTime: { fromDay : 1, toDay : 5, fromHour : 6, toHour : 20},

and reload the page and try switching months - this is the result we are looking for but with workingTime set :)

Please see video:

time-axis-shift.avi
(5.06 MiB) Downloaded 36 times
tasnim wrote: Wed Nov 30, 2022 7:21 am

I'm not able to reproduce it. Could you please show us a video on how are you reproducing it?


Post by tasnim »

Ok. So first of all, in the next month button inside of the onAction function remove the promise stuff and add this code

scheduler.setTimeSpan(start, end);
scheduler.scrollToDate(new Date(start.getFullYear(), start.getMonth(), start.getDate(), 6), { block : 'start' });

This should work for you.


Post by m.kiriejevas »

It does not help. Actually it works to scroll 2-3 months and suddenly the timeline gets messed again.

It seems it is somehow related to the "scrollToDate" value provided. If it is not in the timeline because of working time configuration, it makes timeline to render strangely.

tasnim wrote: Thu Dec 01, 2022 12:33 pm

Ok. So first of all, in the next month button inside of the onAction function remove the promise stuff and add this code

scheduler.setTimeSpan(start, end);
scheduler.scrollToDate(new Date(start.getFullYear(), start.getMonth(), start.getDate(), 6), { block : 'start' });

This should work for you.


Post by tasnim »

Thank you for your detailed report. Now I've reproduced it. It's a bug indeed. I've opened a ticket for that. Here it is https://github.com/bryntum/support/issues/5694

Good Luck :),
Tasnim


Post by m.kiriejevas »

Hello,
the bug is not scheduled for fix yet.
Is there any temporary workaround (we have to keep workingTime filtered :( ) or maybe there is info on upcoming bug fix in the upcoming next few weeks?

tasnim wrote: Thu Dec 01, 2022 2:22 pm

Thank you for your detailed report. Now I've reproduced it. It's a bug indeed. I've opened a ticket for that. Here it is https://github.com/bryntum/support/issues/5694

Good Luck :),
Tasnim


Post by tasnim »

Unfortunately, don't know any workaround for this. We'll try to fix this in the next patch release.

Please subscribe to the ticket so that you'll be notified when it fixes.


Post Reply