全日历更改周末背景色

Question

我创建了一个新的 MVC asp.Net 网页，为了测试我添加了 Fullcalendar 5.1。

为了测试，我把所有的东西都放在 index.html:

<!DOCTYPE html>
<html lang='en'>
<head>
    <link rel="stylesheet" href="~/lib/fullcalendar/main.css" />
    <script src="~/lib/fullcalendar/main.js"></script>
    <meta charset='utf-8' />

    <style>
        .fc-sun {
            background-color: blue;
        }

        .fc-sat {
            background-color: red;
        }
    </style>

    <script>

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: '2020-07-07',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: [
                    {
                        title: 'All Day Event',
                        start: '2020-07-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2020-07-07',
                        end: '2020-07-10'
                    },
                    {
                        groupId: '999',
                        title: 'Repeating Event',
                        start: '2020-07-09T16:00:00'
                    },
                    {
                        groupId: '999',
                        title: 'Repeating Event',
                        start: '2020-07-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2020-07-11',
                        end: '2020-07-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2020-07-12T10:30:00',
                        end: '2020-07-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2020-07-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2020-07-12T14:30:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2020-07-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2020-07-28'
                    }
                ]
            });

            calendar.render();
        });

    </script>
</head>
<body>
    <div id='calendar'></div>
</body>
</html>

但是背景颜色不会改变:-( 如果我像这样放入一些其他变量：

.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
            padding-top: 10px; /* an override! */
            padding-bottom: 21px; /* an override! */
        }

页眉填充发生变化。我做错了什么？

fiddle就是例子：http://jsfiddle.net/rajesh13yadav/nf9whojL/1/ 你能帮帮我吗？

编辑： 作为解决方法，我使用这个：

 var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: '2020-07-07',
                businessHours: {
                    // days of week. an array of zero-based day of week integers (0=Sunday)
                    dow: [1, 2, 3, 4, 5], // Monday - Friday

                    start: '00:00', // a start time (09am in this example)
                    end: '00:00', // an end time (6pm in this example)
 
                },

风格是：

<style>
    .fc .fc-non-business {
        color: red;
        background: green;
        opacity: 0.1;
        
    }
</style>

但是为什么我不能设置其他属性？

Answer 1

在版本 5.1 中，类是 .fc-day-sat 和 fc-day-sun

为类设置 background-color 效果很好。

全日历更改周末背景色

Fullcalendar change weekend backcolor

asp.net

model-view-controller

fullcalendar-5