Class ScheduleViewTimeScale

A class that represents the view-specific time scale configurations by rendering ScheduleViewTimeScale as child content in ScheduleView tag.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
ScheduleViewTimeScale
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Schedule
Assembly: Syncfusion.Blazor.dll
Syntax
public class ScheduleViewTimeScale : SfDataBoundComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

You can configure the view wise time scale by specifying values for the corresponding properties. Timescale can be applied for Day, Week, WorkWeek, TimelineDay, TimelineWeek and TimelineWorkWeek views.

Examples

The following code example shows how to configure the view wise time scale:

<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Day">
            <ScheduleViewTimeScale Enable="true" Interval="60" SlotCount="6"></ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.Week">
                <ScheduleViewTimeScale Enable="false"></ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.TimelineWorkWeek">
            <ScheduleViewTimeScale Enable="true" Interval="30" SlotCount="3"></ScheduleViewTimeScale>
        </ScheduleView>
    </ScheduleViews>
</SfSchedule>

Constructors

ScheduleViewTimeScale()

Declaration
public ScheduleViewTimeScale()

Properties

ChildContent

Gets or sets the child content of schedule view-specific timescale.

Declaration
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragment

The value used to build the content.

Enable

Gets or sets a value indicating whether the schedule should display the appointments accurately against the exact time duration.

Declaration
[Parameter]
public bool Enable { get; set; }
Property Value
Type Description
bool

If set to false, all the appointments of a day will be displayed one below the other. The default value is true.

Interval

Gets or sets the time duration on which the time axis should be displayed, either in 1 hour or 30 minutes intervals, etc.

Declaration
[Parameter]
public int Interval { get; set; }
Property Value
Type Description
int

The interval value in minutes. The default value is 60.
Remarks

This property will have an effect when the Enable property is set to true.

MajorSlotTemplate

Gets or sets template as a RenderFragment<TValue> that defines custom appearance for displaying the major time slot cells.

Declaration
[Parameter]
public RenderFragment<TemplateContext> MajorSlotTemplate { get; set; }
Property Value
Type Description
RenderFragment<TemplateContext>

A template content that specifies the visualization of major time slot cells. The default value is null.
Remarks

The time details can be accessed within this template. This property will have an effect when the Enable property is set to true.

Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Day" Interval="30" SlotCount="3">
            <ScheduleViewTimeScale>
                <MajorSlotTemplate>
                    <div>@(GetMajorSlotTemplate((context as TemplateContext).Date))</div>
                </MajorSlotTemplate>
            </ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.Week">
            <ScheduleViewTimeScale>
                <MajorSlotTemplate>
                    <div>@(GetMajorSlotTemplate((context as TemplateContext).Date))</div>
                </MajorSlotTemplate>
            </ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code{
    public static string GetMajorSlotTemplate(DateTime date)
    {
        return date.ToString("hh", CultureInfo.InvariantCulture);
    }
}

MinorSlotTemplate

Gets or sets template as a RenderFragment<TValue> that defines custom appearance for displaying the minor time slot cells.

Declaration
[Parameter]
public RenderFragment<TemplateContext> MinorSlotTemplate { get; set; }
Property Value
Type Description
RenderFragment<TemplateContext>

A template content that specifies the visualization of minor time slot cells. The default value is null.
Remarks

The time details can be accessed within this template. This property will have an effect when the Enable property is set to true.

Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleViews>
        <ScheduleView Option="View.Day">
            <ScheduleViewTimeScale Interval="30" SlotCount="3">
                <MinorSlotTemplate>
                    <div style="text-align: right; margin-right: 15px">@(GetMinorSlotTemplate((context as TemplateContext).Date))</div>
                </MinorSlotTemplate>
            </ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.Week">
            <ScheduleViewTimeScale>
                <MinorSlotTemplate>
                    <div style="text-align: right; margin-right: 15px">@(GetMinorSlotTemplate((context as TemplateContext).Date))</div>
                </MinorSlotTemplate>
            </ScheduleViewTimeScale>
        </ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
@code{
    public static string GetMinorSlotTemplate(DateTime date)
    {
        return date.ToString("mm", CultureInfo.InvariantCulture);
    }
}

SlotCount

Gets or sets the number of slots to be split for the specified time interval duration.

Declaration
[Parameter]
public int SlotCount { get; set; }
Property Value
Type Description
int

The number of slots to be split. The default value is 2.
Remarks

This property will have an effect when the Enable property is set to true.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

OnInitializedAsync()

Initializes the ScheduleViewTimeScale component during the component initialization phase.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A task representing the asynchronous operation.
Overrides
Remarks

This method performs the following initialization tasks:

  • Calls the base OnInitializedAsync method
  • Updates the parent ScheduleView component with the ScheduleViewTimeScale configuration
  • Caches the current values of all time scale properties for change detection
  • Determines if this view is the active view based on the parent view's Option or IsSelected properties
  • Sets the TimeScale configuration on the parent schedule's ActiveViewOptions if this is the active view
  • Triggers a state change notification in the parent schedule

OnParametersSetAsync()

Handles parameter changes for the ScheduleViewTimeScale component.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
Task

A task representing the asynchronous operation.
Overrides
Remarks

This method is called whenever component parameters change. It performs the following operations:

  • Calls the base OnParametersSetAsync method
  • Detects changes in all time scale properties (Enable, Interval, SlotCount)
  • Updates the cached property values when changes are detected
  • Updates the DirectParameters dictionary with changed properties
  • Notifies the parent schedule component of property changes

Implements