[REACT] dayResource bug since Calendar version 6.0

[sbprot]

Hello,

Since I upgraded to Bryntum Calendar 6.0, I have several errors.

The first being to customize the header of my “day” view:

Overload 1 of 2, '(props: BryntumCalendarProps | Readonly<BryntumCalendarProps>): BryntumCalendar', gave the following error.
Object literal may only specify known properties, and 'dayHeaderRenderer' does not exist in type 'DayResourceViewConfig'.
Overload 2 of 2, '(props: BryntumCalendarProps, context: any): BryntumCalendar', gave the following error.
Object literal may only specify known properties, and 'dayHeaderRenderer' does not exist in type 'DayResourceViewConfig'.ts

and the second concerns the “timeAxisHeader” parameter, which no longer seems to exist for the component:

No overload matches this call.
Overload 1 of 2, '(props: BryntumCalendarProps | Readonly<BryntumCalendarProps>): BryntumCalendar', gave the following error.
Object literal may only specify known properties, and 'timeAxisHeader' does not exist in type 'DayResourceViewConfig'.
Overload 2 of 2, '(props: BryntumCalendarProps, context: any): BryntumCalendar', gave the following error.
Object literal may only specify known properties, and 'timeAxisHeader' does not exist in type 'DayResourceViewConfig'.ts(2769)

Here's where these mistakes come in:

import { BryntumCalendar } from '@bryntum/calendar-react';
import { DomConfig } from '@bryntum/calendar';

<BryntumCalendar 
    [...]
    modes={{
        dayResource: {
            [...]
            timeAxisHeader: false,
            dayHeaderRenderer(dayHeaderDomConfig: DomConfig) {
                 // My custom header
            }
       }
   }}
/>

Does anyone know how I can adjust this with the update?
Thanks for your help!

[Animal]

Well the timeAxisHeader error is correct. There really is no such thing outside of the Scheduler product.

And dayHeaderRenderer is a config of CalendarRow, so you'd need

    modes={{
        dayResource: {
            [...]
            allDayEvents : {
                dayHeaderRenderer(dayHeaderDomConfig: DomConfig) {
                     // My custom header
                }
            }
        }
    }}

[sbprot]

Hello Animal,

Thanks for your help but it doesn't seem to really fix the problem. I'll try to see how I can adapt my logic to get the same result.

I've also noticed something else that's more problematic for me: my timeranges aren't displayed at all on the calendar, even though they do exist in ResourceTimeRangeStore (I see them when I log the object).

To add or remove timeranges, I use the “resourceTimeRangeStore.add” or “resourceTimeRangeStore.remove” method.

Everything was working properly before I updated to 6.0.

[Animal]

Removing timeAxisHeader will definitely solve the compiler error where it complains that timeAxisHeader is not valid. Because it is not valid.

What compiler error is it throwing now when you have moved dayHeaderRenderer into the allDayEvents configuration?

[Animal]

You definitely asked for the timeRanges feature to be included?

calendar.features.timeRanges in the debugger will show you:

Screenshot 2024-07-31 at 15.17.13.png (854.45 KiB) Viewed 430 times

[sbprot]

Sorry but I don't understand what you're saying about timeranges.

The problem is that none of my timeranges are showing on the calendar since version 6.0, but I can see them when I log ResourceTimeRangeStore (e.g., with .allRecords() method). So, they exist in my store but aren't displayed on the calendar.

For "allDayEvent," the idea is to display a left arrow icon and a right arrow icon next to the date on the day view to easily switch days. Maybe I'm not doing that correctly. But again, there weren't any errors before version 6.0, so I didn't know it was wrong (like the timeAxisHeader property).
Here's what I do:

             dayHeaderRenderer(dayHeaderDomConfig: DomConfig) {
                                        const previousDayIcon = {
                                            className: `previousDayIcon`,
                                            html: `
                                            <i class="fa-regular fa-chevron-left" onclick="window.handlePreviousDayClick()" style="margin-right: 0.5rem"></i>
                                            `
                                        };
                                        const nextDayIcon = {
                                            className: `nextDayIcon`,
                                            html: `
                                            <i class="fa-regular fa-chevron-right" onclick="window.handleNextDayClick()" style="margin-left: 0.5rem"></i>
                                            `
                                        };
                                        dayHeaderDomConfig.children[0].children.unshift(previousDayIcon);
                                        dayHeaderDomConfig.children[0].children.push(nextDayIcon);
                                    },

[Animal]

Have you enabled the TimeRanges feature in your calendar? What bit of the post did you not understand?

Go to the debugger. Get a reference to the Calendar instance, and see if the feature is there just like post shows,

[sbprot]

Hello Animal,

No, it's "undefined" when I log features of the Calendar Instance since the 6.0 version.

[Animal]

Hi there!

It might be helpful to compare your app code with the example provided in your SDK. You can find a fully buildable React example with TimeRanges here: /examples/frameworks/react-vite/timeranges/dist/. This should give you a good reference point.

To check out the features available on the Calendar, you can go to the debugger command line and type:

bryntum.query('calendar').features

After that, open up the [[target]] to see all the details inside.

Feel free to reach out if you have any other questions or need further assistance!

[sbprot]

Hi there, Animal!

Thanks for your help.
From what I can see when comparing with the SDK example, my TimeRanges are indeed being recorded just like in the SDK example. For instance, when I check in the 'idRegister' object, 'relationCache > resource', or even 'allRecords', I can see that all the TimeRanges are present and stored correctly. However, none of them are showing up on the calendar anymore...

Could a change in version 6.0 have impacted this?