Page 1 of 1

[ANGULAR] Agenda Mode - Description Rendering.

Posted: Wed Aug 14, 2024 2:33 am
by 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.


Re: [ANGULAR] Agenda Mode - Description Rendering.

Posted: Wed Aug 14, 2024 7:17 am
by Animal

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


Re: [ANGULAR] Agenda Mode - Description Rendering.

Posted: Tue Aug 27, 2024 3:59 am
by 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?


Re: [ANGULAR] Agenda Mode - Description Rendering.

Posted: Tue Aug 27, 2024 7:55 am
by 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
Screenshot 2024-08-27 at 10.51.54 AM.png (449.84 KiB) Viewed 160 times

Regards,
Ghous


Re: [ANGULAR] Agenda Mode - Description Rendering.

Posted: Tue Aug 27, 2024 8:08 am
by 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 '';
        }
     }

Re: [ANGULAR] Agenda Mode - Description Rendering.

Posted: Thu Aug 29, 2024 3:19 am
by 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."