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.
Unfortunately, activation email could not send to your email. Please try again.

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: http://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

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8906 07/03/2018 07/03/2018 JavaScript ejSchedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.