Appointments in UWP Scheduler (SfSchedule)

22 Jul 202624 minutes to read

SfSchedule control has a built-in capability to handle the appointment arrangement internally based on the ScheduleAppointmentCollection. ScheduleAppointment is a class, which holds the details about the appointment to be rendered in schedule.

C#

using Syncfusion.UI.Xaml.Schedule;

    //Creating an instance for schedule appointment collection
            ScheduleAppointmentCollection scheduleAppointmentCollection = new ScheduleAppointmentCollection();
            //Adding a schedule appointment to the schedule appointment collection 
            scheduleAppointmentCollection.Add(new ScheduleAppointment()
            {
                StartTime = DateTime.Now.Date.AddHours(10),
                EndTime = DateTime.Now.Date.AddHours(12),
                Subject = "Meeting",
                Location = "Hutchison road",
            });
            //Adding the schedule appointment collection to the SfSchedule DataSource
            schedule.Appointments = scheduleAppointmentCollection;

Mapping

Schedule supports full data binding to any type of IEnumerable source. Specify the ScheduleAppointmentMapping attributes to map the properties in the underlying data source to the schedule appointments.

Property Name	Description
StartTimeMapping	This property is used to map the property name of the custom class which is equivalent to the StartTime of ScheduleAppointment.
StartTimeZoneMapping	This property is used to map the property name of the custom class which is equivalent to the start time zone of ScheduleAppointment.
EndTimeMapping	This property is used to map the property name of the custom class which is equivalent to the EndTime of ScheduleAppointment.
EndTimeZoneMapping	This property is used to map the property name of the custom class which is equivalent to the End Time zone of ScheduleAppointment.
SubjectMapping	This property is used to map the property name of the custom class which is equivalent to the Subject of ScheduleAppointment.
AppointmentBackgroundMapping	This property is used to map the property name of the custom class which is equivalent to the Background of ScheduleAppointment.
AllDayMapping	This property is used to map the property name of the custom class which is equivalent to the IsAllDay of ScheduleAppointment.
RecurrenceRuleMapping	This property is used to map the property name of the custom class which is equivalent to the RecurrenceRule of ScheduleAppointment.
NotesMapping	This property is used to map the property name of the custom class which is equivalent to the Notes of ScheduleAppointment.
LocationMapping	This property is used to map the property name of the custom class which is equivalent to the Location of ScheduleAppointment.
IsRecursiveMapping	This property is used to map the property name of the custom class which is equivalent to the IsRecursive of ScheduleAppointment.
DisplayNameMapping	This property is used to map the property name of the custom class which is equivalent to the Display Name of ScheduleAppointment.
ReadOnlyMapping	This property is used to map the property name of the custom class which is equivalent to the read-only appointment of ScheduleAppointment.
RecurrenceProperitesMapping	This property is used to map the property name of the custom class which is equivalent to the Recurrence Properties of ScheduleAppointment.
RecurrenceTypeMapping	This property is used to map the property name of the custom class which is equivalent to the RecurrenceType of ScheduleAppointment.
ReminderTimeMapping	This property is used to map the property name of the custom class which is equivalent to the ReminderTime of ScheduleAppointment.
ResourceCollectionMapping	This property is used to map the property name of the custom class which is equivalent to the ResourceCollection of ScheduleAppointment.
ResourceNameMapping	This property is used to map the property name of the custom class which is equivalent to the ResourceName of ScheduleAppointment.
StatusMapping	This property is used to map the property name of the custom class which is equivalent to the status of ScheduleAppointment.
TypeNameMapping	This property is used to map the property name of the custom class which is equivalent to the TypeName of ScheduleAppointment.

NOTE

The CustomAppointment class should contain two DateTime fields and a string field as mandatory.

Creating custom Appointments

You can create a custom class Meeting with mandatory fields From, To, and EventName.

C#

using Syncfusion.UI.Xaml.Schedule;

        /// <summary>   
        /// Represents custom data properties.   
        /// </summary>   

    public class Meeting
    {
        public string EventName { get; set; }
        public DateTime From { get; set; }
        public DateTime To { get; set; }
        public Brush Color { get; set; }
    }

