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
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.
Arsalan
Developer Advocate
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'
// }
},
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
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,
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
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