MAUI

User Guide Demos Support Forums Download
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SchedulerTimeSlotView

    Show / Hide Table of Contents

    Class SchedulerTimeSlotView

    Represents a class which is used to configure all the properties related to time slots of the SfScheduler.

    Inheritance
    System.Object
    SchedulerTimeSlotView
    SchedulerDaysView
    SchedulerTimelineView
    Namespace: Syncfusion.Maui.Scheduler
    Assembly: Syncfusion.Maui.Scheduler.dll
    Syntax
    public class SchedulerTimeSlotView : BindableObject

    Constructors

    SchedulerTimeSlotView()

    Declaration
    public SchedulerTimeSlotView()

    Fields

    AppointmentTemplateProperty

    Identifies the AppointmentTemplate dependency property.

    Declaration
    public static readonly BindableProperty AppointmentTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for AppointmentTemplate dependency property.

    CurrentTimeIndicatorBrushProperty

    Identifies the CurrentTimeIndicatorBrush bindable property.

    Declaration
    public static readonly BindableProperty CurrentTimeIndicatorBrushProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for CurrentTimeIndicatorBrush dependency property.

    EndHourProperty

    Identifies the EndHour dependency property.

    Declaration
    public static readonly BindableProperty EndHourProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for EndHour dependency property.

    MinimumAppointmentDurationProperty

    Identifies the MinimumAppointmentDuration dependency property.

    Declaration
    public static readonly BindableProperty MinimumAppointmentDurationProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for MinimumAppointmentDuration dependency property.

    NonWorkingDaysProperty

    Identifies the NonWorkingDays dependency property.

    Declaration
    public static readonly BindableProperty NonWorkingDaysProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for NonWorkingDays dependency property.

    NumberOfVisibleDaysProperty

    Identifies the NumberOfVisibleDays dependency property.

    Declaration
    public static readonly BindableProperty NumberOfVisibleDaysProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for NumberOfVisibleDays dependency property.

    ShowCurrentTimeIndicatorProperty

    Identifies the ShowCurrentTimeIndicator bindable property.

    Declaration
    public static readonly BindableProperty ShowCurrentTimeIndicatorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowCurrentTimeIndicator dependency property.

    StartHourProperty

    Identifies the StartHour dependency property.

    Declaration
    public static readonly BindableProperty StartHourProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for StartHour dependency property.

    TimeFormatProperty

    Identifies the TimeFormat dependency property.

    Declaration
    public static readonly BindableProperty TimeFormatProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TimeFormat dependency property.

    TimeIntervalProperty

    Identifies the TimeInterval dependency property.

    Declaration
    public static readonly BindableProperty TimeIntervalProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TimeInterval dependency property.

    TimeRegionsProperty

    Identifies the TimeRegions dependency property.

    Declaration
    public static readonly BindableProperty TimeRegionsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TimeRegions dependency property.

    TimeRegionTemplateProperty

    Identifies the TimeRegionTemplate dependency property.

    Declaration
    public static readonly BindableProperty TimeRegionTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TimeRegionTemplate dependency property.

    TimeRulerTextStyleProperty

    Identifies the TimeRulerTextStyle dependency property.

    Declaration
    public static readonly BindableProperty TimeRulerTextStyleProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TimeRulerTextStyle dependency property.

    ViewHeaderSettingsProperty

    Identifies the ViewHeaderSettings bindable property.

    Declaration
    public static readonly BindableProperty ViewHeaderSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ViewHeaderSettings dependency property.

    ViewHeaderTemplateProperty

    Identifies the ViewHeaderTemplate dependency property.

    Declaration
    public static readonly BindableProperty ViewHeaderTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ViewHeaderTemplate dependency property.

    Properties

    AppointmentTemplate

    Gets or sets the appointment template to customize the default UI.

    Declaration
    public DataTemplate AppointmentTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.DataTemplate
    Remarks

    By default, the SchedulerAppointment is set as the BindingContext for AppointmentTemplate for both SchedulerAppointment and custom data object in AppointmentsSource. Custom data object can be bound in AppointmentTemplate by using DataItem.

    Examples

    The following sample used to configure the custom appointments and appointment template.

    # [Model.cs](#tab/tabid-11)
    public class Meeting
    {
        public string EventName { get; set; }
        public DateTime From { get; set; }
        public DateTime To { get; set; }
        public Brush BackgroundBrush { get; set; }
        public string RecurrenceRule { get; set; }
    }
    # [C#](#tab/tabid-12)
    var customAppointments = new ObservableCollection<Meeting>();
    var meeting = new Meeting()
    {
       EventName = "General Meeting",
       From = new DateTime(2022, 2, 25, 09, 0, 0),
       To = new DateTime(2022, 2, 25, 10, 0, 0),
       BackgroundBrush = Brush.GreenYellow,
    };
    customAppointments.Add(meeting);
    this.scheduler.AppointmentsSource = customAppointments;
    # [XAML](#tab/tabid-13)
    <ContentPage.Resources>
        <DataTemplate x:Key="appointmentTemplate">
            <Grid Background="{Binding DataItem.BackgroundBrush}">
                <Label Text="{Binding DataItem.EventName}" TextColor="Black"/>
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    

    <syncfusion:SfScheduler x:Name="scheduler"> <syncfusion:SfScheduler.DaysView> <syncfusion:SchedulerDaysView AppointmentTemplate="{StaticResource appointmentTemplate}"/> </syncfusion:SfScheduler.DaysView> <syncfusion:SfScheduler.TimelineView> <syncfusion:SchedulerTimelineView AppointmentTemplate ="{StaticResource appointmentTemplate}"/> </syncfusion:SfScheduler.TimelineView> <syncfusion:SfScheduler.AppointmentMapping> <syncfusion:SchedulerAppointmentMapping Subject="EventName" StartTime="From" EndTime="To" Background="BackgroundBrush"/> </syncfusion:SfScheduler.AppointmentMapping> </syncfusion:SfScheduler>

    CurrentTimeIndicatorBrush

    Gets or sets the color of current time indicator.

    Declaration
    public Brush CurrentTimeIndicatorBrush { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    The default value is Microsoft.Maui.Controls.Brush.Black.

    Remarks

    The current time indicator color is only applied if the ShowCurrentTimeIndicator is enabled.

    Examples

    The below examples shows, how to use the ShowCurrentTimeIndicator property of SchedulerTimeSlotView in the SfScheduler.

    • XAML
    • C#
    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView CurrentTimeIndicatorBrush="Blue"/>
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView CurrentTimeIndicatorBrush="Blue" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.CurrentTimeIndicatorBrush = Brush.Blue;
    this.Scheduler.TimelineView.CurrentTimeIndicatorBrush = Brush.Blue;

    EndHour

    Gets or sets the end hour for the time slot views in the SfScheduler.

    Declaration
    public double EndHour { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 24.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views, and it allows to change the end hour for the time slot views in the scheduler, every day in time slot view end at the hour set to this property.

    Examples

    The below examples shows, how to use the EndHour property of SchedulerTimeSlotView in the SfScheduler.

    • XAML
    • C#
    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView EndHour="15" />
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView EndHour="15" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.EndHour = 15;
    this.Scheduler.TimelineView.EndHour = 15;
    See Also
    StartHour
    TimeRegions
    NonWorkingDays

    MinimumAppointmentDuration

    Gets or sets the height for an appointment when it has minimum duration in time slot views of the SfScheduler.

    Declaration
    public TimeSpan MinimumAppointmentDuration { get; set; }
    Property Value
    Type Description
    System.TimeSpan

    The default value is null.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views.

    Examples

    The below examples shows, how to use the MinimumAppointmentDuration property of SchedulerTimeSlotView in the SfScheduler.

    • XAML
    • C#
    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView MinimumAppointmentDuration="0:30:0" />
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView MinimumAppointmentDuration="0:30:0" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.MinimumAppointmentDuration = new TimeSpan(0, 30, 0);
    this.Scheduler.TimelineView.MinimumAppointmentDuration = new TimeSpan(0, 30, 0);
    See Also
    TimeInterval
    TimeIntervalHeight
    TimeIntervalWidth

    NonWorkingDays

    Gets or sets the non working days for the workweek view and timeline workweek view in the SfScheduler.

    Declaration
    public SchedulerWeekDays NonWorkingDays { get; set; }
    Property Value
    Type Description
    SchedulerWeekDays

    The default value is Saturday and Sunday.

    Remarks

    This property only applicable to when the scheduler view set as WorkWeek and TimelineWorkWeek views.

    Examples

    The below examples shows, how to use the NonWorkingDays property of SchedulerTimeSlotView in the SfScheduler.

    this.Scheduler.DaysView.NonWorkingDays = SchedulerWeekDays.Monday | SchedulerWeekDays.Wednesday;
    this.Scheduler.TimelineView.NonWorkingDays = SchedulerWeekDays.Monday | SchedulerWeekDays.Wednesday;
    See Also
    TimeRulerTextStyle
    TimeRulerWidth
    TimeRulerHeight

    NumberOfVisibleDays

    Gets or sets a value to display the number of days of Day, Week, WorkWeek, TimelineDay, TimelineWeek, TimelineWorkWeek in the SfScheduler

    Declaration
    public int NumberOfVisibleDays { get; set; }
    Property Value
    Type Description
    System.Int32

    The default value is -1. For the default value, the scheduler will handle the visible days count based on the view type, such as day and timeline day view 1, week and timeline week 7, and workweek and timeline workweek 5 based on non-working days.

    Remarks

    The NumberOfVisibleDays value ranges from 1 to 7; if the value is greater than 7, it is considered 7. The FirstDayOfWeek will be considered when theNumberOfVisibleDays value is 7 for Day, Week, TimelineDay and TimelineWeek. For the WorkWeek and TimelineWorkWeek views FirstDayOfWeek will be considered when the NumberOfVisibleDays value and NonWorkingDays count equals 7.

    Examples

    The below examples shows, how to use the NumberOfVisibleDays property of SchedulerTimeSlotView in the SfScheduler.

    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView NumberOfVisibleDays = "3" />
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView NumberOfVisibleDays = "3" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>

    ShowCurrentTimeIndicator

    Gets or sets a value indicating whether the visibility of current time indicator.

    Declaration
    public bool ShowCurrentTimeIndicator { get; set; }
    Property Value
    Type Description
    System.Boolean

    The default value is true.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views and the default value is true.

    Examples

    The below examples shows, how to use the ShowCurrentTimeIndicator property of SchedulerTimeSlotView in the SfScheduler.

    • XAML
    • C#
    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView ShowCurrentTimeIndicator="False" />
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView ShowCurrentTimeIndicator="False" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.ShowCurrentTimeIndicator = false;
    this.Scheduler.TimelineView.ShowCurrentTimeIndicator = false;
    See Also
    CurrentTimeIndicatorBrush

    StartHour

    Gets or sets the start hour for the time slot views in the SfScheduler.

    Declaration
    public double StartHour { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 0.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views, and it allows to change the start hour for the time slot views in the scheduler, every day in time slot view start from the hour set to this property.

    Examples

    The below examples shows, how to use the StartHour property of SchedulerTimeSlotView in the SfScheduler.

    • XAML
    • C#
    <schedule:SfScheduler x:Name="Scheduler"
                          View="Week">
       <schedule:SfScheduler.DaysView>
           <schedule:SchedulerDaysView StartHour = "8" />
       </schedule:SfScheduler.DaysView>
       <schedule:SfScheduler.TimelineView>
           <schedule:SchedulerTimelineView StartHour = "8" />
       </schedule:SfScheduler.TimelineView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.StartHour = 8;
    this.Scheduler.TimelineView.StartHour = 8;
    See Also
    EndHour
    TimeRegions
    NonWorkingDays

    TimeFormat

    Gets or sets the time formats for the time text in the time slot views of the SfScheduler.

    Declaration
    public string TimeFormat { get; set; }
    Property Value
    Type Description
    System.String

    The default value is "hh:mm tt".

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views.

    Examples

    The below examples shows, how to use the TimeFormat property of SchedulerTimeSlotView in the SfScheduler.

    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.TimeFormat = "hh:mm";
    this.Scheduler.TimelineView.TimeFormat = "hh:mm";
    See Also
    TimeRulerTextStyle
    TimeRulerWidth
    TimeRulerHeight

    TimeInterval

    Gets or sets the time interval between the time slots in the time slot views of the SfScheduler.

    Declaration
    public TimeSpan TimeInterval { get; set; }
    Property Value
    Type Description
    System.TimeSpan

    The default value is 60 minutes.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views.

    Examples

    The below examples shows, how to use the TimeInterval property of SchedulerTimeSlotView in the SfScheduler.

    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.TimeInterval = new TimeSpan(2, 0, 0);
    this.Scheduler.TimelineView.TimeInterval = new TimeSpan(2, 0, 0);

    TimeRegions

    Gets or sets to defines the collection of special time region in the time slot views of the SfScheduler.

    Declaration
    public ObservableCollection<SchedulerTimeRegion> TimeRegions { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<SchedulerTimeRegion>

    The default value is null.

    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views, and also used to restrict interaction on time slots.

    Examples

    The below examples shows, how to use the TimeRegions property of SchedulerTimeSlotView in the SfScheduler.

    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion();
    this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
    private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
    {
       var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
       var timeRegion = new SchedulerTimeRegion()
       {
           StartTime = DateTime.Today.Date.AddHours(13),
           EndTime = DateTime.Today.Date.AddHours(14),
           Text = "Lunch",
           EnablePointerInteraction = false,
       };
    timeRegions.Add(timeRegion);
    return timeRegions;
    }

    TimeRegionTemplate

    Gets or sets the time region template to customize the default UI.

    Declaration
    public DataTemplate TimeRegionTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.DataTemplate
    Remarks

    The BindingContext of the TimeRegionTemplate is the SchedulerTimeRegion.

    Examples

    The following code used to configure time region view using the Microsoft.Maui.Controls.DataTemplate.

    # [XAML](#tab/tabid-16)
    <scheduler:SfScheduler x:Name="Scheduler"
                           View="Week">
     <scheduler:SfScheduler.DaysView>
       <scheduler:SchedulerDaysView>
           <scheduler:SchedulerDaysView.TimeRegionTemplate>
               <DataTemplate>
                   <Grid Background="lightBlue" >
                       <Label x:Name="label" HorizontalOptions="Center" TextColor="Red" VerticalOptions="Center" Text="{Binding Text}" />
                   </Grid>
               </DataTemplate>
           </scheduler:SchedulerDaysView.TimeRegionTemplate>
       </scheduler:SchedulerDaysView>
      </scheduler:SfScheduler.DaysView>
     <scheduler:SfScheduler.TimelineView>
       <scheduler:SchedulerTimelineView>
           <scheduler:SchedulerTimelineView.TimeRegionTemplate>
               <DataTemplate>
                   <Grid Background="lightBlue" >
                       <Label x:Name="label1" HorizontalOptions="Center" TextColor="Red" VerticalOptions="Center" Text="{Binding Text}" />
                   </Grid>
               </DataTemplate>
           </scheduler:SchedulerTimelineView.TimeRegionTemplate>
        </scheduler:SchedulerTimelineView>
      </scheduler:SfScheduler.TimelineView>
    </scheduler:SfScheduler>

    The following code shows, how to use the TimeRegions property of SchedulerTimeSlotView in the SfScheduler.

    # [C#](#tab/tabid-17)
    this.Scheduler.View = SchedulerView.Week;
    this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion();
    this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
    private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
    {
       var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
       var timeRegion = new SchedulerTimeRegion()
       {
           StartTime = DateTime.Today.Date.AddHours(13),
           EndTime = DateTime.Today.Date.AddHours(14),
           Text = "Lunch",
           EnablePointerInteraction = false,
       };
    timeRegions.Add(timeRegion);
    return timeRegions;
    }

    The following code used to configure the time region template using the Microsoft.Maui.Controls.DataTemplateSelector.

    # [DataTemplateSelector](#tab/tabid-18)
    public class TimeRegionTemplateSelector : DataTemplateSelector
    {
       public TimeRegionTemplateSelector()
       {
       }
       public DataTemplate TimeRegionsTemplate { get; set; }
       public DataTemplate TimeRegionsTemplate1 { get; set; }
       protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
       {
           var timeRegionDetails = item as SchedulerTimeRegion;
           if (timeRegionDetails.EnablePointerInteraction)
                 return TimeRegionsTemplate;
            return TimeRegionsTemplate1;
       }
    }
    # [Resources](#tab/tabid-19)
    <ContentPage.Resources>
     <DataTemplate x:Key="timeRegiontemplate">
       <Grid Background = "LightCyan" Opacity="0.5">
           <Label x:Name="label" HorizontalOptions="Center" TextColor="Red" Text="{Binding Text}" VerticalOptions="Center" />
       </Grid>
     </DataTemplate>
     <DataTemplate x:Key="timeRegiontemplate1">
       <Grid Background = "Lightgreen" Opacity="0.5">
           <Label x:Name="label" HorizontalOptions="Center" TextColor="Orange" Text="{Binding Text}" VerticalOptions="Center" />
       </Grid>
     </DataTemplate>
     <local:TimeRegionTemplateSelector x:Key="timeRegionTemplateSelector"  TimeRegionsTemplate="{StaticResource timeRegiontemplate}"  TimeRegionsTemplate1="{StaticResource timeRegiontemplate1}" />
    </ContentPage.Resources>
    #[MainPage](#tab/tabid-20)
    <scheduler:SfScheduler x:Name="Scheduler"
                          View="Week">
     <scheduler:SfScheduler.DaysView>
       <scheduler:SchedulerDaysView TimeRegionTemplate = "{StaticResource timeRegionTemplateSelector}"/>
     </scheduler:SfScheduler.DaysView>
     <scheduler:SfScheduler.TimelineView>
         <scheduler:SchedulerTimelineView TimeRegionTemplate = "{StaticResource timeRegionTemplateSelector}"/>
      </scheduler:SfScheduler.TimelineView>
    </scheduler:SfScheduler>
    # [C#](#tab/tabid-21)
     this.Scheduler.View = SchedulerView.Week;
     this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion();
     this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
     private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
     {
       var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
       var timeRegion = new SchedulerTimeRegion()
       {
           StartTime = DateTime.Today.Date.AddHours(13),
           EndTime = DateTime.Today.Date.AddHours(14),
           Text = "Lunch",
           RecurrenceRule = "FREQ=DAILY;INTERVAL=1",
           EnablePointerInteraction = true,
       };
       var timeRegion1 = new SchedulerTimeRegion()
       {
           StartTime = DateTime.Today.Date.AddHours(17),
           EndTime = DateTime.Today.Date.AddHours(18),
           Text = "Break",
           RecurrenceRule = "FREQ=DAILY;INTERVAL=1",
           Background = Brush.Red,
           EnablePointerInteraction = false,
      };
     timeRegions.Add(timeRegion);
     timeRegions.Add(timeRegion1);
     return timeRegions;
    }

    TimeRulerTextStyle

    Gets or sets the style of time ruler text, that used to customize the text color, font, font size, font family and font attributes.

    Declaration
    public SchedulerTextStyle TimeRulerTextStyle { get; set; }
    Property Value
    Type Description
    SchedulerTextStyle
    Remarks

    This property will be applicable to Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views.

    Examples

    The below examples shows, how to use the TimeRulerTextStyle of the SchedulerTimeSlotView in the SfScheduler.

    var timeRulerTextStyle = new SchedulerTextStyle()
    {
        TextColor = Colors.Red,
        FontSize = 12,
    };
    this.Scheduler.DaysView.TimeRulerTextStyle = timeRulerTextStyle;
    this.Scheduler.TimelineView.TimeRulerTextStyle = timeRulerTextStyle;
    See Also
    TimeRulerWidth
    TimeRulerHeight

    ViewHeaderSettings

    Gets or sets the properties which allows to customize all the properties of view header in the SfScheduler.

    Declaration
    public SchedulerViewHeaderSettings ViewHeaderSettings { get; set; }
    Property Value
    Type Description
    SchedulerViewHeaderSettings
    Remarks

    The DateFormat property doesn't applicable when the scheduler view set as Month.

    Examples

    The below examples shows, how to use the ViewHeaderSettings of the SfScheduler.

    this.Scheduler.MonthView.ViewHeaderSettings.DayFormat = "dddd";
    this.Scheduler.DaysView.ViewHeaderSettings.DayFormat = "dddd";
    this.Scheduler.TimelineView.ViewHeaderSettings.DayFormat = "dddd";
    this.Scheduler.DaysView.ViewHeaderSettings.DateFormat = "dd";
    this.Scheduler.TimelineView.ViewHeaderSettings.DateFormat = "MMMM dd";
    var dateTextStyle = new SchedulerTextStyle()
    {
        TextColor = Colors.Red,
        FontSize = 12,
    };
    this.Scheduler.DaysView.ViewHeaderSettings.DateTextStyle = dateTextStyle;
    this.Scheduler.TimelineView.ViewHeaderSettings.DateTextStyle = dateTextStyle;
    var dayTextStyle = new SchedulerTextStyle()
    {
        TextColor = Colors.Red,
        FontSize = 12,
    };
    this.Scheduler.MonthView.ViewHeaderSettings.DayTextStyle = dayTextStyle;
    this.Scheduler.DaysView.ViewHeaderSettings.DayTextStyle = dayTextStyle;
    this.Scheduler.TimelineView.ViewHeaderSettings.DayTextStyle = dayTextStyle;

    ViewHeaderTemplate

    Gets or sets the view header template to customize the default UI.

    Declaration
    public DataTemplate ViewHeaderTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.DataTemplate
    Remarks

    The BindingContext of the ViewHeaderTemplate is the System.DateTime. The SelectableDayPredicate, MinimumDateTime, and MaximumDateTime of date and time values can be used directly in data template selector.

    Examples

    The following code used to configure the header view using the Microsoft.Maui.Controls.DataTemplate.

    # [Resources](#tab/tabid-14)
    <ContentPage.Resources>
    <DataTemplate x:Key="dayViewHeaderTemplate">
       <StackLayout x:Name="stackLayout" Orientation="Vertical" Background="lightBlue" >
          <Label x:Name="label" HorizontalOptions="Center"  VerticalOptions="Center" Text="{Binding StringFormat='{0:dd}'}"  TextColor="Red" >
               <Label.Triggers>
                   <DataTrigger TargetType = "Label" Binding="{Binding}" Value="{x:Static system:DateTime.Today}">
                       <Setter TargetName = "label" Property="TextColor" Value="Orange"/>
                   </DataTrigger>
               </Label.Triggers>
           </Label>
           <Label x:Name="label1" HorizontalOptions="Center"  VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}"  TextColor="Red" >
               <Label.Triggers>
                   <DataTrigger TargetType = "Label" Binding="{Binding}" Value="{x:Static system:DateTime.Today}">
                       <Setter TargetName = "label1" Property="TextColor" Value="Orange"/>
                   </DataTrigger>
               </Label.Triggers>
           </Label>
           <StackLayout.Triggers>
               <DataTrigger TargetType = "StackLayout" Binding="{Binding}" Value="{x:Static system:DateTime.Today}">
                   <Setter TargetName = "stackLayout" Property="Background" Value="LightGreen"/>
              </DataTrigger>
           </StackLayout.Triggers>
       </StackLayout>
     </DataTemplate>
     <DataTemplate x:Key="timelineViewHeaderTemplate">
       <Grid x:Name="grid" Background="lightBlue" >
           <Label x:Name="label" HorizontalOptions="Start" VerticalOptions="Center"  TextColor="Red" >
               <Label.Text>
                   <MultiBinding StringFormat = "{}{0:dd} {1:ddd}" >
                      <Binding />
                       <Binding />
                   </MultiBinding >
               </Label.Text >
               <Label.Triggers >
                   <DataTrigger TargetType="Label" Binding="{Binding}" Value="{x:Static system:DateTime.Today}">
                       <Setter TargetName = "label" Property="TextColor" Value="Orange"/>
                   </DataTrigger>
               </Label.Triggers>
           </Label>
           <Grid.Triggers>
               <DataTrigger TargetType = "Grid" Binding="{Binding}" Value="{x:Static system:DateTime.Today}">
                   <Setter TargetName = "grid" Property="Background" Value="LightGreen"/>
               </DataTrigger>
           </Grid.Triggers>
       </Grid>
    </DataTemplate>
    </ContentPage.Resources>
    #[MainPage](#tab/tabid-15)
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    <scheduler:SfScheduler x:Name="Scheduler"
                          View="Week">
      <scheduler:SfScheduler.DaysView>
         <scheduler:SchedulerDaysView ViewHeaderTemplate = "{StaticResource dayViewHeaderTemplate}"/>
      </scheduler:SfScheduler.DaysView>
     <scheduler:SfScheduler.TimelineView>
       <scheduler:SchedulerTimelineView ViewHeaderTemplate = "{StaticResource timelineViewHeaderTemplate}"/>
    </scheduler:SfScheduler.TimelineView>
    </scheduler:SfScheduler>
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved