Class ScheduleView

Configures the view-specific settings on scheduler.

Inheritance
System.Object
SfBaseComponent
SfDataBoundComponent
ScheduleView
Inherited Members
Namespace: Syncfusion.Blazor.Schedule
Assembly: Syncfusion.Blazor.dll
Syntax
public class ScheduleView : SfDataBoundComponent
Remarks

You can configure the collection of schedule views by specifying values for the corresponding properties with in the ScheduleViews tag directive.

Examples

The following code example shows how to configure the views in scheduler:

<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

Constructors

ScheduleView()

Declaration
public ScheduleView()

Properties

AllowVirtualScrolling

Gets or sets a value indicating whether to allow the virtual scrolling functionality.

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

true to enable virtual scrolling. The default value is false.
Remarks

This property is applicable only when resource grouping is enabled, and in agenda view resource grouping should be disabled. It is mandatory to set the Height property for schedule, when enable AllowVirtualScrolling property.

CellHeaderTemplate

Gets or sets the cell header template for customizing the work cells header on the scheduler.

Declaration
public RenderFragment<TemplateContext> CellHeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the work cells header text in the scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext. This template is applicable for Month, MonthAgenda, Year and TimelineYear views.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Month">
            <CellHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd", CultureInfo.InvariantCulture))
            </CellHeaderTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

CellTemplate

Gets or sets the cell template for customizing the work cells on the scheduler.

Declaration
public RenderFragment<TemplateContext> CellTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the work cells in the scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Month">
            <CellTemplate>
                <div class="templatewrap">
                    @if ((int)(context as TemplateContext).Date.Month == 11 && (int)(context as TemplateContext).Date.Day == 23)
                    {
                        <div class="caption">Thanksgiving day</div>
                    }
                    @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 9)
                    {
                        <div class="caption">Party time</div>
                    }
                </div>
            </CellTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

ChildContent

Gets or sets the child content for schedule view.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The value used to build the content.

DateFormat

Gets or sets the date format that should be applied on header date range label and also in editor window.

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

Accepts a string value to set specific date format. By default DateFormat is applied based on the current culture.

DateHeaderTemplate

Gets or sets the date header template for customizing the date header cells on the Scheduler.

Declaration
public RenderFragment<TemplateContext> DateHeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the date header text in the Scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <DateHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd ddd", CultureInfo.InvariantCulture))
            </DateHeaderTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

DateRangeTemplate

Gets or sets the header date range template to customize header date range.

Declaration
public RenderFragment<DateRangeTemplateContext> DateRangeTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<DateRangeTemplateContext>

Accepts the template of the header date range text in the Scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type DateRangeTemplateContext.

Examples

In the below code example, a date range template has been rendered using DateRangeTemplate within ScheduleViews tag directive.

 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <DateRangeTemplate>
                @((context as DateRangeTemplateContext).StartDate.ToString("dd ddd", CultureInfo.InvariantCulture))
            </DateRangeTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

DayHeaderTemplate

Gets or sets the day header template for customizing the day header cells on the scheduler year view.

Declaration
public RenderFragment<TemplateContext> DayHeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the day header text in the scheduler year view.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Year">
            <DayHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd", CultureInfo.InvariantCulture))
            </DayHeaderTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

DisplayDate

Gets or sets the starting week date at an initial rendering of month view.

Declaration
public Nullable<DateTime> DisplayDate { get; set; }
Property Value
Type Description
System.Nullable<System.DateTime>

It accepts System.DateTime value. The default value is null.
Remarks

DisplayDate property is only applicable for month view. If this property value is not set, then the month view will be rendered from the first week of the month.

Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
       <ScheduleView Option="View.Month" NumberOfWees="6" DisplayDate="new DateTime(2021, 11, 17)"></ScheduleView>
   </ScheduleViews>
</SfSchedule>

DisplayName

Gets or sets the display name for customized views in the schedule toolbar.

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

Accepts a string value. The default value is null.
Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Week" Interval="2" DisplayName="2Weeks"></ScheduleView>
        <ScheduleView Option="View.Week" Interval="3" DisplayName="3Weeks"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

EnableLazyLoading

Gets or sets whether to enable the lazy loading of events for virtual scrolling actions.

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

true to enable lazy loading of appointments. The default value is false.
Remarks

Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection. New data is fetched on-demand as the user scrolls through the schedule content. This helps to improve the scheduler's performance, when loading a large number of appointments.

Examples
<SfSchedule TValue="EventData" Width="100%" Height="600px">
   <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
   <ScheduleResources>
       <ScheduleResource TItem = "ResourceData" TValue="int[]" DataSource="@ResourceDatasource" Field="ResourceId" Title="Resource" Name="Resources" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
   </ScheduleResources>
   <ScheduleViews>
       <ScheduleView Option="View.TimelineMonth" AllowVirtualScrolling="true" EnableLazyLoading="true"></ScheduleView>
   </ScheduleViews>
