How to Customize Header Dates in Javascript Scheduler?

This article explains how to Customize Header Dates in Javascript Scheduler. To customize the header dates in the JavaScript Scheduler, use the dateHeaderTemplate as demonstrated in the code snippet below. This method allows you to format the header dates according to your preferences.

[index.js]

var instance = new ej.base.Internationalization();

window.getTimeString = function (value) {
    return instance.formatDate(value, { skeleton: 'hm' });
};

window.getDateHeaderText = function (value) {
    var dayOfWeek = instance.formatDate(value, { skeleton: 'E' });
    var dayOfMonth = instance.formatDate(value, { skeleton: 'd' });
    return dayOfWeek + '
' + dayOfMonth;
};

var data = new ej.base.extend([], window.resourceData.concat(window.timelineResourceData), null, true);

var scheduleOptions = {
    dateHeaderTemplate: ' ${getDateHeaderText(data.date)}'
};

Refer to the working sample for additional details and implementation: Hljfpb (forked) - StackBlitz.

Refer the dateHeaderTemplate customization UG: https://ej2.syncfusion.com/javascript/documentation/schedule/header-bar#using-date-header-template

Conclusion:

We hope you enjoyed learning about how to Customize Scheduler Header Dates in JavaScript Scheduler.

You can refer to our JavaScript Scheduler control feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!