How to customize the text in the appointment bar Scheduler

[Syncfusion Support]

Answer:

We can customize appointment bar text color using OnEventRendered method. Refer to the code snippet.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="550px" SelectedDate="@(new DateTime(2019, 1, 9))" CurrentView="View.Month">

<ScheduleEventSettings DataSource="@DataSource">ScheduleEventSettings>

<ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered">ScheduleEvents>

EjsSchedule>

@code{

public string[] CustomClass1 = { "custom-class1" };

public string[] CustomClass2 = { "custom-class2" };

public void OnEventRendered(EventRenderedArgs args)

{

if (args.Data.Country == "India")

{

args.Element.AddClass(CustomClass1);

}

else

{

args.Element.AddClass(CustomClass2);

}

}

List DataSource = new List

{

new AppointmentData { Id = 1, Subject = "Meeting-1", StartTime = new DateTime(2019, 1, 6, 9, 30, 0) , EndTime = new DateTime(2019, 1, 6, 11, 0, 0), Country= "India", Location = "Capital of India" },

new AppointmentData { Id = 2, Subject = "Meeting-2", StartTime = new DateTime(2019, 1, 6, 9, 30, 0) , EndTime = new DateTime(2019, 1, 6, 11, 0, 0), Country= "France", Location = "Capital of France" },

new AppointmentData { Id = 3, Subject = "Meeting-3", StartTime = new DateTime(2019, 1, 8, 9, 30, 0) , EndTime = new DateTime(2019, 1, 8, 11, 0, 0), Country= "India", Location = "Chennai" }

};

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 Country { get; set; }

public bool IsAllDay { get; set; }

public string RecurrenceRule { get; set; }

public string RecurrenceException { get; set; }

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

}

}

<style>

.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.custom-class1,

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.custom-class1,

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

background: blue;

}

.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.custom-class2,

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.custom-class2,

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

background: green;

}

style>

Find the sample to customize the text in the appointment bar Scheduler from here.