[REACT] Is it possible to configure show ALL DAY events at the AllDayHeader while MULTI DAY events week view columns?

[thachle]

The document mentioned the configuration attribute showAllDayHeader (ref: https://www.bryntum.com/products/calendar/docs/api/Calendar/widget/DayView#config-showAllDayHeader) which seems to suggest that ALL DAY and MULTI DAY event displays are treated the same way in an all-or-nothing manner. Is there a way for me to display ALL DAY events at the week view header, while display MULTI DAY events span over week view columns?

[Animal]

Configure the DayViews (WeekView is an opinionated DayView with range : '1 week') with

    cellMapEventFilter : function(eventRecord) {
        const { dayTime, hiddenNonWorkingDays, showAllDayHeader } = this;

        // Filter in non-allDay events which coincide with our time range and which are not inside a hidden day
        return (!eventRecord.allDay &&
            // Event is eligible if it's within our view's day start/end range
            dayTime.intersects(eventRecord) &&
            // AND it's not in a hidden nonworking day
            !hiddenNonWorkingDays[dayTime.dayOfWeek(eventRecord.startDate)];
    },
    allDayEvents : {
        // Filter in only allDay events. Reject interDay events
        filter : function(eventRecord) {
            return eventRecord.isAllDay;
        }
    }

This is off the top of my head, so we may need to iterate on this.

[thachle]

When I placed the above code in my Config.js, the "this" variable is undefined:

const calendarConfig = {
  date : new Date(2024, 7, 18),

  modes: {
    week: {
        cellMapEventFilter: function(eventRecord) {
            console.log('>>> cellMapEventFilter:', eventRecord, this);
            return !eventRecord.allDay;
        }
      },
    }
}
        

 

[Animal]

We'll have to get there slowly.

You need a subclass

class MyWeekView extends WeekView {
    static type = 'myweek';

    cellMapEventFilter(eventRecord) {
        console.log('>>> cellMapEventFilter:', eventRecord, this);
        return !eventRecord.allDay;
    }
};
MyWeekView.initClass();

Then include that in your modes:

    modes: {
        week: { 
            type : 'myweek'
        }
    }

That might not completely do it. We might have to think more. But the this will be correct.

[Animal]

Here's a ticket for this: https://github.com/bryntum/support/issues/9679