NOTE

You can inherit this class from INotifyPropertyChanged for dynamic changes in custom data.

You can map those properties of the Meeting class with our SfSchedule control by using ScheduleAppointmentMapping.

C#

using Syncfusion.UI.Xaml.Schedule;

        // Schedule data mapping for custom appointments
            ScheduleAppointmentMapping dataMapping = new ScheduleAppointmentMapping();
            dataMapping.SubjectMapping = "EventName";
            dataMapping.StartTimeMapping = "From";
            dataMapping.EndTimeMapping = "To";
            dataMapping.AppointmentBackgroundMapping = "Color";
            schedule.AppointmentMapping = dataMapping;

XAML

<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule x:Name="schedule" ScheduleType="Week" ItemsSource="{Binding Meetings}">
            <syncfusion:SfSchedule.AppointmentMapping>
                <syncfusion:ScheduleAppointmentMapping
                    SubjectMapping="EventName" 
                    AppointmentBackgroundMapping="Color"
                    StartTimeMapping="From"
                    EndTimeMapping="To">
                </syncfusion:ScheduleAppointmentMapping>
            </syncfusion:SfSchedule.AppointmentMapping>
        </syncfusion:SfSchedule>
 
</Page>

You can schedule meetings for a day by setting From and To of the Meeting class. Create meetings of type ObservableCollection <Meeting> and assign those appointments collection Meetings to the ItemsSource property, which is of IEnumerable type.

C#

using Syncfusion.UI.Xaml.Schedule;

            //Creating an instance for the custom appointment class
            Meeting meeting = new Meeting();
            //Setting start time of an event
            meeting.From = DateTime.Now.Date.AddHours(10) ;
            //Setting end time of an event
            meeting.To = meeting.From.AddHours(1);
            //Setting the subject for an event
            meeting.EventName = "Anniversary";
            //Setting the color for an event
            meeting.Color = new SolidColorBrush(Colors.Green);
            //Creating an instance for the collection of custom appointments
           var  Meetings = new ObservableCollection<Meeting>();
            //Adding a custom appointment in the CustomAppointmentCollection
            Meetings.Add(meeting);

           
            //Adding custom appointments to the SfSchedule DataSource
            schedule.ItemsSource = Meetings;

You can get the custom appointment in ScheduleTappedEventArgs of the ScheduleTapped event for a recurrence appointment.

C#

using Syncfusion.UI.Xaml.Schedule;

schedule.ScheduleTapped += Schedule_ScheduleTapped;
private void Schedule_ScheduleTapped(object sender, ScheduleTappedEventArgs e)
{
    var appointment = e.Appointment as Meeting;
}

Spanned Appointments

A Spanned Appointment is an appointment which lasts more than 24 hours.

C#

using Syncfusion.UI.Xaml.Schedule;

            //Creating an instance for the custom appointment class
            Meeting meeting = new Meeting();
            //Setting start time of an event
            meeting.From = DateTime.Now.Date.AddHours(10) ;
            //Setting end time of an event
            meeting.To = meeting.From.AddDays(2).AddHours(1);
            //Setting the subject for an event
            meeting.EventName = "Anniversary";
            //Setting the color for an event
            meeting.Color = new SolidColorBrush(Colors.Green);
            //Creating an instance for the collection of custom appointments
           var  Meetings = new ObservableCollection<Meeting>();
            //Adding a custom appointment in the CustomAppointmentCollection
            Meetings.Add(meeting);

All Day Appointments

An All-Day appointment is an appointment which is scheduled for a whole day. It can be set by using the IsAllDay property in the ScheduleAppointment.

C#

using Syncfusion.UI.Xaml.Schedule;
        // Creating an instance for the schedule appointment collection
            ScheduleAppointmentCollection scheduleAppointmentCollection = new ScheduleAppointmentCollection();
            //Adding a schedule appointment to the schedule appointment collection 
            scheduleAppointmentCollection.Add(new ScheduleAppointment()
            {
                StartTime = new DateTime(2017, 05, 08, 10, 0, 0),
                EndTime = new DateTime(2017, 05, 10, 12, 0, 0),
                Subject = "Meeting",
                Location = "Hutchison road",
                AllDay = true
            });
            //Adding the schedule appointment collection to the DataSource of SfSchedule
            schedule.Appointments = scheduleAppointmentCollection;

