How to style dayHeaders and dayGrids in FullCalendar in Vue?

I’m new to Vue and JS in general, currently trying to implement a calendar using FullCalendar. I would like to change the text color of the day headers and days but unable to do so. I read the documentation where there is an option for Day-Header Render Hooks but I’ve tried and it didn’t work, the following are my code:

<template>
    <FullCalendar class="calendar-app-calendar" :options="calendarOptions">
        <template v-slot:eventContent="arg">
            <p> Text </p>
        </template>
    </FullCalendar>
</template>

<script setup>
    import { ref } from 'vue';
    import FullCalendar from '@fullcalendar/vue3';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import interactionPlugin from '@fullcalendar/interaction';

    const handleDayHeader = (arg) => {
        arg.el.style.color = 'red';
    }

    const calendarOptions = ref({
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth' //,timeGridWeek,timeGridDay
        },
        initialView: 'dayGridMonth',
        dayHeaderDidMount: handleDayHeader,
        dayHeaderClassNames: (arg) => {
            console.log('dayheaderclassnames...', arg);
            return ['week-header'];
        }
    });
</script>

<style>
    .week-header {
        color: red !important; /* Change text color of weekend headers */
    }
</style>

I tried the code I provided above but it did not have any effect on my calendar. I expect the text color of day header “Mon, Tues etc.” to change to red.