How to customize the format of date range display in the schedule header bar?
The following steps shows how to customize the header date range display.
Step 1: Create a scheduler default sample using the below link.
https://help.syncfusion.com/js/schedule/getting-started
Step 2: Bind the create and actionComplete event as shown below,
var scheduleData = [{
Id: 1,
Subject: "Music Class",
StartTime: new Date("2018/3/26 06:00 AM"),
EndTime: new Date("2018/3/26 07:00 AM")
}, {
Id: 2,
Subject: "School",
StartTime: new Date("2018/3/27 9:00 AM"),
EndTime: new Date("2018/3/27 02:30 PM")
}];
$(function () {
$("#Schedule1").ejSchedule({
currentDate: new Date(2018, 2, 26),
width: "100%",
height: "525px",
appointmentSettings: {
applyTimeOffset: false,
dataSource: scheduleData,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
},
create: "OnCustom",
actionComplete: "OnComplete"
});
});
Step 2: Define the create event function OnCustom on which we can check the currentView value and modify the header date range format based on view. The following code example shows the logic.
function OnCustom() {
var schArgs = $("#Schedule1").ejSchedule("instance");
var html = schArgs._getCurrentDateHeaderValue();
if (schArgs.currentView() == "week" || schArgs.currentView() == "workweek" || schArgs.currentView() == "agenda") {
var newHtml = html.split(" ")[html.split(" ").length-1] + " " + html.replace(html.split(" ")[html.split(" ").length-1], "").trim();
schArgs.element.find(".e-datedisplay").html(newHtml);
}
else if (schArgs.currentView() == "day") {
for (var i = 0; i < schArgs.dateRender.length; i++) {
temp = ej.format(new Date(schArgs.dateRender[i]), "MM-dd-yyyy dddd");
$(".e-datedisplay").html(temp);
}
}
else {
var Month = html.split(" ")[0];
var Year = html.split(" ")[1];
var newFormat = Year + " " + Month;
schArgs.element.find(".e-datedisplay").html(newFormat);
}
}
Step 3: Define the actionComplete event function OnComplete on which we can check the navigation type value and call the OnCustom function to display the customize date header properly after changing the view or date. The following code example shows the logic.
function OnComplete(args) {
if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate")
OnCustom();
}
Sample: https://jsplayground.syncfusion.com/wlztgkcn
Step 4: Run the above sample and the customized header date range format will be displayed as shown below.
Figure 1: Customized date header format in Day view
Figure 2: Customized date header format in Week view
Figure 3: Customized date header format in Work Week view
Figure 4: Customized date header format in Month view
Figure 5: Customized date header format in Agenda view
