menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ScheduleTemplates - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class ScheduleTemplates

    A class that represents the template configurations on SfSchedule<TValue> component.

    Inheritance
    System.Object
    ScheduleTemplates
    Namespace: Syncfusion.Blazor.Schedule
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class ScheduleTemplates : OwningComponentBase

    Constructors

    ScheduleTemplates()

    Declaration
    public ScheduleTemplates()

    Properties

    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

    In the below code example, cell header were customized using CellHeaderTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <CellHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd", CultureInfo.InvariantCulture))
            </CellHeaderTemplate>
        </ScheduleTemplates>
    </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

    In the below code example, work cells were customized using CellTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <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>
        </ScheduleTemplates>
    </SfSchedule>

    ChildContent

    Gets or sets the child content of schedule templates.

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

    The value used to build the content.

    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

    In the below code example, date header cells were customized using DateHeaderTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <DateHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd ddd", CultureInfo.InvariantCulture))
            </DateHeaderTemplate>
        </ScheduleTemplates>
    </SfSchedule>

    DateRangeTemplate

    Gets or sets the header date range template for customizing the header date range.

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

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

    Remarks

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

    Examples

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

     
    <SfSchedule>
        <ScheduleTemplates>
            <DateRangeTemplate>
                @((context as DateRangeTemplateContext).StartDate.ToString("dd ddd", CultureInfo.InvariantCulture))
            </DateRangeTemplate>
        </ScheduleTemplates>
    </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

    In the below code example, day header cells were customized using DayHeaderTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <DayHeaderTemplate>
                @((context as TemplateContext).Date.ToString("dd", CultureInfo.InvariantCulture))
            </DayHeaderTemplate>
        </ScheduleTemplates>
    </SfSchedule>

    EditorFooterTemplate

    Gets or sets the Microsoft.AspNetCore.Components.RenderFragment for customizing the footer of the editor window.

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

    Accepts a Microsoft.AspNetCore.Components.RenderFragment as a template for the footer of the editor window.

    Remarks

    The parameters passed to the templates can be accessed using an implicit parameter named context, which is of type SfSchedule<TValue> object.

    Examples

    In the below code example, editor footer was customized using EditorFooterTemplate within ScheduleTemplates tag directive.

      
    <SfSchedule> 
        <ScheduleTemplates> 
            <EditorFooterTemplate> 
               <button id="saveButton" class="e-control e-btn e-primary" data-ripple="true">Save</button>
            </EditorFooterTemplate> 
        </ScheduleTemplates> 
    </SfSchedule> 
    @code{ 
        public class AppointmentData 
        { 
            public int Id { get; set; } 
            public string Subject { get; set; } 
            public DateTime StartTime { get; set; } 
            public DateTime EndTime { get; set; } 
        } 
    } 

    EditorHeaderTemplate

    Gets or sets the Microsoft.AspNetCore.Components.RenderFragment for customizing the header of the editor window.

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

    Accepts a Microsoft.AspNetCore.Components.RenderFragment as a template for the header of the editor window.

    Remarks

    The parameters passed to the templates can be accessed using an implicit parameter named context, which is of type SfSchedule<TValue> object.

    Examples

    In the below code example, editor header was customized using EditorHeaderTemplate within ScheduleTemplates tag directive.

      
    <SfSchedule> 
        <ScheduleTemplates> 
            <EditorHeaderTemplate> 
               @((context as AppointmentData).Subject) 
            </EditorHeaderTemplate> 
        </ScheduleTemplates> 
    </SfSchedule> 
    @code{ 
        public class AppointmentData 
        { 
            public int Id { get; set; } 
            public string Subject { get; set; } 
            public DateTime StartTime { get; set; } 
            public DateTime EndTime { get; set; } 
        } 
    } 

    EditorTemplate

    Gets or sets the editor template for customizing the editor window.

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

    Accepts a template for the editor window.

    Remarks

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

    Examples

    In the below code example, editor content were customized using EditorTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <EditorTemplate>
                <table class="custom-event-editor" width="100%" cellpadding="5">
                    <tbody>
                        <tr>
                            <td class="e-textlabel">Summary</td>
                            <td colspan="4">
                                <SfTextBox @bind-Value="@((context as AppointmentData).Subject)"></SfTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="e-textlabel">From</td>
                            <td colspan="4">
                                <SfDateTimePicker @bind-Value="@((context as AppointmentData).StartTime)"></SfDateTimePicker>
                            </td>
                        </tr>
                        <tr>
                            <td class="e-textlabel">To</td>
                            <td colspan="4">
                                <SfDateTimePicker @bind-Value="@((context as AppointmentData).EndTime)"></SfDateTimePicker>
                            </td>
                        </tr>
                    </tbody>
                </div>
            </EditorTemplate>
        </ScheduleTemplates>
    </SfSchedule>
    @code{
        public class AppointmentData
        {
            public int Id { get; set; }
            public string Subject { get; set; }
            public DateTime StartTime { get; set; }
            public DateTime EndTime { get; set; }
        }
    }

    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

    In the below code example, header indent(element type should be of EmptyCells) were customized using HeaderIndentTemplate within ScheduleTemplates tag directive.

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

    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

    In the below code example, year view month header cells were customized using MonthHeaderTemplate within ScheduleTemplates tag directive.

     
    <SfSchedule>
        <ScheduleTemplates>
            <MonthHeaderTemplate>
                @((context as TemplateContext).Date.ToString("MMMM yyyy", CultureInfo.InvariantCulture))
            </MonthHeaderTemplate>
        </ScheduleTemplates>
    </SfSchedule>

    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

    In the below code example, resource cells were customized using ResourceHeaderTemplate within ScheduleTemplates tag directive.

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

    Methods

    Dispose(Boolean)

    Dispose unmanaged resources in the Syncfusion Blazor component.

    Declaration
    protected override void Dispose(bool disposing)
    Parameters
    Type Name Description
    System.Boolean disposing

    Boolean value to dispose the object.

    OnInitializedAsync()

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type
    System.Threading.Tasks.Task
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved