How to add templates for appointments view in Scheduler

[Syncfusion Support]

Answer:

Templates can be applied to appointments either view-wise by using Template within ScheduleView tag helper or common to all views using Template within ScheduleEventSettings tag helper in the scheduler.

@using Syncfusion.EJ2.Blazor.Schedule

@using System.Globalization

<EjsSchedule TValue="AppointmentData" ModelType="@Model" Width="100%" Height="650px" SelectedDate="@(new DateTime(2019, 1, 7))">

<ScheduleViews>

<ScheduleView Option="View.Week">

<EventTemplate>

@{

var webinarData = (context as TemplateArgs);

<div class='template-wrap' style='background:@(webinarData.PrimaryColor)'>

<div class="subject">@(webinarData.Subject)div>

<div class="time">Time: @(getTimeString(webinarData.StartTime)) - @(getTimeString(webinarData.EndTime))div>

div>

}

EventTemplate>

ScheduleView>

<ScheduleView Option="View.Month">

<EventTemplate>

@{

var webinarData = (context as TemplateArgs);

<div class='template-wrap' style='background:@(webinarData.PrimaryColor)'>

<div class="subject">@(webinarData.Subject)div>

div>

}

EventTemplate>

ScheduleView>

<ScheduleView Option="View.TimelineWeek">

<EventTemplate>

@{

var webinarData = (context as TemplateArgs);

<div class='template-wrap' style='background:@(webinarData.PrimaryColor)'>

<div class="subject">@(webinarData.Subject)div>

div>

}

EventTemplate>

ScheduleView>

ScheduleViews>

<ScheduleEventSettings TValue="AppointmentData" DataSource="@DataSource">

ScheduleEventSettings>

EjsSchedule>

@code {

List DataSource = new List

{

new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2019, 1, 7, 11, 0, 0) , EndTime = new DateTime(2019, 1, 7, 12, 30, 0), PrimaryColor= "#47bb76" },

new AppointmentData { Id = 2, Subject = "vacation", StartTime = new DateTime(2019, 1, 8, 8, 30, 0) , EndTime = new DateTime(2019, 1, 8, 9, 30, 0), PrimaryColor= "#5d96db" },

new AppointmentData { Id = 6, Subject = "conference", StartTime = new DateTime(2019, 1, 11, 18, 0, 0) , EndTime = new DateTime(2019, 1, 11, 19, 30, 0), PrimaryColor= "#32cabe" }

};

public static string getTimeString(DateTime date)

{

return date.ToUniversalTime().ToString("HH:mm", CultureInfo.InvariantCulture);

}

public class TemplateArgs

{

public string Subject { get; set; }

public DateTime StartTime { get; set; }

public DateTime EndTime { get; set; }

public string Description { get; set; }

public string PrimaryColor { get; set; }

}

public class AppointmentData

{

public int Id { get; set; }

public string Subject { get; set; }

public string Location { get; set; }

public DateTime StartTime { get; set; }

public DateTime EndTime { get; set; }

public string Description { get; set; }

public string PrimaryColor { get; set; }

public bool IsAllDay { get; set; }

public string RecurrenceRule { get; set; }

public string RecurrenceException { get; set; }

public Nullable<int> RecurrenceID { get; set; }

}

public TemplateArgs Model = new TemplateArgs();

}

<style>

.e-schedule .e-vertical-view .e-content-wrap .e-appointment,

.e-schedule .e-month-view .e-content-wrap .e-appointment,

.e-schedule .e-timeline-view .e-content-wrap .e-appointment {

border-radius: 8px;

}

.e-schedule .e-month-view .e-appointment {

height: 30px;

}

.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {

padding: 0;

height: 100%;

}

.e-schedule .e-blazor-template {

height: 100%;

}

.e-schedule .template-wrap {

height: 100%;

white-space: normal;

}

.e-schedule .e-timeline-view .e-appointment .e-appointment-details {

padding: 0;

height: 100%;

width: 100%;

}

.e-schedule .e-timeline-view .e-blazor-template,

.e-schedule .e-month-view .e-blazor-template,

.e-schedule .e-timeline-view .template-wrap {

width: 100%;

}

.e-schedule .e-vertical-view .template-wrap .subject,

.e-schedule .e-month-view .template-wrap .subject {

font-size: 14px;

padding: 4px 6px 6px;

}

.e-schedule .e-vertical-view .template-wrap .time {

font-size: 12px;

padding: 4px 4px 4px;

}

.e-schedule .e-timeline-view .template-wrap .subject {

font-size: 16px;

height: 36px;

text-align: center;

}

style>

For the same templates for all the views please refer to the following UG.

https://ej2.syncfusion.com/blazor/documentation/schedule/appointments/#using-template

Find the sample to add templates for appointments view in Scheduler from here.