Calendar List mode date and range

[dwilliams]

When viewing the Calendar in List mode, you are able to set a “date” and a “range”. My goal is to set the date for tomorrow and grab a three-day range of events starting from the date. However, the EventList range seems to shift to the left or right of the date depending on the day of the week.

Is there a way to configure the EventList to show appointments with a "start date" and "end date" instead of a "date" and "range"?

Attached is showing a date given of 10/20/21 but the range is showing 10/18/21 - 10/21/21
https://ibb.co/WFLrsnS

[Animal]

https://www.bryntum.com/docs/calendar/api/Calendar/widget/EventList#config-range

You should be able to set the range to `'3d' to see three days worth of events from the start date.

[Animal]

In fact, just setting the start and end date at the same time will work.

calendar.activeView.setConfig({
    startDate : new Date(2020, 9, 13),
    endDate   : new Date(2020, 9, 16)
});

[cbennett]

I was able to get this working using the eventFilter under the list mode config to filter out the unwanted dates and setting the range to 1yr.

If the range setting is supposed to work the way you described, then it might be bugged. When I try to set a range in days like "3d", the dates displayed do occur around the date I provide, but they don't necessarily start at that date. For example, some days it will show a range that starts at the date I provided, but then the next day the range might start before the date I provided.

For example, today it is displaying "10/21/2021-10/24/2021", but this is the date setting:

// startDate = tomorrow at 12:00 am
const today = new Date(new Date().setHours(0, 0, 0, 0));
const startDate = addDays(today, 1); 

//in config
modes: {
      list: {
        date: startDate,
        range: '3d',
        ...
        }
       }

And I get the same result if I put the date as

date: new Date("10/23/2021")

or

date: new Date(2021, 9, 23)

And like I said, it seems to behave differently throughout the week depending on what day it is.

[saki]

I have tried to set start and end dates as Animal proposes and it worked for me. Is there anything what is different at your end that could cause the troubles?

agenda-date-range.gif (338.93 KiB) Viewed 1832 times

[Animal]

There is a bug with how it has its date set.

Views try to snap to the start of their "natural" range depending on the active date in the calendar.

When you say "tomorrow"...

The Calendar has an active date that it is interested in (See in the sidebar's date picker). The other views move to encompass that date.

So what you need is the calendar's active date plus the next three days? Or always today and the next three days?

Because the first is how it should work when I fix the current bug that I see with this.

The second is a special case which will need some custom configuration options to "opt out" of syncing to the Calendar's date

[Animal]

So when I use

    modes : {
        nextThreeDays : {
            type  : 'eventlist',
            range : '3d'
        }
    }

It does encompass three days, but whenever the calendar changes date, that is fed into that list. And that then "snaps" back to a three day "start" point probably based on the initial start date it had, so it will move in blocks of three.

That behaviour is usually wanted.

Just not in this case.

So maybe it should not snap its start point upon set of its date under some circumstances. We just have to decide when not to do that.

Then it will display 3 days from the calendar's date.

[Animal]

So with this as an override to the EventList class:

    updateRange(range) {
        const
            rangeString = `${range.magnitude} ${range.unit}`,
            { date }    = this,
            snapRange   = range.magnitude === 1 || range.unit !== 'day';

        // Change the start and end dates depending on the range side around the current date
        if (date) {
            if (snapRange) {
                this.setConfig({
                    startDate : DateHelper.floor(date, rangeString),
                    endDate   : DateHelper.ceil(DateHelper.add(date, 1, 'day'), rangeString)
                });
            }
            else {
                this.setConfig({
                    startDate : date,
                    endDate   : DateHelper.add(date, 1, 'day')
                });
            }
        }
    }

Then it always shows events in the three days starting at the calendar's active date. It does not snap to its closest 3 day boundary.

[Animal]

And maybe there should be a new config for views to opt out of syncing with the calendar's date.

That would then leave it to the application developer to move that view to whatever date he/she wanted to be visible.

So maybe

    modes : {
        nextThreeDays : {
            type  : 'eventlist',
            range : '3d',
            syncDateWithCalendar : false // Not a very good name, but...
        }
    }

If that is set then Calendar should never set the date in that view.

[cbennett]

@Animal That updateRange code works nicely. Thanks.