Our powerful JS Calendar component


Post by Animal »

You could try configuring your datePicker with

    refreshEventsMap() {
        const me = this;

        if (me.showEvents) {
            const
                // Find the owning Calendar
                c = me.up('calendar'),
                a = c.activeView;

            // Read events from the same range as the currently active view so as not to disturb load on demand
            me.eventsMap = me.eventStore[me.showEvents === 'dots' ? 'getEvents' : 'getEventCounts']({
                startDate : a.startDate,
                endDate   : a.endDate,
                dateMap   : me.eventsMap || (me.eventsMap = new Map()),
                filter    : me.eventFilter
            });
        }
    }

Of course then when you are showing a WeekView, the DatePicker can only know about events in that week, and all its other rows will have zero event indicators.


Post by tdset »

In that case, perhaps datePicker.showEvents could be designated as incompatible with "load on demand" in the docs? It would be easier for me to explain to my client why we can't have that. :)


Post by tdset »

Just saw your previous message, will try that, thanks!


Post by Animal »

I think I have a fix for this: https://github.com/bryntum/support/issues/8149

The LoadOnDemand feature should, unless it is configured with alwaysLoadNewRange : true, not issue a load request for a date range which is already contained within the last range it requested.

So if the DatePicker asks for a month of events, and the WeekView asks for a week, the WeekView won't trigger its own reload request because the DatePicker already loaded a whole month.

Conversely, if a YearView, loads a year, the Datepicker's request for its own month of events should not trigger a request becaise the range is loaded.


Post by Animal »

This difficulty there comes if you then navigate the DatePicker outside of the range that the main view wants. Then they will both keep asking for their own ranges. This will have to be fixed by some limitation being imposed upon the DatePicker.


Post by Animal »

What it could do, is maximize the range.

So if you were on a week view, but kept scanning forwards in the DatePicker looking for a month of interesting events, it would have to load Math.min(datePicker.startDate, weekView.startDate)) to Math.max(datePicker.endDate, weekView.endDate)) to keep them both satisfied.

This could load a lot of events if you really go forward or backward a long way using the DatePicker leaving the week view alone.

Also, the week view visibly reloads itself on each month change.

But think such cases are slight edge cases and that handling should be OK


Post by Animal »

In fact I don't know if this kind of knowledge should be injected into the LoadOnDemand feature itself to look at the Calendar's activeView's range and the DatePicker's range and maximize them.

The app can do this using https://www.bryntum.com/products/calendar/docs/api/Calendar/feature/LoadOnDemand#config-beforeRequest.

Configure the LoadOnDemand feature like this:

    features : {
        loadOnDemand : {
            // We get a look at the request before its sent to the server
            beforeRequest : 'up.onBeforeLoadRange'
        }
    }

And inject this into the Calendar, so that 'up.onBeforeLoadRange' will call it:

    onBeforeLoadRange({ dateRangeRequested, request }) {
        const { activeView, datePicker } = this;

        // Request the widest range of dates to satisfy all visible UIs
        dateRangeRequested.startDate = new Date(Math.min(activeView.startDate, datePicker.startDate));
        dateRangeRequested.endDate   = new Date(Math.max(activeView.endDate,   datePicker.endDate));

        request.params.startDate = DateHelper.makeKey(dateRangeRequested.startDate);
        request.params.endDate   = DateHelper.makeKey(dateRangeRequested.endDate);
    }

So your handler is widening the date range of requested events to cover both the active view and the DatePicker.


Post by parl@nuviasmiles.com »

This was somewhat helpful to me, but my scenario is a bit different and I can't seem to find an easy solution.

  1. I only use a dayview and want to only load each day if it hasn't loaded yet
  2. I don't use a CRUD loader so I can't use loadondemand, my loaders are custom functions
  3. I don't know the best way to check if a day is already loaded when a new date is (re)selected because it becomes recursive to count or check the existing events for that day
    Can you help me with this one? I think the fix may be similar to what you are doing but I'm not sure.

Post by Animal »

You need to just keep a Map of the dates you've loaded keyed by DateHelper.makeKey(theDate)


Post Reply