[ANGULAR] Agenda Mode - Description Rendering.

[maushami]

How can I customize the description rendering for different agenda lists views, specifically for the month list, day list, and week list? I’ve attempted to use the description renderer function, but it only changes the description uniformly across all three lists.

[Animal]

Your descriptionRenderer function just has to return the value that you want to see,

[maushami]

The code snippet below handles the custom rendering of descriptions in agenda mode:

descriptionRenderer() {
    const now = this.date;
    const year = now.getFullYear();
    const month = now.getMonth();
    const firstDateNum = now.getDate() - now.getDay();
    const firstDate = new Date(year, month, firstDateNum);
    const lastDate = new Date(year, month, firstDateNum + 6);
    

return (firstDate.getFullYear() == lastDate.getFullYear() ?
    DateHelper.format(firstDate, 'MMM D') + ' - ' +
    (firstDate.getMonth() == lastDate.getMonth() ? DateHelper.format(lastDate, 'D')
        : DateHelper.format(lastDate, 'MMM D')) + ', ' + DateHelper.format(firstDate, 'Y')
    : DateHelper.format(firstDate, 'MMM-D, Y') + ' - ' +
    (firstDate.getMonth() == lastDate.getMonth() ? DateHelper.format(lastDate, 'D') : DateHelper.format(lastDate, 'MMM-D, Y')));
}

This code currently sets the description for all ranges (day, month, and year) to the same format, such as "Aug 25 - 31, 2024."

However, I want to customize the description for the three different ranges as follows:

Day Range: "Aug 25, 2024. 7 Events."
Week Range: "Week 35, Aug 25 - 31, 2024. 20 Events."
Month Range: "Aug 2024. 30 Events."

Could you please assist me in achieving this result?

[ghulam.ghous]

Hi there,

You can conditionally return the specific values from the description renderer based on the range unit values i.e. for day agenda view, for week agenda view... You can get the current agenda view unit value by doing this.range.unit in the description renderer and for visible events count, you can try this.eventCount and all should be working. Can you please try this and let us know if this helps.

https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#property-eventCount
https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView#config-range

Screenshot 2024-08-27 at 10.51.54 AM.png (449.84 KiB) Viewed 138 times

Regards,
Ghous

[Animal]

Huge cascades of ternaries are unmaintainable

I'd suggest

    descriptionRenderer() {
        switch (this.range.unit) {
            case 'day':
                return '';
            case 'week':
                return '';
            case 'month':
                return '';
            case 'year':
                return '';
            case 'decade':
                return '';
        }
     }

[maushami]

"Thank you so much, Ghulam and Aniaml. Your suggestion worked perfectly! By using the switch cases with this.range.unit(view._range.unit), I was able to achieve the different descriptions needed for the various views in agenda mode."