Special and Restricted Slots
With R3 2019 release of Telerik UI for Xamarin RadCalendar provides the option to define a collection of special and restricted time slots in order to make them noticeable across the timeline of the Day and MultiDay views.
You just need to prepare a collection ofSpecialSlotobjects and assign it toSpecialSlotsSourcecollection of the DayViewSettings / MultiDayViewSettings for Day/MultiDay view, respectively.
Every SpecialSlot has the following properties:
- StartDate;
- EndDate;
- RecurrencePattern: Defines whether the slot will be displayed for repeating days;
- IsReadOnly: When set toTruethe slot is disabled (restricted), meaning the end user wouldn't be able to create or modify appointments at that slot (tapping over a read-only slot will not show Create Appointment screen).
Appointments that cover restricted and non restricted slots at the same time can still be modified through the调度用户界面.
下面的哟u can find a quick example how to create special and restricted slots.
First, create a ViewModel class with a collection ofSpecialSlotobjects. In the example two repeating special slots are added for rest hours during weekdays. In addition, the first slot which represents a lunch break, is set as restricted time.
public class ViewModel { public ViewModel() { this.RestHours = new ObservableCollection(); var today = DateTime.Today; var dailyRecurrence = new RecurrencePattern() { DaysOfWeekMask = RecurrenceDays.WeekDays, Frequency = RecurrenceFrequency.Weekly, MaxOccurrences = 30 }; this.RestHours.Add(new SpecialSlot(today.AddHours(12), today.AddHours(13)) { RecurrencePattern = dailyRecurrence, IsReadOnly = true }); this.RestHours.Add(new SpecialSlot(today.AddHours(16), today.AddHours(16).AddMinutes(15)) { RecurrencePattern = dailyRecurrence }); } public ObservableCollection RestHours { get; set; } } Then, add RadCalendar definition withMultiDayViewMode andMultiDayViewSettingsapplied:
Last step is to set the BindingContext to the ViewModel class:
this.BindingContext = new ViewModel();Here is the result after executing the example above on different platforms:
Setting a separate Style for different slots
Through theSpecialSlotStyleSelectorproperty of the DayViewSettings (or MultiDayViewSettings) you can apply different background color to slots depending on certain condition. The SpecialSlotStyleSelector provides SelectStyle method with theSpecialSlotas a parameter. The method should return an object of typeCalendarSpecialSlotStylewhich exposes aBackgroundColorproperty.
The sample below extends the previous example by applying separate styles to both types of special slots through a SpecialSlotStyleSelector.
Create a custom style selector class which inherits fromSpecialSlotStyleSelectorand override SelectStyle method:
public class RestHoursStyleSelector : SpecialSlotStyleSelector { public CalendarSpecialSlotStyle LunchBreakStyle { get; set; } public CalendarSpecialSlotStyle ShortBreakStyle { get; set; } public override CalendarSpecialSlotStyle SelectStyle(object item) { var specialSlot = item as SpecialSlot; if (specialSlot.StartDate.Hour == 12) return this.LunchBreakStyle; return this.ShortBreakStyle; } }Add the created RestHoursStyleSelector as a Resource and define both Styles:
All that is left, is to set the SpecialStyleSelector property of the MultiDayViewSettings:
Check the result in the image below:
Applying a ContentTemplate to the slots
By default the special slots are marked with a different background. In addition you could show a content of your choice inside special slots through theSpecialSlotContentTemplateproperty of the DayViewSettings / MultiDaySettings.
For the example, create a custom slot that inherits fromSpecialSlotclass:
public class BreakSlot : SpecialSlot { private string title; public string Title { get { return this.title; } set { if (this.title != value) { this.title = value; this.OnPropertyChanged(); } } } }In the ViewModel class, add a collection of BreakSlot objects that will be then assigned as a SpecialSlotsSource:
public class ViewModel { public ViewModel() { this.RestHours = new ObservableCollection(); var today = DateTime.Today; var dailyRecurrence = new RecurrencePattern() { DaysOfWeekMask = RecurrenceDays.WeekDays, Frequency = RecurrenceFrequency.Weekly, MaxOccurrences = 30 }; this.RestHours.Add(new BreakSlot() { Title = "Lunch time", StartDate = today.AddHours(12), EndDate = today.AddHours(13), IsReadOnly = true, RecurrencePattern = dailyRecurrence }); this.RestHours.Add(new BreakSlot() { Title = "Coffee break", StartDate = today.AddHours(16), EndDate = today.AddHours(16).AddMinutes(30), RecurrencePattern = dailyRecurrence }); } public ObservableCollection RestHours { get; set; } } Here is the RadCalendar definition whereSpecialSlotContentTemplateproperty is applied:
And, lastly, add the RestHoursDataTemplate referenced earlier as a StaticResource:
下面的哟u can check the result on different platforms:
All the Special Slots examples can be found in the Calendar & Scheduling/Features folder of theSDK Samples Browser application.