)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize the format of date range display in the schedule header bar?

Platform: jQuery |
Control: ejSchedule |
Published Date: July 3, 2018 |
Last Revised Date: May 24, 2019

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: http://jsplayground.syncfusion.com/wlztgkcn

 

Step 4: Run the above sample and the customized header date range format will be displayed as shown below.

Customized date header format in Day view

Figure 1: Customized date header format in Day view

 

Customized date header format in Week view

Figure 2: Customized date header format in Week view

Customized date header format in Work Week view

Figure 3: Customized date header format in Work Week view

Customized date header format in Month view

Figure 4: Customized date header format in Month view

Customized date header format in Agenda view

Figure 5: Customized date header format in Agenda view

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon