Styling class for events in Month and Agenda tabs

[tripti.v]

Hi, I am trying to add styling classes to specific events in Month and Agenda tabs dynamically while loading the data. But I am unable to do so. Here is an example of my requirement. Could you please help me out if there is a way to do achieve this. Thanks in advance

[ghulam.ghous]

Please use eventRenderer available on each mode: https://bryntum.com/products/calendar/docs/api/Calendar/widget/MonthView#config-eventRenderer

The code snippet in the docs is bit incorrect, we will fix that. Here is the correct code snippet:

    modes : {
        month : {
            eventRenderer(e) {
                e.renderData.cls['bg-cls'] = true;
            }
        },
        agenda : {
            eventRenderer(e) {
                // add your conditional logic here
                e.renderData.cls['bg-cls'] = true;
            }
        }
    },

and the css:

		.bg-cls .b-cal-event {
			background-color: red;
		}

Does this help?

[tripti.v]

Thank you! This seems to be working only when the class was newly created the way you mentioned, but if it was added to the event through backend, it isn't showing its styling till I add eventColor styling to it. Anyway, I figured out how to use the fix to work it out to my liking, appreciate the help

Could you please help with adding font-colour/font-weight to the text of the event selected in the Month View/Agenda View? Currently when an event is selected, I can see that the text changes colour to "White" which makes it less readable. Is there anyway I can change it to back and make it bold when the event is selected or hovered over? I have added a screenshot of how it looks as of now. Thanks in advance!

[ghulam.ghous]

Hey,

For that please open chrome dev tools inspect the required css classes and override them in your css. For example, the background color changes when the event is selected in Day Mode. Just override this class:

.b-dayview-day-container .b-cal-event-wrap.b-selected:not(.b-dragging-item):hover .b-cal-event-body, .b-dayview-day-container .b-cal-event-wrap.b-selected:not(.b-dragging-item) .b-cal-event-body {
background-color: red;
color: red
}

and for hover:

.b-dayview-day-container .b-cal-event-wrap:hover .b-cal-event-body {
    background-color: red;
    color: red;
}

Hope this helps.

[tripti.v]

Thank you, that worked. Sorry for the late update