Change background colors of Month Day Week button views when active

Question

I am working on an ASP.NEt MVC application (visual studio 2022 for mac) with Fullcalendar 6.1.4 . I would like to change the background-color of the "Month" "Week" "Day" fc-button of my fullcalendar once clicked. I was able to change their color using the :hover or :disabled css method but nothing happens with the :active method (:focus did not work too). Do you have any idea ? Many thanks !!!!!

Here is the code I used for my fullcalendar:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - CalendarTest</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.js'></script>
    <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
    <script src='fullcalendar/fr.global.js'></script>

    <script>var TODAY = new Date(Date.now());
        var todayDate = "Today";
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                themeSystem: 'bootstrap5',
                headerToolbar: {
                    left: 'prev,next today',
                    right: 'dayGridMonth timeGridWeek timeGridDay'
                },
                initialView: 'timeGridWeek',
                initialDate: TODAY,
                locale: 'en',
                editable: true,
                views: {
                    dayGridMonth: {
                        titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
                    },
                },


                buttonText: {
                    today: todayDate,
                    month: 'Month',
                    week: 'Week',
                    day: 'Day',
                },


                firstDay: '1',

                events: [
                    {
                        title: 'Conference',
                        start: '2021-04-11',
                        end: '2021-04-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2021-04-12T10:30:00',
                        end: '2021-04-12T12:30:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2021-04-12T14:30:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2021-04-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2021-04-28'
                    }
                ],
                businessHours: [
                    {
                        daysOfWeek: [1, 2, 3, 4, 5],
                        startTime: '08:00',
                        endTime: '19:00'
                    },
                ],
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    meridiem: false
                },
                displayEventEnd: true,

            });
            calendar.render();
        });</script>

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)

And here is the css style that I have:

   .fc .fc-col-header-cell-cushion {
            display: inline-block;
            padding: 2px 4px;
            color: #000;
            text-decoration:none;
            font-family: "Helvetica Neue", "Arial", sans-serif;
            font-weight:400;
        }

        .fc .fc-button {
            background-color: white;
            outline:none;
            border:none;
            border-radius: 12px;
            color: lightgrey;
        }
        .fc .fc-button:hover {
            background-color: lightgrey;
            color: white;
        }

        .fc .fc-button:disabled {
            background-color: lightgrey;
            color: white;
        }
        .fc .fc-button:active:hover {
            background-color:lightgrey;
        }
        .fc .fc-prevMonth-button,
        .fc .fc-nextMonth-button {
            font-size: 18px;
        }

        .fc-button:active {
            border-color:none;
            color: red;
        }

Change background colors of Month Day Week button views when active

0 Answers0