[REACT] Toolbar custom items

[sbprot]

Hello,

I want to customize my toolbar with custom items but without delete default items (provided widgets like todayButton, toggleSidebar, viewDescription...). However, I want to customize some of the provided widgets style without losing their initial logic.

        tbar: {
            namedItems: {
                toggleEventView: {
                    type: 'widget',
                    html:
                        <FormControlLabel control={<Switch checked={isDetailedView} onChange={() => setIsDetailedView(!isDetailedView)} />} label="Detailed View" />
                },
            },
            items: {
                toggleEventView: true,
            }
       } 

When I do that, all I have in my toolbar is my "toggleEventView" widget but I don't have the provided widgets anymore...

2023-11-22-1201.png (14.6 KiB) Viewed 320 times

But when I set one of the provided item like this :

            items: {
                toggleEventView: true,
                viewDescription: true
            }

The widget is shown but without its initial properties (button type by default) :

2023-11-22-1203.png (18.02 KiB) Viewed 320 times

If there is no other choice, I can rebuild the provided widgets that I want to use in my toolbar but where can I find the logic to put in the object ? Is there a better way to do that ?

Thanks for your help !

[tasnim]

Hi,

Sorry, I don't understand what is your use case! Could you please provide some more details including a runnable test case?

[sbprot]

Hi tasnim,

I just want to customize my toolbar with some custom widgets. But when I 'add' my custom widget in the toolbar items (like the example in the code of my previous message), all the other widgets (todayButton, viewDescription, toggleSidebar, prevButton...) disappear. It's as if my toolbar only acknowledges the elements that I pass in 'items' (as in the example of my code).

What I would like to achieve is to be able to add my custom widgets while continuing to use the default ones provided in the toolbar. Additionally, I want to modify the style of these default widgets to better fit my application. For example, I'd like to change the toggleSidebar widget, which is a button with three vertical dots used to show or hide the sidebar, into a button displaying the selected date but always with the behavior to show or hide the sidebar.

How would you go about doing this?
Is there a way to retain the logic of the default widgets I want to use and recreate them as custom widgets since they no longer appear when I add my custom widgets?

Thanks for your response.

[marcio]

Hey sbprot,

Which version are you using? I tested on our demo https://bryntum.com/products/calendar/examples/basic/ and the item is added to the end of the toolbar. Please check the screenshot.

Could you please provide a runnable test case for us to debug? You can get more info by checking our guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

[sbprot]

Hi marcio, thanks for your response.

I think I understand why it's not working on my end. It's because I might have disrupted the normal functionality of the Bryntum Calendar to make today the first day of the week. To achieve this, I have to force the calendar to 'rerender' after the initial load. If I slowly observe the loading of my calendar: the first 'render' of the calendar does display all widgets before only showing those present in my 'items'.

Unless you know a way to make the calendar start with today, which I understand might be impossible, I will need to take a different approach: Recreating the default items that I lose.
For example, which function or method can I use to create a widget that would employ the logic of the 'prevButton' or 'nextButton'? On click, the calendar would display the previous 7 days or the next 7 days, incorporating all the effects triggered by the default widget behavior? Or to replicate the logic of showing or hiding the sidebar? Do you get what I'm trying to say?

Thanks for your help!

[marcio]

Hey,

Perhaps you could use the approach suggested here viewtopic.php?p=129938#p129938
and use a DayView with a range of seven days with a startDate of today.

[sbprot]

Hi marcio,

Thanks for your advice, but I've already tried that solution. Indeed, it sets the first day of the week to 'today', but it causes another bug. You can find this bug described in this message.
I'm facing exactly the same issue when doing that... The only workaround I've found is to set this parameter:

weekStartDay: new Date().getDay()

With this approach, my first day is always set to today's day but I have to trigger a reload of the calendar after its first load for it to work correctly. Unfortunately, this creates issues for me now with the toolbar, as I mentioned.

Do you have any solution for me to display the first day of the week without this 'day change' bug?

Thanks for your help!

[Animal]

I'm confused as to the exact requirements.

You can set a DayView to show range : '7 d' and set its startDate

After that it will do its best to show you the date you are interested in.

So it will move that 7 day block so that the day you just clicked on is within it. It will move the 7 day window forwards or backwards so that the date you clicked on is inside the view.

As mentioned, you can disable that behaviour.

What is lacking?

[Animal]

Here's a CodePen which shows it: https://codepen.io/Animal-Nige/pen/BaMVzQX?editors=0010

What is needed?

[sbprot]

Hi Animal,

The problem is that when I click on a day to create an event, the entire calendar shifts, and it's not really clear what's happening. I understand the intended behavior, but it creates confusion when using the calendar.

What I would like is for the first day of the week to be today, and for it to remain today even if I click on the next day to schedule an appointment. If I want to display the next 7 days or the previous 7 days from today, I use the arrows (prevButton and nextButton) in the toolbar or the datePicker... But when I click on a day, I don't want the whole calendar to shift like in the video of the message I referenced...

In the solution you propose, it works correctly but you disable "syncViewDate" to achieve this. Unfortunately, I need to be able to use the datePicker and the arrows to move 7 days, and this is impossible with this parameter set to "false".