.NET MAUI Scheduler Day Styling with Appintments

[Andrey]

Hello. Would be interested in migration .NET MAUI Scheduler from Xamarin with the following UI:

1. Selectable days and days with more customizable styles, like height etc.

2. Appointments indicators in days views

Everything achieved in xamarin using RadCalendar

Already checked Scheduler WeekHeader and Slot in UI for .NET MAUI | Telerik Forums

Thanks.

 

[Didi]

Hi Andrey,

Thank you for the provided images.

In general the Telerik Xamarin Calendar and Scheduler control is different than the Telerik MAUI Calendar and Scheduler controls. In MAUI the controls have been designed and built from the ground up as new controls with a new API and significant improvements over its Xamarin counterpart.

Let me get straight to the questions:

1) Selectable days and days with more customizable styles, like height etc.

As you are having appointments, then you have to use the Telerik MAUI Scheduler control.

You can style the day view by using the exposed styling API: https://docs.telerik.com/devtools/maui/controls/scheduler/styling/day-styling , For styling the header, review the following link: https://docs.telerik.com/devtools/maui/controls/scheduler/styling/header-styling 

2) Appointment indicators:

You can use appointment template and add additional elements to the template https://docs.telerik.com/devtools/maui/controls/scheduler/appointments/appointment-template 

Hope this will be of help.

Regards,
Didi
Progress Telerik

[Andrey]

Hi, thanks.

1. Day view style has a Label as a base control, I have tried to add HeightRequest etc. and no result, looks like it is hardcoded, do we have something like border style for the day views? Is it possible to select the date in week mode like it was in calendar before?

2. Is it possible to add Appointments indicators in days views ?

[Didi]

1) The day style targets the label. I tested and height cannot be applied. I set min height and height as values still the default is presented. 

Note that the Scheduler for MAUI has a new design and layout structure, so the behavior is by design and control implementation. However, I will discuss the case with the dev team and will send an update next week. 

2) I shared an approach using the appointment template, it works for all views. I have attached the xaml and cs files. 

[Didi]

Andrey,

I have discussed both cases with the dev team and here are my notes:

1) I have logged a feature request for applying height to the area with the day label: https://feedback.telerik.com/maui/1698674-scheduler-provide-an-option-to-specify-height-to-the-area-with-day-names 
2) Regarding to the selection in the week view area, the Scheduler is a new component different than the Xamarin and there isn't a day selection in the schedule view. You can select dates using the calendar picker from the header area. 

Hope this information will be of help.

[Andrey]

Ok, and the last one if I would like to add the appointments indicator(dots, please see my example pic from 2nd) to the days area/labels/selectors?

[Didi]

The appointments are rendered in the time slot area. In Xamarin the control is combined - Calendar and Scheduler, so you see appointments in the calendar area and schedule view area. In MAUI they are two different controls. So there isn't an option to display appointments in the Scheduler day names area. The area is reserved only for the day names.

[Andrey]

Hi Didi. Can we open a support ticket for this?

When in the Single Day mode (multi day mode too), there is no event preview anymore (little dots near the date). If this feature is missing in Telerik, lets open a support ticket for them.

 

Here also in current implementation no dots/indicators

[Andrey]

Dates are not clickable anymore (but can be swiped). If this feature is missing in Telerik, we should open a support ticket for them. Atleast I was thinking to highlight the selected date and guess it could be supported after exposed the day header style/control.

[Andrey]

The short day format is inconsistent. All days are shown as three letter day-name (Mon, Tue, Wed, etc.), but Friday is Fri 24 (with its date). If this is not configurable we should report it to Telerik.

[Didi]

Regarding tapping on the day names, we have the following feature request: https://feedback.telerik.com/maui/1671991-scheduler-add-day-tap-command-for-multidayview  It is for multi day view, however, the week view is a modification of the multi day view. For now I cannot suggest an alternative approach to workaround the missing feature.

Regarding to the short day format, send me a sample code snippet how the format is set, so i can test on my side. 

 

[Andrey]

Hi Didi. Okay, I see no priority for this. Please comment about the appointments indicators in days view

 

Here also in current implementation no dots/indicators

[Didi]

Hi, Andrey,

The indicators were part of the calendar area in the Xamarin Calendar control. In .NET MAUI the control is Scheduler, different control. So please do not mix both controls. In .NET MAUI , the Calendar and Scheduler are two different controls with different design. 

In .NET MAUI by design the Scheduler control is used for displaying appointments and they are visible in the slots area. You can check the visual structure of the scheduler control at the following link: https://www.telerik.com/maui-ui/documentation/controls/scheduler/visual-structure 

The second image - the calendar opens when using the navigation button for selecting a date, so the scheduler can navigate to this date. By design, this is view does not show appointments for the date. The appointments are part of the Scheduler control and they are displayed in the slots. 

Hope this answers your questions.

[Andrey]

Hi Didi, then in order to migrate from Xamarin and make the dots appointments indicators we need an access to the DayView control as ControlTemplate(?). Could be combined with:

https://feedback.telerik.com/maui/1671991-scheduler-add-day-tap-command-for-multidayview

https://feedback.telerik.com/maui/1698674-scheduler-provide-an-option-to-specify-height-to-the-area-with-day-names

Also since there are 2 conrols now, probably we can make a hybrid solution using both of them? Still can not understand how to migrate keeping all of the functions in our apps.

Thanks.

 

[Didi]

Hi Andrey,

I have reviewed the iOS native calendar and such shapes/dots/indicators are not presented in the day, multiday modes. Note that the MAUI Scheduler control follows the platform design guidance. However, regarding to the day names in the Scheduler MultiDay/Week View, I have opened a feature request on your behalf: https://feedback.telerik.com/maui/1702666-scheduler-provide-template-for-the-day-names-area-for-week-and-multiday-view-modes , so we can expose a template for customizing the area in a way you want. In this way you can add shapes to address appointments.

For now, I can suggest you use the DayStyleSelector api: https://www.telerik.com/maui-ui/documentation/controls/scheduler/styling/day-styling and style the days that have an appointments. Also you can try formatting string on the label (as the target type of the DayStyleSelector is a label) to add additional dots, on the days with appointments. Note that this is just a suggestion you can try.

Regarding to the calendar control that displays when clicking on the navigation button. This wasn't part of the Xamarin Calendar and Scheduler control. So it is a new edition to the maui Scheduler. How to customize the inner calendar, you can check this article: https://www.telerik.com/maui-ui/documentation/knowledge-base/customize-calendar-appearance-scheduler-net-maui For example you can style the dates that have appointments.

Control Templates:

You can review both MAUI Calendar ad MAUI Scheduler control templates, inside the TelerikTheming/Styles/Platform folder - Calendar.xaml and Scheduler.xaml files. How to add the theming is described here: https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview 

These are the options I can suggest.

[Andrey]

Thanks