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 : Element, IThemeElement

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
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;

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);

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;

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;

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;

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";

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
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
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;

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

Class SchedulerTimeSlotView

Inheritance

Namespace: Syncfusion.Maui.Scheduler

Assembly: Syncfusion.Maui.Scheduler.dll

Syntax

Constructors

SchedulerTimeSlotView()

Declaration

Fields

AppointmentTemplateProperty

Declaration

Field Value

CurrentTimeIndicatorBrushProperty

Declaration

Field Value

EndHourProperty

Declaration

Field Value

MinimumAppointmentDurationProperty

Declaration

Field Value

NonWorkingDaysProperty

Declaration

Field Value

NumberOfVisibleDaysProperty

Declaration

Field Value

ShowCurrentTimeIndicatorProperty

Declaration

Field Value

StartHourProperty

Declaration

Field Value

TimeFormatProperty

Declaration

Field Value

TimeIntervalProperty

Declaration

Field Value

TimeRegionsProperty

Declaration

Field Value

TimeRegionTemplateProperty

Declaration

Field Value

TimeRulerTextStyleProperty

Declaration

Field Value

ViewHeaderSettingsProperty

Declaration

Field Value

ViewHeaderTemplateProperty

Declaration

Field Value

Properties

AppointmentTemplate

Declaration

Property Value

Remarks

Examples

CurrentTimeIndicatorBrush

Declaration

Property Value

Remarks

Examples

EndHour

Declaration

Property Value

Remarks

Examples

See Also

MinimumAppointmentDuration

Declaration

Property Value

Remarks

Examples

See Also

NonWorkingDays

Declaration

Property Value