Our powerful JS Calendar component


Post by tmcuong »

I want to custom header in calendar with mode Week as my layout. How can I do.

week.png
week.png (10.09 KiB) Viewed 917 times

Thanks


Post by Animal »


Post by tmcuong »

I do as guide It show like picture below:

week.PNG
week.PNG (29.68 KiB) Viewed 903 times

I need It has layout like this picture like where I drawn oval in black color

week1.png
week1.png (14.45 KiB) Viewed 903 times

Post by Animal »

Configure the allDayEvents with a dayCellRenderer which looks a little like this:

    dayCellRenderer(cellData) {
        const
            { date, day, tomorrow }  = cellData,
            ret = [{
                className : 'b-day-name-day',
                html      : DH.getDayShortName(day)
            }, {
                className : 'b-day-name-date',
                html      : date.getDate()
            },
               getAdditionalChildDomConfig(cellData) //<- Implement this to add extra
                                                     // It can return null or a DomConfig
                                                     // object for an extra element
            ];

        if (this?.dayTime?.startShift) {
            ret[0].html += `-${DH.getDayShortName(tomorrow.getDay())}`;
            ret[1].html += `-${tomorrow.getDate()}`;
        }

        return ret;
    }

Post by Animal »

It should be a little bit easier, here's an FR ticket: https://github.com/bryntum/support/issues/3934


Post by tmcuong »

I do as you guide, here is my code, but it show error. can you guide me more detail.

week2.PNG
week2.PNG (24.31 KiB) Viewed 897 times

Post by Animal »

Configure it with a property of a configuration object. In the same way as everything is configured.


Post by Animal »

OK, I have created a dayHeaderRenderer concept, so the example which demonstrates it looks like this:

Screenshot 2021-12-22 at 18.23.05.png
Screenshot 2021-12-22 at 18.23.05.png (144 KiB) Viewed 889 times

The code will be

week : {
    dayHeaderRenderer(dayHeaderDomConfig, cellData) {
        // Add extra element on special date
        if (!(cellData.date - new Date(2020, 9, 14))) {
            dayHeaderDomConfig.children.push({
                cls  : 'b-highlight-day',
                text : '\u26F3 Day off'
            });
        }
    }
}

Post by tmcuong »

I do as your guide but it does not display anything.
Pls see my code in picture below

calendat 2812.PNG
calendat 2812.PNG (32.01 KiB) Viewed 861 times

Post by Animal »

Caching issue? Because that's what this example uses: https://bryntum.com/examples/calendar/custom-rendering/


Post Reply