We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add multiple resource to Schedule (SfSchedule) in Xamarin.Forms

Platform: Xamarin.Forms |
Control: SfSchedule

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 1

Create 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 2

Use `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 3

Mapping 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 4

Also, 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>

 

View sample in GitHub.

 

Screenshots

 

 

Resource UWP platform

 

 

 

 

 

     

Figure 1: Resource-UWP

 

 

Resource WPF platform

 

     

Figure 2: Resource-WPF

Resource Android platform

Resource iOS platform

 

Figure 3: Resource-Android     Figure 4: Resource-iOS

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile