Class ScheduleQuickInfoTemplates

A class that represents the schedule quick popup templates in SfSchedule<TValue> component.

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

You can customize the header, content and footer of the quick popup individually or all combined together.

Examples

The following code example explains the cell quick popup customization using HeaderTemplate, ContentTemplate and FooterTemplate.

<SfSchedule TValue="AppointmentData">
    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Cell">
        <HeaderTemplate>
            <div class="quick-info-header">
                <div class="quick-info-header-content" style="align-items: center; color: #919191;">
                    <div class="quick-info-title">Add Appointment</div>
                </div>
            </div>
        </HeaderTemplate>
        <ContentTemplate>
            <div class="e-cell-content">
                <div class="content-area">
                    <input @bind="SubjectValue" type="text" />
                </div>
                <div class="content-area">
                    <input @bind="DescriptionValue" type="text" />
                </div>
            </div>
        </ContentTemplate>
        <FooterTemplate>
            <div class="cell-footer">
                <button class="e-btn e-primary" type="button" @onclick="(e => OnAdd(e, context as AppointmentData))">Add</button>
            </div>
        </FooterTemplate>
    </ScheduleQuickInfoTemplates>
</SfSchedule>
@code {
    private string SubjectValue { get; set; }
    private string DescriptionValue { get; set; }
    private void OnAdd(MouseEventArgs args, AppointmentData data)
    {
        // write custom code
    }
}

Constructors

ScheduleQuickInfoTemplates()

Declaration
public ScheduleQuickInfoTemplates()

Properties

ChildContent

Gets or sets the Child content of quick popup templates.

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

The value used to build the content.

ContentTemplate

Gets or sets template as a RenderFragment that defines custom appearance for displaying the content area of quick popup.

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

A template content that specifies the visualization of content area of quick popup. By default, null value is set.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Cell">
        <ContentTemplate>
            <div class="e-cell-content">
                <div class="content-area">
                    <input @bind="SubjectValue" type="text" />
                </div>
                <div class="content-area">
                    <input @bind="DescriptionValue" type="text" />
                </div>
            </div>
        </ContentTemplate>
    </ScheduleQuickInfoTemplates>
</SfSchedule>
@code {
    private string SubjectValue { get; set; }
    private string DescriptionValue { get; set; }
}

FooterTemplate

Gets or sets template as a RenderFragment that defines custom appearance for displaying the footer section of quick popup.

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

A template content that specifies the visualization of footer section of quick popup. By default, null value is set.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Event">
        <FooterTemplate>
            <div class="event-footer">
                <button class="e-btn e-primary" type="button" @onclick="(e => OnMoreDetailsClick(e, context as AppointmentData))">More Details</button>
                <button class="e-btn" type="button" @onclick="(e => OnDeleteClick(e, context as AppointmentData))">Delete</button>
            </div>
        </FooterTemplate>
    </ScheduleQuickInfoTemplates>
</SfSchedule>
@code {
    private void OnMoreDetailsClick(MouseEventArgs args, AppointmentData data)
    {
        // write code to open editor
    }
    private void OnDeleteClick(MouseEventArgs args, AppointmentData data)
    {
        // write code to delete the appointment
    }
}

HeaderTemplate

Gets or sets template as a RenderFragment that defines custom appearance for displaying the header section of quick popup.

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

A template content that specifies the visualization of header section of quick popup. By default, null value is set.
Examples
<SfSchedule TValue="AppointmentData">
    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Cell">
        <HeaderTemplate>
            <div class="quick-info-header">
                <div class="quick-info-header-content" style="align-items: center; color: #919191;">
                    <div class="quick-info-title">Add Appointment</div>
                </div>
            </div>
        </HeaderTemplate>
    </ScheduleQuickInfoTemplates>
</SfSchedule>

TemplateType

Gets or sets the template type to customize the quick popup, either as a cell or an event.

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

One of the TemplateType enumeration. By default Both value is set.

Methods

Dispose(bool)

Dispose unmanaged resources in the Syncfusion Blazor component.

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

Boolean value to dispose the object.
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
Task
Overrides

Implements