</SfSchedule>

EnableVirtualMask

Gets or sets the virtual mask to the work cells for virtual scrolling actions.

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

true to enable virtual mask. The default value is false.
Remarks

This property is applicable only when AllowVirtualScrolling property is enabled. The Virtual Mask allows it to render only work cells visible within the view-port without buffering the entire resource collection. Here, same set of DOM elements is re-used to improve the performance. In this feature, a loading placeholder indicator was shown while loading the new data.

Examples
<SfSchedule TValue="EventData" Width="100%" Height="600px">
   <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
   <ScheduleResources>
       <ScheduleResource TItem = "ResourceData" TValue="int[]" DataSource="@ResourceDatasource" Field="ResourceId" Title="Resource" Name="Resources" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
   </ScheduleResources>
   <ScheduleViews>
       <ScheduleView Option="View.TimelineMonth" AllowVirtualScrolling="true" EnableVirtualMask="true"></ScheduleView>
   </ScheduleViews>
</SfSchedule>

EndHour

Gets or sets the time string in short skeleton format HH:mm, which represents the end of the schedule hour.

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

A string value representing the time. The default value is 24:00.
Remarks

The time beyond the specified end time is hidden when this property is used.

EventTemplate

Gets or sets template as a Microsoft.AspNetCore.Components.RenderFragment that defines custom appearance for displaying scheduler events.

Declaration
public RenderFragment<object> EventTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

A template content that specifies the visualization of a scheduler event. The default value is null.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <EventTemplate>
                <div>Subject: @((context as AppointmentData).Subject)</div>
                <div>StartTime: @((context as AppointmentData).StartTime)</div>
                <div>EndTime:  @((context as AppointmentData).EndTime)</div>
            </EventTemplate>
        </ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings TValue="AppointmentData" DataSource="@DataSource"></ScheduleEventSettings>
</SfSchedule>
@code{
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = DateTime.Today.Date.AddHours(9).AddMinutes(30), EndTime = DateTime.Today.Date.AddHours(11) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

FirstDayOfWeek

Gets or sets the first day of the week.

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

An integer value representing the first day of the week., By default 0 value is set which is denoted as Sunday.

FirstMonthOfYear

Gets or sets the first month of the year.

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

An integer value representing the month. The default value is 1, which denotes January.
Remarks

The value 1 denotes January, 2 denotes February and so on.

HeaderIndentTemplate

Gets or sets the header indent template for customizing the header indent bar on the scheduler.

Declaration
public RenderFragment<TemplateContext> HeaderIndentTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the header indent bar in the scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.Week">
            <HeaderIndentTemplate>
                <div class='e-week-number'>@(GetWeekNumber((context as TemplateContext).Date))</div>
            </HeaderIndentTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code {
    public int GetWeekNumber(DateTime date)
    {
        CultureInfo culture = CultureInfo.CurrentCulture;
        return culture.Calendar.GetWeekOfYear(date, CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Monday);
    }
}

HeaderRows

Gets or sets a collection of custom header rows to display the year, month, week, date and hour label as an individual row on the timeline view of the scheduler.

Declaration
public List<HeaderRowsModel> HeaderRows { get; set; }
Property Value
Type Description
System.Collections.Generic.List<HeaderRowsModel>

Accepts a collection HeaderRowsModel.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
       <ScheduleView Option="View.TimelineWeek">
            <ScheduleHeaderRows>
                <ScheduleHeaderRow Option="HeaderRowType.Week">
                    <Template>
                        <div class="week-text">Week: @(GetWeekText((context as TemplateContext).Date))</div>
                    </Template>
                </ScheduleHeaderRow>
                <ScheduleHeaderRow Option="HeaderRowType.Date"></ScheduleHeaderRow>
            </ScheduleHeaderRows>
        </ScheduleView>
   </ScheduleViews>
</SfSchedule>
@code {
    public static string GetWeekText(DateTime date)
    {
        return CultureInfo.InvariantCulture.Calendar.GetWeekOfYear(date, CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Monday).ToString();
    }
}

Interval

Gets or sets the number of days, weeks, workweeks or months on the defined view type.

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

Accepts an integer value. The default value is 1.

IsSelected

Gets or sets whether the view specified in the Option is active or not.

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

true, to set the view as active view to be rendered on the scheduler. The default value is false.
Remarks

This property will similar to the CurrentView property, which sets the active view of the scheduler.

MaxEventsPerRow

Gets or sets the maximum number of events that will be rendered in a row when the EnableAutoRowHeight property is disabled.

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

An integer value representing the maximum number of events. The default value is 1.

MonthHeaderTemplate

Gets or sets the month header template for customizing the month header cells on the scheduler year view.

Declaration
public RenderFragment<TemplateContext> MonthHeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the month header text in the scheduler year view.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleViews>
        <ScheduleView Option="View.TimelineYear">
            <MonthHeaderTemplate>
                @((context as TemplateContext).Date.ToString("MMMM yyyy", CultureInfo.InvariantCulture))
            </MonthHeaderTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

NumberOfWeeks

Gets or sets the number of weeks that is shown in the month view.

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

The number of weeks shown in the month view. The default is derived from number of weeks in current month.
Remarks

NumberOfWeeks property is only applicable for month view. Use DisplayDate property to customize the starting week of month.

Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
       <ScheduleView Option="View.Month" NumberOfWees="6"></ScheduleView>
   </ScheduleViews>
</SfSchedule>

Option

Gets or sets the name of the schedule view, which determines its related properties.

Declaration
public View Option { get; set; }
Property Value
Type Description
View

One of the View enumeration.
Remarks

Depending on the value of View, the following views will be rendered:

Orientation

Gets or sets whether the timeline year view rendering orientation on the schedule should be horizontal or vertical.

Declaration
public Orientation Orientation { get; set; }
Property Value
Type Description
Orientation

One of the Orientation enumeration. The default value is Horizontal.

Readonly

Gets or sets a value whether the scheduler view is set to read-only.

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

If set to true, the scheduler will be read-only. The default value is false
Remarks

When read-only is enabled, the quickpopup in cells will be prevented and CRUD operations will not be possible in the scheduler. Only the specified view will be set to read-only.

ResourceHeaderTemplate

Gets or sets the resource header template for customizing the resource header cells on the scheduler.

Declaration
public RenderFragment<TemplateContext> ResourceHeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TemplateContext>

Accepts a template for the resource cells in the scheduler.
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context, which is of type TemplateContext.

Examples
 
<SfSchedule>
    <ScheduleGroup Resources="@Resources"></ScheduleGroup>
    <ScheduleViews>
        <ScheduleView Option="View.TimelineYear">
            <ResourceHeaderTemplate>
                @{
                    var resourceData = (context as TemplateContext).ResourceData as ResourceData;
                    <div class='template-wrap'>
                        <div class="resource-name">@(resourceData.Text)</div>
                    </div>
                }
            </ResourceHeaderTemplate>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code{
    string[] Resources { get; set; } = { "Conferences" };
    public class ResourceData
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }
}