All-Day Appointment Panel

An all-day appointment doesn’t block out the entire time slot in SfSchedule; instead, it will render in a separate layout exclusively for all-day appointments. It can be enabled by setting the ShowAllDay property of SfSchedule.

C#

using Syncfusion.UI.Xaml.Schedule;

            schedule.ShowAllDay = true;

The All-Day panel background can be customized by setting AllDayAppointmentPanelBrush
of the respective view settings.

C#

using Syncfusion.UI.Xaml.Schedule;

         schedule.AllDayAppointmentPanelBrush = new SolidColorBrush(Colors.Green);

Recurrence Appointment

Recurring an appointment on a daily, weekly, monthly, or yearly interval. Recursive appointments can be created by enabling the IsRecursive property in Schedule appointments.

Recurrence Pattern

The recurrence pattern used in the control is in iCal standard. The Schedule control supports all four types of recurrence patterns.

RecurrenceType	RecurrenceProperties	Description
Daily	DailyNDays	Gets or sets the event to recur on a daily N intervals basis.
	IsDailyEveryNDays	Checks whether the event occurs Daily Every N days.
Weekly	IsWeeklySunday	Checks whether the event occurs every Sunday of week
	IsWeeklyMonday	Checks whether the event occurs every Monday of week
	IsWeeklyTuesday	Checks whether the event occurs every Tuesday of week
	IsWeeklyWednesday	Checks whether the event occurs every Wednesday of week
	IsWeeklyThursday	Checks whether the event occurs every Thursday of week
	IsWeeklyFriday	Checks whether the event occurs every Friday of week
	IsWeeklySaturday	Checks whether the event occurs every Saturday of week
	NthWeek	Gets or sets the event only nth week of the year.
	WeekDay	Gets or sets the event every week day.
	WeeklyEveryNWeeks	Gets or sets the event every N Weeks.
Monthly	SpecificMonth	Gets or sets the event in a specific month.
	SpecificMonthDay	Gets or sets the event in a specific month day.
	IsMonthlySpecific	Checks whether the event is Monthly specific event
	MonthlyEveryNMonths	Gets or sets the event every N Months.
	MonthlyNthWeek	Gets or sets the event nth week of every month.
	MonthlySpecificMonthDay	Gets or sets the event specific month day of Month.
	MonthlyWeekDay	Gets or sets the event every week day of month.
Yearly	IsYearlySpecific	Checks whether the event is Yearly Specific.
	YearlyEveryNYears	Gets or sets the event occurs every N Years.
	YearlyGenericMonth	Gets or sets the event occurs in generic month.
	YearlyNthWeek	Gets or sets the event occurs yearly nth week.
	YearlySpecificMonth	Gets or sets the event occurs yearly specific month.
	YearlySpecificMonthDay	Gets or sets the event occurs yearly specific month day.
	YearlyWeekDay	Gets or sets the event occurs yearly week day.
	EveryNYears	Gets or sets the event every N Years.
Common	IsRangeEndDate	Checks whether the event has Range end date
	IsRangeNoEndDate	Checks whether the event has No Range end date
	IsRangeRecurrenceCount	Checks whether the event has recurrence count.
	RangeEndDate	Gets or sets the event range end date.
	RangeStartDate	Gets or sets the event range start date.
	RangeRecurrenceCount	Gets or sets the event range recurrence count.
	IsSpecific	Checks whether the event occurs in Specific recurrence type.

Adding Recurrence Appointment using Recurrence Builder

The schedule appointment RecurrenceRule is used to populate the required recursive appointment collection in a specific pattern. RRULE can be easily created through the RecurrenceBuilder engine by simple APIs available in the Schedule control.

C#

