FullCalendar v3节假日单元格背景与日期文字颜色修改问询

在FullCalendar v3中，日期数字是嵌套在单元格内的.fc-day-number元素中，直接给单元格（cell对象）设置文字颜色会被该子元素的默认样式覆盖。你只需要在dayRender回调中选中这个子元素，单独修改它的颜色即可。

修改后的dayRender代码 #

dayRender: function(date, cell) {
    var dateString = date.format("YYYY-MM-DD");

    // 检查该日期是否为节假日
    if (holidays.includes(dateString)) {
        cell.css("background-color", "rgba(255, 156, 156, 0.2)");
        // 选中日期数字元素并修改文字颜色
        cell.find('.fc-day-number').css('color', '#d9534f'); // 可替换为你需要的颜色值
    }
},

更新后的完整脚本代码 #

<div class="card-body">
 <div class="fc-overflow">
   <div id="myEvent"></div>
 </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        axios.get('https://raw.githubusercontent.com/guangrei/APIHariLibur_V2/main/holidays.json')
        .then(function (response) {
            // 处理获取到的全国节假日数据
            var holidayData = response.data;

            // 将节假日数据处理为合适的格式
            var holidays = [];
            for (var date in holidayData) {
                var dateString = date;
                holidays.push(dateString);
            }

            // 使用Axios从服务器获取事件数据
            axios.get('{{ route('events.index') }}')
            .then(function (eventResponse) {
                // 处理事件数据
                var events = eventResponse.data;

                const modal = $('#modal-action');
                const token = document.head.querySelector('meta[name="csrf-token"]').content;

                $("#myEvent").fullCalendar({
                    height: 'auto',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    dayRender: function(date, cell) {
                        var dateString = date.format("YYYY-MM-DD");

                        // 检查该日期是否为节假日
                        if (holidays.includes(dateString)) {
                            cell.css("background-color", "rgba(255, 156, 156, 0.2)");
                            // 修改日期数字的文字颜色
                            cell.find('.fc-day-number').css('color', '#d9534f');
                        }
                    },
                    events: `{{ route('events.index') }}`,
                    editable: true,
                    navLinks: true,
                    fixedWeekCount: false,
                    weekNumbers: true,
                    weekNumbersWithinDays: true,
                });
            })
        })
        .catch(function (error) {
            console.error('Error fetching holiday data: ' + error);
        });
    });
</script>

说明 #

• .fc-day-number是FullCalendar v3中专门用于显示日期数字的CSS类，直接选中该元素设置颜色就能覆盖默认样式。
• 你可以根据需求替换#d9534f为任意你需要的颜色值（十六进制、RGB、RGBA格式均可）。

内容的提问来源于stack exchange，提问作者Haschwalth