ShowWeekend

Gets or sets whether non-working days are hidden from the scheduler.

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

If set to false, weekend days will be hidden. The default value is true.
Remarks

Days that are not defined in the WorkDays property are typically treated as weekend days. This property has no effect on the WorkWeek, Year and TimelineYear views. For example, if the working days are defined as new int[] { 1, 3, 5 }, the remaining days of that week will be considered as weekend days and will not be rendered if this property is set to false.

ShowWeekNumber

Gets or sets the week number of the current view date range is displayed.

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

If set to true, the week number will be shown. The default value is false.
Remarks

This property has an effect on Day, Week, WorkWeek, Month and Year views of scheduler.

StartHour

Gets or sets the time string in short skeleton format HH:mm, which represents the start of the schedule hour.

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

A string value representing the time. The default value is 00:00.
Remarks

The time before the specified start time is hidden when this property is used.

VirtualResourceCount

Gets or sets the number of resources to be renders only in the content viewport.

Declaration
public Nullable<int> VirtualResourceCount { get; set; }
Property Value
Type Description
System.Nullable<System.Int32>

Accepts a value of integer type. The default value is null.
Remarks

VirtualResourceCount property is only applicable for resources virtual scrolling in timeline views. If this property value is not set, then the number of resources to be displayed in the scheduler is determined implicitly by height of the content area. The provided count must be two times larger than the number of visible resources in the scheduler.

Examples
<SfSchedule TValue="EventData" Height="550px">
   <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
   <ScheduleResources>
       <ScheduleResource TItem = "ResourceData" TValue="int[]" DataSource="@ResourceDatasource" Field="ResourceId" Title="Resource" Name="Resources" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
   </ScheduleResources>
   <ScheduleViews>
       <ScheduleView Option="View.TimelineMonth" AllowVirtualScrolling="true" VirtualResourceCount="20"></ScheduleView>
   </ScheduleViews>
</SfSchedule>
See Also

WorkDays

Gets or sets the working days on the schedule.

Declaration
public int[] WorkDays { get; set; }
Property Value
Type Description
System.Int32[]

An array of integer values based on the System.DayOfWeek enumeration.
Remarks

The defined days in the collection will be rendered in the WorkWeek view. In other views, all usual days will be displayed, and working days will be highlighted with a different shade.

Examples

In below code example Monday, Wednesday and Friday were set as workdays for week view.

<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
       <ScheduleView Option="View.Week" WorkDays="new int[] { 1, 3, 5 }"></ScheduleView>
   </ScheduleViews>
</SfSchedule>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides