[REACT] change date format and display time in header

[venugopal]

Hi

I don't know how to change the date display like below:

the header of calendar

need to change date format and display time

from Mar 09, 2024 (week 10)

to Mar 03 - Mar 09, 2024 , IST

calendar.png (16.75 KiB) Viewed 317 times

[khattakdev]

Hey there,

For that you can use https://bryntum.com/products/calendar/docs/api/Scheduler/view/mixin/Describable#config-descriptionRenderer.

You can define custom title for every mode as following:

        modes : {
            month : {
                descriptionRenderer() {
                    // Describe your custom format
                },
            }
        }

Please view Custom Rendering example to see it in action.

[venugopal]

can u give brief information
below my code please check
try above code but not working

modes: {
        month : {
            descriptionRenderer() {
                // Describe your custom format
            },
        },
        agenda: {
            title: 'Agenda',
        },

    // Remove year and month view completely
    year: null,
    month: null,
    // Add an event list. This type of view is not included by default
    // list: {
    //     range: 'month'
    // }
},

[Animal]

How do you mean "not working"?

You have not implemented any functionality. It doesn't return any content.

Screenshot 2024-03-06 at 12.51.40.png (94.88 KiB) Viewed 282 times

[ghulam.ghous]

Hi there,

You can check our online example here https://bryntum.com/products/calendar/examples/custom-rendering/ where the following code is working.

        modes : {
            month : {
                descriptionRenderer() {
                    const
                        eventsInView = this.eventStore.records.filter(eventRec => DateHelper.intersectSpans(this.startDate, this.endDate, eventRec.startDate, eventRec.endDate)).length,
                        startWeek = this.month.getWeekNumber(this.startDate),
                        endWeek = this.month.getWeekNumber(this.endDate);

                // We describe the month in terms of its week range in our app
                return `Week ${startWeek[1]} ${startWeek[0]} - ${endWeek[1]} ${endWeek[0]} (${eventsInView} event${eventsInView === 1 ? '' : 's'})`;
            },

            
        },

Hope it helps!

Regards,
Ghous

[venugopal]

can u see my requirement

I don't know how to change the date display like below:

the header of calendar

need to change date format and display time

from Mar 09, 2024 (week 10)

to Mar 03 - Mar 09, 2024 , IST

put code but not working see below image and code

 modes: {

        month : {
            descriptionRenderer() {
                const
                    // eslint-disable-next-line no-undef
                    eventsInView = this.eventStore.records.filter(eventRec => DateHelper.intersectSpans(this.startDate, this.endDate, eventRec.startDate, eventRec.endDate)).length,
                    startWeek = this.month.getWeekNumber(this.startDate),
                    endWeek = this.month.getWeekNumber(this.endDate);

            // We describe the month in terms of its week range in our app
            return `Week ${startWeek[1]} ${startWeek[0]} - ${endWeek[1]} ${endWeek[0]} (${eventsInView} event${eventsInView === 1 ? '' : 's'})`;
        },


    },

    agenda: {
        title: 'Agenda',
    },

    // Remove year and month view completely
    year: null,

[ghulam.ghous]

I think issue here is, you are in week view but in code you are only modifying the header of calendar in the month view. You need to do it for week view as well. Try this:

 modes: {

    week : {
        descriptionRenderer() {
            const
                // eslint-disable-next-line no-undef
                eventsInView = this.eventStore.records.filter(eventRec => DateHelper.intersectSpans(this.startDate, this.endDate, eventRec.startDate, eventRec.endDate)).length,
                startWeek = this.month.getWeekNumber(this.startDate),
                endWeek = this.month.getWeekNumber(this.endDate);

        // We describe the month in terms of its week range in our app
        return `Week ${startWeek[1]} ${startWeek[0]} - ${endWeek[1]} ${endWeek[0]} (${eventsInView} event${eventsInView === 1 ? '' : 's'})`;
    },


},

agenda: {
    title: 'Agenda',
},

// Remove year and month view completely
year: null,

Hope it helps!

Regards,
Ghous

[venugopal]

this works fine but date format showing in wrong ,
please check below screen shot my requirement showing

from
Mar 09, 2024 (week 10)

to
Mar 03 - Mar 09, 2024 , IST

week: {
        descriptionRenderer() {
            const eventsInView = this.eventStore.records.filter(

            eventRec => DateHelper.intersectSpans(
                this.startDate, this.endDate,
                eventRec.startDate, eventRec.endDate
            )
        ).length;

        // Format the start date and end date in the desired format

        const startDateFormatted = DateHelper.format(this.startDate, 'MMM DD');

        const endDateFormatted = DateHelper.format(this.endDate, 'MMM DD, YYYY');

        // Get the time zone abbreviation (e.g., IST)
        const timeZoneAbbreviation = new Date().toLocaleTimeString('en-us', { timeZoneName: 'short' }).split(' ')[2];

        // Construct the description string with the formatted date range and time zone abbreviation
        return `${startDateFormatted} - ${endDateFormatted}, ${timeZoneAbbreviation} (${eventsInView} event${eventsInView === 1 ? '' : 's'})`;
    },
},

    agenda: {
        title: 'Agenda',
    },

i written some code getting below error ,please check above code

Config.js:68 Uncaught ReferenceError: DateHelper is not defined
    at Config.js:68:1
    at Array.filter (<anonymous>)
    at WeekView.descriptionRenderer [as _descriptionRenderer] (Config.js:68:1)
    at WeekView.callback (calendar.module.js:2407:1)
    at WeekView.get (calendar.module.js:126699:1)
    at _Calendar.updateViewDescription (calendar.module.js:172638:1)
    at _Calendar.onViewRefresh (calendar.module.js:172770:1)
    at WeekView.trigger (calendar.module.js:5021:1)
    at WeekView.doRefresh (calendar.module.js:167026:1)
    at WeekView.refreshNow (calendar.module.js:161599:1)
    at WeekView.callback (calendar.module.js:2407:1)
    at WeekView.whenVisible (calendar.module.js:40016:1)
    at WeekView.refresh (calendar.module.js:161595:1)
    at WeekView.refreshSoon [as refreshSoonNow] (calendar.module.js:162034:1)
    at WeekView.<anonymous> (calendar.module.js:15390:1)
    at WeekView.invoker (calendar.module.js:14732:1)
    at calendar.module.js:15124:1

[marcio]

Hey venugopal,

You need to import DateHelper from @bryntum/calendar package:

import { DateHelper } from '@bryntum/calendar';