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. Image for the cookie policy date

dateRangeTemplate is not working


I am trying to modify the date range date format using dateRangeTemplate, unfortunately that is not working. I looked into the types definitions from node_modules folder but couldn't find there. I also tried to format date using actionBegin event's toolbarItemRendering requestType. I can provide html template there but the date is overwritten every time.

why dateRangeTemplate is not working and how can I format the date in the range using actionBegin event?


1 Reply 1 reply marked as answer

VR Vijay Ravi Syncfusion Team April 3, 2023 07:41 AM UTC

Hi Azadur,

Sample: https://stackblitz.com/edit/react-dpzwhu?file=index.js,index.css

ug: https://ej2.syncfusion.com/react/documentation/schedule/header-bar#customizing-the-date-range-text

We prepared a sample using the dateRangeTemplate for customizing date ranges, and it rendered as expected. Please try the shared sample above. If you are still facing issues, please provide the following information to help us provide a solution to your query as soon as possible.

- Can you please confirm that your scheduler package version is v.20.4.40 or above? We added support for the dateRangeTemplate from v.20.4.40. Please refer to the release notes (https://ej2.syncfusion.com/react/documentation/release-notes/20.4.40/?type=all#schedule ) for more information.

- Please try reproducing the issue in our shared sample.

- Please provide an issue-reproducing sample or the entire code snippet related to the schedule. 


function getDateRange(startDateendDate) {

        return instance.formatDate(startDate, { skeleton: 'yMd' }) + ' - ' + instance.formatDate(endDate, { skeleton: 'yMd' });


    function dateRangeTemplate(props) {

        return (<div>{getDateRange(props.startDateprops.endDate)}</div>);


    return (<ScheduleComponent width='100%' height='550px' dateRangeTemplate={dateRangeTemplate.bind(this)}>



Vijay Ravi

Marked as answer
Live Chat Icon For mobile
Up arrow icon