How to add Save button in FooterTemplate in Scheduler?

[Syncfusion Support]

Answer:

We can add Save button in custom FooterTemplate of Scheduler QuickInfoTemplate by formed the “AppointmentData” based on the quick Popup values and passed those values as a parameter of scheduler AddEvent method which creates a new appointment.

@usingSyncfusion.EJ2.Blazor.Schedule

@usingSyncfusion.EJ2.Blazor.Inputs

@usingSyncfusion.EJ2.Blazor.Buttons

<EjsSchedule@ref="ScheduleObj"TValue="AppointmentData"Height="550px"SelectedDate="@(newDateTime(2019, 1, 31))">

<ScheduleQuickInfoTemplatesTemplateType="TemplateType.Cell">

<HeaderTemplate>

<divclass="e-cell-header">

<divclass="e-header-icon-wrapper">

<EjsButtonCssClass="e-round"IconCss="e-icons e-close-icon"OnClick="OnQuickInfoTemplateClose">EjsButton>

div>

div>

HeaderTemplate>

<ContentTemplate>

<divclass="e-cell-content">

<formclass="e-schedule-form">

<div>

<EjsTextBox@ref="TextBox1"Placeholder="Subject">EjsTextBox>

div>

<div>

<EjsTextBox@ref="TextBox2"Placeholder="Location">EjsTextBox>

div>

form>

div>

ContentTemplate>

<FooterTemplate>

<divclass="e-cell-footer">

<EjsButtonContent="Save"OnClick="SaveData">EjsButton>//To save appointment data

div>

FooterTemplate>

ScheduleQuickInfoTemplates>

<ScheduleEventSettingsDataSource="@DataSource">

<ScheduleEventsTValue="AppointmentData"OnCellClick="OnCellClickAction">ScheduleEvents>

ScheduleEventSettings>

EjsSchedule>

@code{

EjsSchedule ScheduleObj;

EjsTextBox TextBox1;

EjsTextBox TextBox2;

List DataSource =newList

{

newAppointmentData { Id = 1, Subject ="Meeting", StartTime =newDateTime(2019, 1, 31, 9, 30, 0) , EndTime =newDateTime(2019, 1, 31, 11, 0, 0), Description ="Discussion", OwnerId = 1 }

};

publicclassAppointmentData

{

publicintId {get;set; }

publicstringSubject {get;set; }

publicstringLocation {get;set; }

publicDateTime StartTime {get;set; }

publicDateTime EndTime {get;set; }

publicstringDescription {get;set; }

publicboolIsAllDay {get;set; }

publicstringRecurrenceRule {get;set; }

publicstringRecurrenceException {get;set; }

publicNullable<int> RecurrenceID {get;set; }

publicintOwnerId {get;set; }

}

publicvoidOnQuickInfoTemplateClose()

{

ScheduleObj.CloseQuickInfoPopup();// To close quick Popup

}

publicCellClickEventArgs CellClickData;

voidOnCellClickAction(CellClickEventArgs args)

{

CellClickData = args;

}

publicvoidSaveData()

{

AppointmentData AddData =newAppointmentData// new data formed based on the provided values of quick popup

{

Subject = TextBox1.Value,

Location = TextBox2.Value,

StartTime = CellClickData.StartTime,

EndTime = CellClickData.EndTime

};

ScheduleObj.AddEvent(AddData);

TextBox1.Value =" ";

TextBox2.Value =" ";

ScheduleObj.CloseQuickInfoPopup();

}

}

<style>

.e-plus-icon::before{

content:'\e7fc';

}

...

style>

Find the sample for to include Save button in custom FooterTemplate of Scheduler QuickInfoTemplater from here.