Issue with Kendo UI Scheduler Design - Expected vs. Actual Output & Dynamic Color Binding

[VASANTH]

Hello everyone,

I'm currently working on implementing a Kendo UI Calendar in our project. However, I encountered an issue with the design output.

Expected Output: (Refer to Image 1 below)

Actual Output: (Refer to Image 2 below)

Despite using the same code, the output doesn't match the design we expected. The first image shows the correct design we're aiming for, while the second image reflects what we currently see.

In addition to the design issue, I need to bind dynamic colors to the year view of the calendar. These colors will be fetched from an API. However, I'm unsure how to correctly implement this.

Has anyone encountered similar issues or has experience with binding dynamic colors in Kendo UI's year view? Any guidance or code examples would be greatly appreciated!

[Martin Bechev]

Hi Vasanth,

Thank you for the provided screenshots.

I checked out the Year view of the Scheduler with the latest Scheduler package version (16.8.0) and the latest theme version (8.2.1). But the layout seems to be the same as you expected. Here is an example:

https://stackblitz.com/edit/angular-jwm2qf?file=src%2Fapp%2Fapp.component.ts

Based on the provided details I am not sure which versions are used. In case they are outdated, please try to update them following this article:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

Also, ensure that there are no custom CSS styles that overwrite the default layout of the Scheduler. 

About the colors, could you provide more details about which part of the calendar should be customized? The Scheduler provides several templates that can be found helpful in customizing the appearance dynamically:

https://www.telerik.com/kendo-angular-ui/components/scheduler/templates/

..but I would need some more context to be able to provide further assistance

Looking forward to your reply.

Regards,
Martin Bechev
Progress Telerik