[ANGULAR] ColumnHeaderRender for Week mode does not return allDay events

[nhinguyen3620]

Hello,

I want to display the sum of all events' value in the column header. This is my code for the week mode:

 week: {
          maxAllDayHeight: '100%',
          allDayEvents: { autoHeight: true },
          eventRenderer: eventRenderer,
          columnHeaderRenderer: (dayCell: DayCell) => {
            let sum = 0;
            console.log(dayCell); //the log in the screenshot comes from this line
            dayCell.events.forEach((event) => {
              const val = event.getData('value');
              sum += val;
            });
            return `${sum} `;
          },
        },

The allDay events were not returned by the columnHeaderRenderer function.
The column header value for the date 5/2/2025 in my screenshot should be 9, not 5.

[marcio]

Hi,

The issue you're facing is likely because the columnHeaderRenderer function does not automatically include all-day events in the dayCell.events array. To include all-day events, you might need to access them separately. You can try checking if the dayCell object has a separate property for all-day events or adjust your logic to include them.

Here's a modified version of your code that attempts to include all-day events:

week: {
    maxAllDayHeight: '100%',
    allDayEvents: { autoHeight: true },
    eventRenderer: eventRenderer,
    columnHeaderRenderer: (dayCell: DayCell) => {
        let sum = 0;
        console.log(dayCell); // Log to check the structure of dayCell
        // Sum regular events
        dayCell.events.forEach((event) => {
            const val = event.getData('value');
            sum += val;
        });
        // Sum all-day events if they are stored separately
        if (dayCell.allDayEvents) {
            dayCell.allDayEvents.forEach((event) => {
                const val = event.getData('value');
                sum += val;
            });
        }
        return `${sum} `;
    },
}

If dayCell.allDayEvents does not exist, you may need to explore the structure of dayCell further to find where all-day events are stored.

Let me know if this helps or if you need further assistance!

Documentation reference: https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView#config-allDayEvents.

[nhinguyen3620]

Hi,

I've looked into the DayCell object but it does not return anything related to the all-day events. These are all the information that was returned

[tasnim]

Hi,

I've opened a feature request to include it in the column header renderer https://github.com/bryntum/support/issues/11318.

For now you could use this as a workaround https://codepen.io/dv-auntik/pen/jEEporz?editors=0010

    modes : {
        week: {
            maxAllDayHeight: '100%',
            allDayEvents: { autoHeight: true },
            columnHeaderRenderer: (dayCell) => {
                let count = dayCell.events.length;
                dayCell.view.calendar.eventStore.records.forEach(record => {
                    if (DateHelper.betweenLesser(dayCell.date, record.startDate, record.endDate) && record.allDay) {
                        count++;
                    }
                });
                return `${count}`;
            },
        }
    },

[nhinguyen3620]

Thank you, it worked. However, I do notice another problem. I have included the weekends button in my calendar

   <bryntum-calendar
          [date]="calendarProps.date!"
          [modes]="calendarProps.modes!"
          [eventTooltipFeature]="calendarProps.eventTooltipFeature!"
          [includeWeekendsButton]="true"
          (onDateRangeChange)="onDateRangeChange($event)"
        ></bryntum-calendar>
 

Whenever I click the button to hide the weekends in my calendar, the column header goes away (screenshots attached)

[tasnim]

Thanks for your report. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/11322