Default scheduler templates

[Mark Palmer]

Hello There, 

Would it be possible to get both the markup and code behind of the default templates in the scheduler as I would like to slightly change these templates.  The other examples I have seen seem to be fairly old and the markup generated has changed since then.

Current Version: 29.2.5

Regards, 

Mark

[Vijay Ravi]

Hi Mark,

We have reviewed and validated your reported query. However, the details provided are not entirely clear. Could you please clarify what specific customization you are expecting using the default Scheduler template? If you are looking to modify the default UI through templates, we can guide you accordingly.

To better understand your requirement, we kindly request you to share more detailed information, preferably along with a sample image or visual reference illustrating the expected customization.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#properties

Regards,

Vijay

  

[Mark Palmer]

Hi Vijay, 

I want to keep the same look and feel as the default templates (and the same markup) and just add some additional information to the tooltips or add an additional field to the editor template (e.g the subject field will be replaced with an event type dropdown).  I'm finding I have to recreate all the functionality myself (IsAllDay / Timezone checkbox event handling, date validation) so it would be nice to use your default templates as a reference and modify them to suit my needs.

Regards, 

Mark

[Vijay Ravi]

Hi Mark,

Based on your requirement, we have prepared a sample demonstrating how to customize the editor template using the EditorTemplate property. The customization follows the structure of the default editor window, with the inclusion of default fields as well as an additional custom field. For example, the Subject field is replaced with an Event Type dropdown. Additionally, you can customize the tooltip using the TooltipTemplate. Refer the below shared code snippet, sample and documentation for your reference.

Sample link: https://blazorplayground.syncfusion.com/rZhSjyrnKDiaPFJd

EditorTemplate UG: Editor Window Customization in Blazor Scheduler Component | Syncfusion

Tooltip template UG: Appointments in Blazor Scheduler Component | Syncfusion

{index.razor]
 

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">

    <ScheduleTemplates>

        <EditorTemplate>

            @{

                var con = context as AppointmentData;

                <table class="custom-event-editor" width="100%" cellpadding="5">

                    <tbody>

                        <tr>

                            <td colspan="8">

                                <SfDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" @bind-Value="@((context as AppointmentData).EventType)">

                                    <DropDownListFieldSettings Value="Id"></DropDownListFieldSettings>

                                </SfDropDownList>

                            </td>

                        </tr>

                        @if (con.IsAllDay)

                        {

                            <tr>

                                <td colspan="4">

                                    <SfDatePicker ID="@nameof(AppointmentData.StartTime)" CssClass="e-field" TValue="DateTime" @bind-Value=con.StartTime Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                </td>

                                <td colspan="4">

                                    <SfDatePicker ID="@nameof(AppointmentData.EndTime)"  CssClass="e-field" TValue="DateTime" @bind-Value=con.EndTime Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                </td>

                            </tr>

                        }

                        else

                        {

                            <tr>

                                <td colspan="4">

                                    <SfDateTimePicker ID="@nameof(AppointmentData.StartTime)" CssClass="e-field" TValue="DateTime" @bind-Value=con.StartTime Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                </td>

                                <td colspan="4">

                                    <SfDateTimePicker ID="@nameof(AppointmentData.EndTime)" CssClass="e-field" TValue="DateTime" @bind-Value=con.EndTime Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                </td>

                            </tr>

                        }

                        <tr>

                            <td colspan="4">

                                <SfCheckBox ID="@nameof(AppointmentData.IsAllDay)" @bind-Checked="con.IsAllDay" CssClass="e-field" Label="All Day"></SfCheckBox>

                                <SfCheckBox ID="@nameof(AppointmentData.TimeZone)" @bind-Checked="con.TimeZone" CssClass="e-field" Label="Time Zone"></SfCheckBox>

                            </td>

                        </tr>

                        @if (con.TimeZone)

                        {

                            <tr>

                                <td colspan="4">

                                    <SfDropDownList TValue="string" ID="@nameof(AppointmentData.StartTimeZone)" CssClass="e-field" TValue="string" @bind-Value="con.StartTimeZone" Placeholder="Start Time Zone" FloatLabelType="FloatLabelType.Always" TItem="DropDownData" DataSource="@TimezoneData">

                                        <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>

                                    </SfDropDownList>

                                </td>

                                <td colspan="4">

                                    <SfDropDownList TValue="string" ID="@nameof(AppointmentData.EndTimeZone)" CssClass="e-field" TValue="string" @bind-Value="con.EndTimeZone" Placeholder="End Time Zone" FloatLabelType="FloatLabelType.Always" TItem="DropDownData" DataSource="@TimezoneData">

                                        <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>

                                    </SfDropDownList>

                                </td>

                            </tr>

                        }

                        <tr>

                            <td colspan="8">

                                <SfRecurrenceEditor CssClass="e-field" @bind-Value="con.RecurrenceRule"></SfRecurrenceEditor>

                            </td>

                        </tr>

                        <tr>

                            <td colspan="8">

                                <SfTextBox ID="@nameof(AppointmentData.Description)" CssClass="e-field e-input" Value="@con.Description" Placeholder="Description" FloatLabelType="FloatLabelType.Always" Multiline="true"></SfTextBox>

                            </td>

                        </tr>

                    </tbody>

                </table>

            }

        </EditorTemplate>

    </ScheduleTemplates>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

</SfSchedule>

Output screenshot:

 

Don't hesitate to get in touch if you require further help or more information.
 

Regards,

Vijay

[Mark Palmer]

HI Vijay, 

Thanks for this.  It would be nice to include the base templates in the documentation or How To somewhere so that anyone looking to customise these aspects of the component have a solid starting point and don't have to search forum posts, etc looking for solutions.

Thanks again for your help.

Regards,

Mark

[Vijay Ravi]

Hi Mark,

Thanks for the update. We are glad you achieved your requirements. Let us know if you need any further assistance.

Regards,
Vijay

[Mark Palmer]

HI Vijay, 

I have noticed that the start date / end date validation (end date > start date) does not occur when running your sample (I'm experiencing the same behaviour in my solution).

Regards, 

Mark 

[Vijay Ravi]

Hi Mark, 
 

We have checked and validated your reported query. When using a custom editor window to customize the editor, the default validation popups will not be applied. If you require a validation popup, we suggest handling it manually by opening a custom dialog popup within the OnPopupClose event of the Scheduler. Please refer to the sample shared below for your reference.

OnpopupClose event api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose

Sample link: https://blazorplayground.syncfusion.com/LtheNoqtJfWyJNSs
 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay