如何在Vue中的FullCalendar中设置dayHeaders和dayGrids的样式？

Question

我对 Vue 和 JS 不太熟悉，目前正在尝试使用 FullCalendar 实现日历。我想更改日期标题和日期的文本颜色，但无法这样做。我阅读了 documentation ，其中有一个 Day-Header Render Hooks 选项，但我已经尝试过了，但没有成功，以下是我的代码：

<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>

我尝试了上面提供的代码，但它对我的日历没有任何影响。我期望日期标题“周一、周二等”的文本颜色。更改为红色。

Answer 1

根据文档，您可以使用的方法之一（并且您也在代码中使用过）是

dayHeaderDidMount

-

called right after the <th> has been added to the DOM.

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

此处的这一行更改

<th>

元素内文本的颜色，在本例中为“蓝色”（在代码中为红色）。

所以，你的代码应该如下所示：

<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
    });
</script>

结果：

希望这会有所帮助！！！