返回

Vue FullCalendar样式定制:dayHeaders和dayGrids

vue.js

Vue FullCalendar 日历样式定制:dayHeaders 与 dayGrids

在使用 Vue 构建 FullCalendar 日历组件时,样式定制常是一个重要环节。针对 dayHeaders (如“周一”,“周二”等) 与 dayGrids (日期单元格)的样式修改,开发者会遇到一些常见的问题,这篇短文就这些问题提出有效的解决思路。

dayHeaders 样式调整

希望修改日历头部文本颜色,常见的思路是使用 dayHeaderDidMount 回调函数或 dayHeaderClassNames 属性。 可是,在实践中,像上文中例子中展示的直接通过 dayHeaderDidMount 函数直接操作DOM 或 dayHeaderClassNames 设置类名然后配合 style 代码修改颜色的方法并没有生效。 仔细分析,你会发现: FullCalendar 会在 DOM 更新时,覆写通过 dayHeaderDidMount 直接设置的样式。dayHeaderClassNames 在一些特定版本的 Fullcalendar 也没有预期工作。这通常是由组件的生命周期和样式优先级控制逻辑决定的。

解决方案: 直接使用 FullCalendar 的 CSS 选择器,提高样式规则的优先级, 才是调整头部样式的有效办法。通过浏览器的开发者工具,你可以发现 FullCalendar 的日历头元素通常拥有一些类名,如 .fc-col-header-cell-cushion。 使用这些类名结合样式设置,能达到效果。

代码示例:

<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 calendarOptions = ref({
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        initialView: 'dayGridMonth'
    });
</script>

<style>
  .fc-col-header-cell-cushion {
        color: red;
  }
</style>

操作步骤:

  1. 检查 FullCalendar 的 DOM 结构,找到目标元素的相关类名。
  2. 在 Vue 组件的 <style> 部分, 使用合适的 CSS 选择器 (如上面的示例 .fc-col-header-cell-cushion) ,覆盖 FullCalendar 的默认样式。

解释说明: 通过提升 CSS 样式优先级,可以直接控制目标元素的外观。使用更明确的选择器能覆盖FullCalendar组件中的默认设置, 避免一些因为钩子函数调用顺序或组件生命周期产生的冲突。

dayGrids 样式调整

日历日期单元格样式调整跟头部样式调整类似,需要找到对应的 DOM 类名。 日期单元格的默认类名, 包括 .fc-daygrid-day-number, .fc-daygrid-day-frame 等。可以利用浏览器的开发者工具查看到这些类名。

解决方案: 使用 FullCalendar 的 CSS 类选择器直接设置样式, 并添加 !important 属性以覆盖默认样式,可以有效解决日历日期单元格的样式定制。

  • 如果需要在所有日历日期单元格上添加样式, 使用 .fc-daygrid-day-frame
  • 如果只需要修改数字文本颜色,可以使用 .fc-daygrid-day-number

代码示例:

<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 calendarOptions = ref({
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        initialView: 'dayGridMonth'
    });
</script>

<style>
    .fc-daygrid-day-number {
         color: blue !important; /* Changes the date numbers color to blue */
    }
    .fc-daygrid-day-frame {
      background-color: #f0f0f0 !important;/* Changes the background of all day grids to gray*/
   }
</style>

操作步骤:

  1. 利用浏览器的开发工具找到你需要更改样式单元格的CSS选择器。
  2. 在Vue 组件 <style> 中通过对应选择器直接设置你的样式。
  3. 使用 !important 声明,确保样式的优先级可以高于 FullCalendar 组件的默认样式。

解释说明: !important 标识符在CSS中具有最高的优先级。当有多个样式规则应用到同一个元素时, !important 可以保证该规则始终覆盖其他规则,这对于覆盖由 FullCalendar 等组件生成的默认样式来说非常有用。 但过度使用!important 会降低样式的可维护性。 所以请尽量保持 CSS 代码的整洁,使用特定度较高的选择器和!important结合,才能精准控制目标元素,并维持样式系统的健壮性。

总结来说, FullCalendar 日历组件的样式定制, 应当优先考虑使用 CSS 选择器,结合 !important 的使用。这样的策略可以有效覆盖组件默认样式, 灵活掌控样式表现, 并使代码更易维护。