We would like the ability to customize the calendar's month header.
For instance, we would like to add a row displaying the month name and year, as shown in the attached screenshot.
Hi Hristian,
The Infinite Calendar is not suitable for our customer.
Since this will be used as a long-term planning tool (including cell colors, etc.), they need an overview of the planning for more than one month. They will be using 3 or 4 views.
It is also important that the current month is clearly displayed above each view so users can easily identify which month they are looking at.
Additionally, the tool must be able to render vertically for mobile devices.
See the attachement for an horizontal and a vertical layout example.
Regards,
Felix
Hi Felix,
The approach I shared for customizing the header of each view section applies only to horizontal positioning, as shown in the structure from your initial screenshot.
Achieving this for vertical positioning, or exposing an API option for vertical layouts, is quite challenging and not feasible in a straightforward manner. This is because the Views are integers, rather than a per-view component declaration. However, for having labels for each month in a vertical view, we already have a feature request for an infinite calendar that may align with what you're looking for: Infinite Calendar/DatePicker. Please take a look and let me know if that would work for you.
If this doesn't meet your needs, and you're still looking to add labels in the views, could you provide more details on your use case? Specifically, how many views you're using, why you prefer a vertical layout, and how you'd like the component to expose this functionality?
Thank you for your cooperation.
Regards,
Hristian Stefanov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Hristian,
Thank you for the example, but...
when you change the calendar orientation to vertical: Orientation="CalendarOrientation.Vertical"
you can see that the HeaderTemplate solution is not working properly.
The month abbreaviations are then not displayed at the top of the corresponding month but at the top of the calendar component.
Regards,
Felix
Hi Felix,
I can confirm that the desired customization with multiple views is still achievable by utilizing the header template. To help you get started, I’ve prepared an example for you: REPL link. You can use it as a foundation and customize it further to meet your specific business requirements.
Regards,
Hristian Stefanov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Hristian,
In a multiview calendar (Views > 1) the header template would not allow to display the month name above each month.
Or do you think you can do that?
Regards,
Felix
Hi Felix,
I can confirm that customizing the Calendar header is already possible via the Header Template. For more details, please have a look at the linked documentation.
Regards,
Hristian Stefanov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.