Hi.
I use the Day, Week and Month view in the Scheduler component. Unfortunatley the component doesn't support a year view which I need so I would like to include that myself from a different source. Question: Is it possible to add a "Year" button to the Scheduler buttons (see screenshot) that would show a custom component in the Scheduler view port when pressed?
Thanks!
Bernd
1 Answer, 1 is accepted
Hi, Bernd,
It is possible to insert a custom component in the Scheduler header by using the header prop. I made a small example that showcases this approach here:
https://stackblitz.com/edit/react-h4v2nz?file=app/main.jsx
Where a custom component has been created and passed via the prop.
More information on Header customization can be found in the following article:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/header-footer/
I hope this helps.
Regards,
FilipProgress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 5
Bronze
Bronze
Bronze
I have one follow-up question, please: I have managed to add the button and also on the button click I show the new year calendar now in the Calendar viewport. The only issue I have is that the standard Calendar view buttons (Day, Week and Month) stay in their active state when I click on my added button. So for example if I was on the Month view and that button is active and I click then on my custom year button, the Month button stays active and I can't click on it again. Is there a way to reset the state of this last active button clicked? The attached screenshot shows an active Week button even though I clicked on my custom Year button...
Thanks!
Hello, Bernd,
A possible solution would be if your setup permits, is to update the state in your app when another button is selected.
Can you provide a working example of your implementation that showcases this behavior so that I can inspect it further?
Regards,
FilipProgress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 5
Bronze
Bronze
Bronze
Hi.
I have added a basic example that is pretty similar to my implementation here:
https://stackblitz.com/edit/react-h4v2nz-t4kiqs
If you make the screen wide enough to see the Day, Week and Month buttons, click on one of them and then click on the year button you can see that whatever you clicked first will stay active and you can't click it again to go back. You have to click on one of the other buttons first.
Greetings,
Bernd
A possible solution would be to sync the state of the component, using the view and onViewChange props.
More information on how to control the selected view can be found in the following article:
https://www.telerik.com/kendo-react-ui/components/scheduler/views/#toc-controlling-the-selected-view
Regards,
Philip