How to customize the horizontal month view days name in EJMVC Scheduler?
This knowledge base article explains the way to customize the horizontal month view days name.
Step 1: Create an MVC application with default scheduler code example by referring the following knowledge base link.
https://www.syncfusion.com/kb/3606/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application
Also, define the scheduler with QueryCellInfo client-side event as shown below.
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.CurrentDate(new DateTime(2016, 11, 18))
.Orientation(Orientation.Horizontal)
.CurrentView(CurrentView.Month)
.ScheduleClientSideEvents(evt => evt.QueryCellInfo("nameCustomization"))
.AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource)
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
Step 2: Within the QueryCellInfo event of scheduler, header cells can be accessed where default day name is customized as shown below.
function nameCustomization(args) {
var obj = $("#Schedule1").data("ejSchedule");
if (args.requestType == "headerdate" && obj.currentView() == "month") {
if (args.element[0].firstChild.getAttribute("title") === "Thursday")
args.element[0].children[0].innerHTML = "TH";
}
}
Step 3: Run the sample, default Thursday name T is customized to TH as shown below.
Figure 1: Schedule displaying with customized day name.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1173655827
