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.
Support Forum
YearView has a dayCellRenderer
, so with a little hacking I was able to make this:
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;
}
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.