using Syncfusion.UI.Xaml.Schedule;

   
                //Creating an instance for the schedule appointment collection
            ScheduleAppointmentCollection scheduleAppointmentCollection = new ScheduleAppointmentCollection();
            //Adding a schedule appointment to the schedule appointment collection 
            var scheduleAppointment = new ScheduleAppointment()
            {
                StartTime = DateTime.Now.Date.AddHours(10),
                EndTime = DateTime.Now.Date.AddHours(12),
                Subject = "Occurs every alternate day",
                IsRecursive = true
            };

            //Adding a schedule appointment to the schedule appointment collection
            scheduleAppointmentCollection.Add(scheduleAppointment);

            //Creating a recurrence rule
            RecurrenceProperties recurrenceProperties = new RecurrenceProperties();
            recurrenceProperties.RecurrenceType = RecurrenceType.Daily;
            recurrenceProperties.IsRangeRecurrenceCount = true;
            recurrenceProperties.DailyNDays = 2;
            recurrenceProperties.IsDailyEveryNDays = true;
            recurrenceProperties.IsWeeklySunday = false;
            recurrenceProperties.IsWeeklyMonday = true;
            recurrenceProperties.IsWeeklyTuesday = false;
            recurrenceProperties.IsWeeklyWednesday = false;
            recurrenceProperties.IsWeeklyThursday = false;
            recurrenceProperties.IsWeeklyFriday = false;
            recurrenceProperties.IsWeeklySaturday = false;
            recurrenceProperties.RangeRecurrenceCount = 10;
            recurrenceProperties.RecurrenceRule = ScheduleHelper.RRuleGenerator(recurrenceProperties, scheduleAppointment.StartTime, scheduleAppointment.EndTime);

            //Setting the recurrence rule to the schedule appointment
            scheduleAppointment.RecurrenceRule = recurrenceProperties.RecurrenceRule;

            //Adding the schedule appointment collection to the SfSchedule DataSource
            schedule.Appointments = scheduleAppointmentCollection;

Setting reminders

Schedule reminds you of the appointment at the specified time by setting the EnableReminderTimer property to true. The reminder time can be set using the ReminderTime property of ScheduleAppointment.

NOTE

Open the package.appxmanifest file, go to the Application UI tab, and select “Yes” from the “Toast capable” dropdown list to enable toast notifications in your application manifest.

C#

using Syncfusion.UI.Xaml.Schedule;

                schedule.EnableReminderTimer = true;
            schedule.Appointments.Add(new ScheduleAppointment
            {
                StartTime = DateTime.Now.Date.AddHours(9),
                EndTime = DateTime.Now.Date.AddHours(12),
                AppointmentBackground = new SolidColorBrush(Color.FromArgb(0xFf, 0xA2, 0xC1, 0x39)),
                Subject = "Business Meeting",
                ReminderTime = ReminderTimeType.TenHours
            });
            schedule.Appointments.Add(new ScheduleAppointment
            {
                StartTime = DateTime.Now.Date.AddDays(1).AddHours(10),
                EndTime = DateTime.Now.Date.AddDays(1).AddHours(16),
                AppointmentBackground = new SolidColorBrush(Color.FromArgb(0xFf, 0xD8, 0x00, 0x73)),
                Subject = "Auditing",
                ReminderTime = ReminderTimeType.TwoDays
            });
            schedule.Appointments.Add(new ScheduleAppointment
            {
                StartTime = DateTime.Now.Date.AddDays(7).AddHours(10),
                EndTime = DateTime.Now.Date.AddDays(7).AddHours(13),
                AppointmentBackground = new SolidColorBrush(Color.FromArgb(0xFf, 0xF0, 0x96, 0x09)),
                Subject = "Conference",
                ReminderTime = ReminderTimeType.TwoWeeks
            });

Editing appointment

The existing appointment can be edited in the following ways.

• Using Editor
• Using Context menu

Using Editor

To edit the existing appointment, you need to double-click on the corresponding appointment and modify the existing data of the selected appointment by using the editor displayed.

Using Context menu

The user can also use the Context menu to edit the selected appointment by selecting the Edit option in the menu item, which opens the default editor of the schedule control.

Appearance Customization

The default appearance of the appointment can be customized by using the ScheduleAppointmentStyle property and ScheduleAppointmentLoaded. The event and property are used to customize or override the default template of the Appointments.

