Our powerful JS Calendar component


Post by accounts@projul.com »

HI, I want to show the events on calendar year view as colorful dots based on the color of task. Can you let me know is it something supported or somehow I can achieve this.

Attachments
calendar_year_dots.png
calendar_year_dots.png (89.19 KiB) Viewed 621 times

Post by Animal »

YearView has a dayCellRenderer, so with a little hacking I was able to make this:

Screenshot 2022-09-14 at 15.32.37.png
Screenshot 2022-09-14 at 15.32.37.png (186.64 KiB) Viewed 587 times

Configure the year view like this:

     modes : {
        year : {
            dayCellRenderer({ cellConfig, date, events}) {
                const eventEls = [];

            for (let i = 0; i < Math.min(events.length, 3); i++) {
                const eventDomConfig = this.createEventDomConfig({
                    eventRecord : events[i],

                    // Makes event body a solid block of colour
                    isAllDay    : true
                });

                // No inner content, we just want background colour
                delete eventDomConfig.children[0].children;
                eventEls.push(eventDomConfig);
            }
            return date.getDate() + DomHelper.createElement({
                className : 'b-cal-event-bar-container',
                children  : eventEls
            }).outerHTML;
        }
    }
 }
 

And some custom CSS:

.b-yearview-content .b-calendar-cell .b-calendar-cell-inner {
	position       : relative;
}
.b-yearview .b-cal-event-wrap {
    position      : static !important;
    height        : 5px;
    width         : 5px;
    border-radius : 50%;
    padding       : 0!important;
}
.b-yearview .b-cal-event {
    padding       : 0;
}
.b-yearview .b-cal-event-bar-container {
	position        : absolute;
	bottom          : 0;
	width           : 100%;
	display         : flex;
    flex-flow       : row;
    justify-content : center;
    column-gap      : 2px;
}
.b-yearview-content .b-calendar-cell {
    background-color : unset !important;
}

Post by Animal »

Though you are aware that the Year View offers a overflow popup the same as Month View? You can always see what's in there:

Screenshot 2022-09-14 at 15.44.29.png
Screenshot 2022-09-14 at 15.44.29.png (48.68 KiB) Viewed 587 times

Post by Animal »

I added a FR ticket: https://github.com/bryntum/support/issues/5234

If we get more votes for this it could be built in as an option.


Post by accounts@projul.com »

Thank you for the detailed explanation, For the method createEventDomConfig i am unable to find it's reference can you share that as well.


Post by mats »


Post Reply