Search code examples
cssfullcalendarfullcalendar-5

What css can be used in FullCalendar 5?


I am trying to add css to my FullCAlendar 5 Events using 'classNames:'; e.g.,

classNames : cssItalic,

When I define the cssItalic css as:

.cssItalic {
    font-style: italic;
    font-weight: bold;
}

It works. However, when I change it to:

.cssItalic {
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

The underlining is not done (i.e., bold and italic work).

So, what css can be used with FullCalendar 5?

After further testing I found the the underline is shown in the list view however, not in the month, week and day views.


Solution

  • If you inspect the elements you're trying to underline, you'll notice that they have a style definition already:

    a:not([href]):not([tabindex]){
        color: inherit;
        text-decoration: auto;
    }
    

    Your problem is that .cssItalic is not as specific as the existing selector that sets text-decoration. This is why bold and italics still work, but underline does not for these elements.

    Your two options are: make the selector more specific, or use !important for the text-decoration rule.