• Customize appearance using Style
• Customize appearance using Event
• Customize appearance using Custom View

Customize appearance using Style

The schedule appointment can be customized by setting appointment style properties such as AppointmentTextColor, AppointmentFontStyle, BorderColor, BorderCornerRadius, BorderThickness to the ScheduleAppointmentStyle property of SfSchedule.

C#

using Syncfusion.UI.Xaml.Schedule;

                //Creating Appointment style 
            ScheduleAppointmentStyle appointmentStyle = new ScheduleAppointmentStyle();
            appointmentStyle.AppointmentTextColor = new SolidColorBrush(Colors.Red);
            appointmentStyle.AppointmentFontStyle = Windows.UI.Text.FontStyle.Italic;
            appointmentStyle.BorderColor = new SolidColorBrush(Colors.Blue);
            appointmentStyle.BorderCornerRadius = new CornerRadius(5);
            appointmentStyle.BorderThickness = new Thickness(5);

            //Setting Appointment Style 
            schedule.ScheduleAppointmentStyle = appointmentStyle;

Customize appearance using Event

The schedule appointment can be customized during runtime using ScheduleAppointmentLoadedEventArgs. The ScheduleAppointment style can be customized using the ScheduleAppointmentStyle property.

ScheduleAppointmentLoadedEventArgs has the following properties:

• ScheduleAppointment – Contains the appointment values.
• ScheduleAppointmentStyle – Gets and sets the appointment style.
• View - Sets the custom UI for Appointments.
• Bounds – Contains the UI bounds of the appointment.

C#

using Syncfusion.UI.Xaml.Schedule;
 
           schedule.ScheduleAppointmentLoaded += Schedule_ScheduleAppointmentLoaded;

     private void Schedule_ScheduleAppointmentLoaded(object sender, ScheduleAppointmentLoadedEventArgs args)
    {
        if (args.ScheduleAppointment != null && (args.ScheduleAppointment).Subject == "Meeting")
        {
            args.ScheduleAppointmentStyle.BorderColor = new SolidColorBrush(Colors.Blue);
            args.ScheduleAppointmentStyle.BorderCornerRadius = new CornerRadius(5);
            args.ScheduleAppointmentStyle.BorderThickness = new Thickness(5);
        }
    }

Customize appearance using Custom View

The default appointment UI can be changed using the View property passed through AppointmentLoadedEventArgs.

C#

using Syncfusion.UI.Xaml.Schedule;
 
     schedule.ScheduleAppointmentLoaded += Schedule_ScheduleAppointmentLoaded;

         private void Schedule_ScheduleAppointmentLoaded(object sender, ScheduleAppointmentLoadedEventArgs args)
        {
                Button button = new Button();
                button.Background = new SolidColorBrush(Colors.Green);
                if (args.ScheduleAppointment != null)
                    button.Content = (args.ScheduleAppointment).Subject;
                args.View = button;
        }

Selection

The Schedule control has built-in events to handle tapped and double-tapped touch actions.

• ScheduleTapped
• ScheduleDoubleTapped

These events will be triggered when performing the respective touch actions in timeslots, month cells, and in appointments. These events contain the same argument ScheduleTappedEventArgs which holds the selected appointment and date time details in it.

• Appointment -  Contains the selected appointment value; it will be null if any time slots are selected.
• SelectedDate - Contains the selected time slot DateTime value.
• SelectedResource - Contains the selected time slot DateTime value.

C#

using Syncfusion.UI.Xaml.Schedule;
 
     schedule.ScheduleTapped += Schedule_ScheduleTapped;
     schedule.ScheduleDoubleTapped += Schedule_ScheduleDoubleTapped;


    private void Schedule_ScheduleDoubleTapped(object sender, ScheduleTappedEventArgs e)
    {
    }

    private void Schedule_ScheduleTapped(object sender, ScheduleTappedEventArgs e)
    { 
    }

Selection customization

The default selection of an appointment can be customized by using SelectionColor, SelectionTextColor properties in ScheduleAppointmentStyle property of SfSchedule. The property is used to customize or override the default selection of the appointments.

