How to disable the already scheduled dates in the calendar control in start time of RadSheduleView

[Divya]

Hi,

I am using RadScheduleView in a WPF application. I have a requirement where if an appointment is scheduled from 10.00-11.00 , the next time when I click on scheduler control to schedule an appointment, the calendar corresponding to start time and end time should have the 10.00 and 11.00 in disabled state.

How can I achieve that?

 

Thanks,

Divya

[Lance | Manager Technical Support]

Hi Divya,

If you only want to set ReadOnly slots, you can follow the directions here: Special and ReadOnly Slots. It might be feasible to just update the ReadOnlySlots collection after each appointment is added.

If what you're looking for is to prevent the user from selecting the time from TimePicker in the new appointment dialog, this is more complicated and will require creating your own custom EditAppointmentDialog window.

Custom Dialog Logic

In the custom dialog you can try iterating over the Appointments collection and getting a list of times to disable in the custom dialog's Start and End RadDateTimePickers.

With those values determined, you can use them to set the Blackout Dates feature or Restrict Time selection. Alternatively, you can even set a custom list of times they only can choose from the picker by setting a custom ClockItemsSource:

In the view model, you can populate CusotmClockItems with all hours of the day and then selectively remove the times that match an appointment's

private void UpdateClockItems()
{
    CustomClockItems = new ObservableCollection<TimeSpan>(allHours);

    foreach (var appointment in Appointments)
    {
        CustomClockItems.Remove(CustomClockItems.FirstOrDefault(t => t == appointment.Start.TimeOfDay));
    }
}

Note that you would want to re-run that logic every time an appointment is added. A good place to do this is in the CollectionChanged event handler:

Custom Dialogs Extracting and Editing Templates

Read carefully for instructions and important information regarding extracting default the style for cusotm dialogs https://docs.telerik.com/devtools/wpf/controls/radscheduleview/features/custom-dialogs 

The following documentation article paragraph goes into more detail on how you can access the elements of the EditAppointmentDialog https://docs.telerik.com/devtools/wpf/controls/radscheduleview/features/appointments/custom-appointment#creating-a-custom-appointment-dialog 

Once you have the style extracted, you will have access to the TimePickers and can implement your cusotm logic to prevent the user from picking certain times.

For example, this is what they look like from the VisualStudio2019 theme

Important - Extracting Default Styles

It is extremely important that you follow the instructions in the how-to-extract-the-default-styles-of-the-dialogs section. Every theme is different, so you can't just take a snippet from one example and apply it to your application. You will want to extract the dialog from the theme you're using before making your own custom dialog.

My recommended approach is to extract the style for the entire ScheduleView

1. Go to C:\Program Files (x86)\Progress\Telerik UI for WPF R1 2020\Themes.Implicit\WPF40\[YOURTHEMENAME]\Themes

2. Locate and open the ScheduleView's resource dictionary XAML file

3. Search for "EditAppointmentDialogStyle" and copy that, and the EditAppointmentTemplate, into your project's App.xaml

Once they're copied into your project, rename them so there are no conflicts. The most common naming scheme is to prefix it with "MyCustom".

4. Edit that template with your custom logic for the TimePicker to disable times that are already used.

5. Finally, you can now assign that custom style to the RadScheduleView

Demo

I've attached the demo I developed to write this reply for you. Run it and add a new appointment in an open slot. Notice the time picker does not allow you to choose time that already used:

Important Note

I do not recommend using the demo code in a production app directly. It is using the VisualStudio2019 theme and I did not extensively test the code. 

You will want to perform the style extraction steps in your project so that your ControlTemplate is correct for your theme. Additionally, the custom logic to remove the times should be thoroughly tested in your specific scenario and developed accordingly (i.e. more accurate time slots and duration matching).

Further Assistance

If you need further assistance, please opening a Support Ticket instead of another forum post by going to Get Support. A Support ticket will get you direct access to the UI for WPF team whom can assist further.

Regards,
Lance | Team Lead - US DevTools Support
Progress Telerik