Styling a calendar event with a custom class

[nepatriot]

Hello,

I’ve created a custom calendar with a database source which is working nicely.

However, I need to apply a conditional class on certain events.

To start, I created a class “event-danger” and applied a red background/text for this:

Then, I make sure the class is applied to the Calendar source:

As far as I know, the calendar event should now have red background and text.

However, when looking at the event I get this:

Does anybody know to use a custom class to apply styling to a calendar event? Am I missing something?

[Teodor]

Have you checked:

Getting Started with App Connect Event Calendar

App Connect Event Calendar is a full-sized event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic events. Getting Started with the Event Calendar We’ll go through the basics of adding the calendar on the page, customizing it and adding static events. Adding App Connect Event Calendar on Your Page Click the add new element button: [Screenshot_1] Open Components and select Calendar: [Screensh…

[nepatriot]

@Teodor, thank you for the reply.

Yes I have checked it. I understand how to set a background color for the calendar event.

However, I need to dynamically set a background given a condition to alert the user this is the last event in a repeat. So I’m using class toggle for this. Before using the class toggle however, I thought it first made sense to ensure the class is working as expected.

But since I can’t get the class to display at all, I figure it won’t work in my conditional class toggle.

[Teodor]

You can see all the dynamic properties here, including class name:

You can use expressions there.

[nepatriot]

Thanks!

This is what I have so far and it doesn’t look right or work:

I am not sure how to use an expression to do a conditional statement: if 1 = red background, else = no change.

[nepatriot]

Here is how to do create an if/then within an expression:
Within the expression in Code view (not Design) for bg color:
field_name == ‘Something’ ? ‘red’ : ‘blue’