NOTE

BorderThickness value must be set to highlight SelectionColor.

C#

using Syncfusion.UI.Xaml.Schedule;
 
            //Creating Appointment style 
        ScheduleAppointmentStyle appointmentStyle = new ScheduleAppointmentStyle();
        appointmentStyle.SelectionColor = new SolidColorBrush(Colors.Yellow);
        appointmentStyle.SelectionTextColor = new SolidColorBrush(Colors.Yellow);

            //Setting Appointment Style 
        schedule.ScheduleAppointmentStyle = appointmentStyle;

XAML

<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

     <syncfusion:SfSchedule x:Name="schedule" ScheduleType="Week" >
            <syncfusion:SfSchedule.ScheduleAppointmentStyle>
                <syncfusion:ScheduleAppointmentStyle BorderThickness="10" 
            SelectionColor="Yellow" 
            BorderCornerRadius="10" 
            SelectionTextColor="Yellow">
                </syncfusion:ScheduleAppointmentStyle>
            </syncfusion:SfSchedule.ScheduleAppointmentStyle>
        </syncfusion:SfSchedule>
 
</Page>

Configuring resources

The Schedule control allows you to define resources that can be assigned to appointments. Resources let you associate additional information with your appointments. The schedule can group appointments based on the resources associated with them.

C#

using Syncfusion.UI.Xaml.Schedule;
        //creating appointments for resource
    DateTime currentDate = DateTime.Now;
    ScheduleAppointment ScheduleAppointment = new ScheduleAppointment() 
    {                
        StartTime = currentDate, 
        EndTime = currentDate.AddHours(2), 
        Subject = "Meeting", 
        Location = "Chennai", 
        AppointmentBackground = new SolidColorBrush(Colors.Green) 
    };
    ScheduleAppointment.ResourceCollection.Add(new Resource() { ResourceName = "Dr.Jacob", TypeName = "Doctor" });
    
    //creating appointments for resource
    ScheduleAppointment ScheduleAppointment1 = new ScheduleAppointment() 
    { 
        StartTime = currentDate.AddHours(4), 
        EndTime = currentDate.AddHours(6), 
        Subject = "Meeting", 
        Location = "Chennai", 
        AppointmentBackground = new SolidColorBrush(Colors.Green) 
    };
    ScheduleAppointment1.ResourceCollection.Add(new Resource() { ResourceName = "Dr.Darsy", TypeName = "Doctor" });

    //Adding schedule appointments
        schedule.Appointments.Add(ScheduleAppointment);
        schedule.Appointments.Add(ScheduleAppointment1);

To configure the views based on resources, refer to:

• Configuring resources in Day View.
• Configuring resources in Week View.
• Configuring resources in Work Week View.
• Configuring resources in Month View.
• Configuring resources in Timeline View.

Resources customization

You can customize the resources in a Timeline view by using the TimeInterval, IntervalHeight, and ScheduleDateRange properties of the schedule. You can also add the dates in the ScheduleDateRange collection that need to be displayed in the day view and timeline view of the schedule.

XAML

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

<schedule:SfSchedule
        x:Name="schedule"
        Resource="Doctors"
        TimeInterval="Custom" CustomTimeInterval="1440"
        ScheduleType="TimeLine"
        Appointments="{Binding AppointmentCollection}"
        ScheduleDateRange="{Binding DateRange}">
<schedule:SfSchedule.ScheduleResourceTypeCollection>
    <schedule:ResourceType TypeName="Doctors">
        <schedule:Resource
                    DisplayName="Dr.Jacob"
                    ResourceName="Dr.Jacob"
                    TypeName="Doctors" />
        <schedule:Resource
                    DisplayName="Dr.Darsy"
                    ResourceName="Dr.Darsy"
                    TypeName="Doctors" />
    </schedule:ResourceType>
</schedule:SfSchedule.ScheduleResourceTypeCollection>
<schedule:SfSchedule.DataContext>
    <local:SchedulerViewModel/>
</schedule:SfSchedule.DataContext>
<interactivity:Interaction.Behaviors>
    <local:SchedulerBehavior/>
