Full date range in Single Day View

[Michael Scola]

I've been looking through the documentation, and I see that I can manipulate the header, but in day view it only ever shows that single day. Is there a way to still show the full week in the day view in the header, and in the body still show the selected day?

Where it says Sat 7, I'd like it to show the full week like if you were in week view, and when you click the day it takes you to that 

[Swathi Ravi]

Hi Michael,

Sample: https://stackblitz.com/edit/fhmjzk-6qowzj?file=index.js

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

You can show the date range in header like the week view in the day view by using the Scheduler’s dateRangeTemplate, as shown in the below shared snippet.

window.getDateRange = function (value) {

    return value.toLocaleString('en-us', { month: 'short' }) + ' ' + value.getDate() + ', ' +value.getFullYear();

};

 

var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    height: '550px',

    views: ['Day'],

    dateRangeTemplate: '<div class="date-text">${getDateRange(data.startDate)}-${getDateRange(new Date(data.startDate.setDate(data.startDate.getDate() + 6)))}</div>',

});

scheduleObj.appendTo('#Schedule');

Regards,

Swathi Ravi

[Michael Scola]

Thank you for he response, but that's not quite right. I'm not trying to manipulate the date range header, I'm trying to manipulate the dateHeaderTemplate area to show the entire week (so you can click any day of that week from the header and it will show the day quickly).

[Swathi Ravi]

Michael,

You can achieve this by using the dateHeaderTemplate like the below shared snippet.

Sample: https://stackblitz.com/edit/ej2-js-schedule-day-view-header-like-the-week-vie-9tdiki?file=index.js

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

Demo: https://ej2.syncfusion.com/javascript/demos/#/material3/schedule/date-header-template.html

[index.js]

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

window.getDateHeaderText = function (value) {

    return value.toLocaleString('en-us', { month: 'short' }) + ' ' + value.getDate() + ', ' + value.getFullYear();

};

const monthMap = {

    "Jan": 0,

    "Feb": 1,

    "Mar": 2,

    "Apr": 3,

    "May": 4,

    "Jun": 5,

    "Jul": 6,

    "Aug": 7,

    "Sep": 8,

    "Oct": 9,

    "Nov": 10,

    "Dec": 11

};

 

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

var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    height: '650px',

    dateHeaderTemplate: '<div style="display: flex;"><div class="date-text">${getDateHeaderText(data.date)}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="date-text">${getDateHeaderText(new Date(data.date.setDate(data.date.getDate() + 1)))}</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>',

    views: ['Day'],

    selectedDate: new Date(2021, 0, 10),

    eventSettings: { dataSource: data },

    cssClass: 'schedule-date-header-template',

    cellClick: function (args) {

        if (args.element.classList.contains('e-header-cells')) {

            args.cancel = true;

            const dateString = args.event.target.innerHTML;

            const dateParts = dateString.split(" ");

            const month = monthMap[dateParts[0]];

            const day = parseInt(dateParts[1]);

            const year = parseInt(dateParts[2]);

            scheduleObj.selectedDate = new Date(year, month, day);

        }

    }

});

scheduleObj.appendTo('#Schedule');