2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
The SfSchedule control allows you to use multiple resources. The default appearance of the resource can be customized by using the `ResourceItemTemplate` property of the schedule. Step 1Create a class for custom appointment details and resources for scheduling the appointment. public class Meeting { public string EventName { get; set; } public int Capacity { get; set; } public DateTime From { get; set; } public DateTime To { get; set; } public Color Color { get; set; } public double MinimumHeight { get; set; } public bool IsAllDay { get; set; } public ObservableCollection<object> Resources { get; set; } } public class Employees : INotifyPropertyChanged { private string name; private object id; private Color color; public string Name { get { return name; } set { name = value; this.OnPropertyChanged("Name"); } } public object ID { get { return id; } set { id = value; this.OnPropertyChanged("ID"); } } public Color Color { get { return color; } set { color = value; this.OnPropertyChanged("Color"); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }
Step 2Use `Button` as an item template for displaying resources and bind it to the `ResourceItemTemplate` property of schedule. <?xml version="1.0" encoding="UTF-8"?> <Button xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Schedule_MultipleResource.WithResource" Text="{Binding Name}" TextColor="White" BackgroundColor="{Binding Color}"> </Button>
Step 3Mapping the custom appointments to the `StartTimeMapping`, `EndTimeMapping`, `ColorMapping`, `SubjectMapping`, `ResourceIdsMapping`, and `AppointmentMapping` of schedule to display the custom appointments. <schedule:SfSchedule x:Name="Schedule" HeaderHeight="50" ViewHeaderHeight="40" HorizontalOptions="FillAndExpand" ScheduleView="TimelineView" VerticalOptions="FillAndExpand" DataSource="{Binding ListOfMeeting}" SelectedResources="{Binding SelectedResources}" ScheduleResources="{Binding Resources}" TimeInterval="720" ShowResourceView="True" ResourceItemTemplate="{Binding WithResource}" ResourceViewMode="Absolute"> <schedule:SfSchedule.ViewHeaderStyle> <schedule:ViewHeaderStyle DateFontSize="20" DayFontSize="20"> </schedule:ViewHeaderStyle> </schedule:SfSchedule.ViewHeaderStyle> <schedule:SfSchedule.TimelineViewSettings> <schedule:TimelineViewSettings DaysCount="7"> <schedule:TimelineViewSettings.LabelSettings> <schedule:TimelineLabelSettings> <schedule:TimelineLabelSettings.DateFormat> <OnPlatform x:TypeArguments="x:String"> <On Platform="UWP" Value="%d ddd"></On> <On Platform="Android" Value="d EEE"></On> <On Platform="iOS" Value="d EEE"></On> <On Platform="WPF" Value="%d ddd"></On> </OnPlatform> </schedule:TimelineLabelSettings.DateFormat> </schedule:TimelineLabelSettings> </schedule:TimelineViewSettings.LabelSettings> </schedule:TimelineViewSettings> </schedule:SfSchedule.TimelineViewSettings> <schedule:SfSchedule.AppointmentMapping> <schedule:ScheduleAppointmentMapping ColorMapping="Color" EndTimeMapping="To" IsAllDayMapping="IsAllDay" StartTimeMapping="From" SubjectMapping="EventName" ResourceIdsMapping="Resources"/> </schedule:SfSchedule.AppointmentMapping> <schedule:SfSchedule.ResourceMapping> <schedule:SfSchedule.ResourceViewSettings> <schedule:ResourceViewSettings SelectionMode ="Multiple"/> </schedule:SfSchedule.ResourceViewSettings> <schedule:SfSchedule.BindingContext> <local:ScheduleViewModel/> </schedule:SfSchedule.BindingContext> </schedule:SfSchedule>
Step 4Also, map the custom resources to `Name`, `Id`, and `Color` of `ResourceMapping`. Then, customize the appearance of the resource view using the `ResourceItemTemplate` property of schedule. <schedule:SfSchedule.ResourceMapping> <schedule:ResourceMapping Name="Name" Id="ID" Color="Color"/> </schedule:SfSchedule.ResourceMapping>
Screenshots
Figure 1: Resource-UWP
Figure 2: Resource-WPF
Figure 3: Resource-Android Figure 4: Resource-iOS |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.