</interactivity:Interaction.Behaviors>
</schedule:SfSchedule>

</Page>

C#

using Syncfusion.UI.Xaml.Schedule;

public class SchedulerViewModel
{
    private ObservableCollection<DateTime> datecoll = new ObservableCollection<DateTime>();
    DateTime currentdate;
    public ScheduleAppointmentCollection AppointmentCollection { get; set; } = new ScheduleAppointmentCollection();
    public ObservableCollection<DateTime> DateRange{ get; set; } = new ObservableCollection<DateTime>();

    string[] subject = new string[]
  {
            "Oncological Robotic Surgery",
            "Free Plastic Surgery Camp",
            "Seminar on Recent Advances in Management of Benign Brain Tumours",
            "Patient and Public Forum",
            "4th Clinical Nutrition Update",
            "Robotic GI Surgery International Congress",
  };

    public SchedulerViewModel()
    {
        Random randomValue = new Random();
        DateTime today = DateTime.Now;
        if (today.Month == 12)
        {
            today = today.AddMonths(-1);
        }
        else if (today.Month == 1)
        {
            today = today.AddMonths(1);
        }
        int day = (int)today.DayOfWeek;
        DateTime currentWeek = DateTime.Now.AddDays(-day);

        DateTime startMonth = new DateTime(today.Year, today.Month - 1, 1, 0, 0, 0);
        for (int i = 1; i < 30; i += 2)
        {
            for (int j = -7; j < 14; j++)
            {
                datecoll.Add(currentWeek.Date.AddDays(j).AddHours(randomValue.Next(9, 18)));
            }
        }

        ObservableCollection<SolidColorBrush> brush = new ObservableCollection<SolidColorBrush>();
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xA2, 0xC1, 0x39)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xD8, 0x00, 0x73)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x1B, 0xA1, 0xE2)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xF0, 0x96, 0x09)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x33, 0x99, 0x33)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0xAB, 0xA9)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));

        int count = 0;
        for (int index = 0; index < 30; index++)
        {
            currentdate = datecoll[randomValue.Next(0, datecoll.Count)];
            DateTime nextdate = datecoll[randomValue.Next(0, datecoll.Count)];
            count++;
            ScheduleAppointment appointment1 = new ScheduleAppointment() { StartTime = currentdate, EndTime = currentdate.AddHours(randomValue.Next(0, 2)), Subject = subject[count % subject.Length], Location = "Chennai", AppointmentBackground = brush[index % 3] };
            appointment1.ResourceCollection.Add(new Resource() { TypeName = "Doctors", ResourceName = "Dr.Jacob" });
            count++;
            ScheduleAppointment appointment2 = new ScheduleAppointment() { StartTime = nextdate, EndTime = nextdate.AddHours(randomValue.Next(0, 2)), Subject = subject[count % subject.Length], Location = "Chennai", AppointmentBackground = brush[(index + 2) % 3] };
            appointment2.ResourceCollection.Add(new Resource() { TypeName = "Doctors", ResourceName = "Dr.Darsy" });
            AppointmentCollection.Add(appointment1);
            AppointmentCollection.Add(appointment2);

            DateRange.Add(new DateTime(2020, 08, 1));
            DateRange.Add(new DateTime(2020, 08, 2));
            DateRange.Add(new DateTime(2020, 08, 3));
            DateRange.Add(new DateTime(2020, 08, 4));
            DateRange.Add(new DateTime(2020, 08, 5));
        }
    }
}

C#

using Syncfusion.UI.Xaml.Schedule;

public class SchedulerBehavior : Behavior<SfSchedule>
{
    SfSchedule schedule;

    protected override void OnAttached()
    {
        base.OnAttached();
        schedule = this.AssociatedObject;
        this.AssociatedObject.SizeChanged += Schedule_SizeChanged;
    }

    private void Schedule_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        schedule.IntervalHeight = e.NewSize.Width / 5;
    }
    protected override void OnDetaching()
    {
        if (schedule != null)
        {
            base.OnDetaching();
            this.AssociatedObject.SizeChanged -= Schedule_SizeChanged;
        }
    }
}

You can download the entire source code here