完整日历：更改周末背景

Question

我正在尝试在完整日历中禁用周末，但此选项周末：false

var calendar = $('#calendar').fullCalendar({

    header: {

        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
            },

    weekends: false,
    ........});

从日历中删除周末，或者我想通过更改背景颜色并使其不可选择来仅禁用这两天。
我应该怎么办？ 感谢您的帮助

Answer 1

如果我正确理解你想要的问题：

1. 以不同的颜色显示周末
2. 知道这一天是否是周末

第一点，你可以使用css规则来设置周末元素的样式：

.fc-sat, .fc-sun {
    background-color: red !important;
}

第二点，您可以检查选择的日期是否是周末，然后按照您的意愿进行操作。 您可以通过以下方式使用

dayClick

(http://arshaw.com/fullcalendar/docs/mouse/dayClick/) 事件：

dayClick: function (date, allDay, jsEvent) {
    var checkDay = new Date($.fullCalendar.formatDate(date, 'yyyy-MM-dd'));
    if (checkDay.getDay() == 6 || checkDay.getDay() == 0) alert('Weekend!');
}

您无法禁用某一天，因为 FullCalendar 不是日期选择器，因此您无法“禁用”，但您可以处理您想要的一切。

这是一个工作小提琴：http://jsfiddle.net/IrvinDominin/qLUFg/1/

Answer 2

Irvin Dominin 的回答的补充：

有时上面答案的第一部分可能会导致小部件标题变成相同的颜色。因此，为了仅处理周末单元格，请使用以下样式：

.fc-sat,
.fc-sun {
  &.fc-day {
    background-color: red !important;
  }
}

Answer 3

如果您需要更改两个周末的颜色，我建议：

.fc-nonbusiness {
  background-color: yellow;
}

Answer 4

根据@Irvin Dominin 的答案，我根据它发布了我的答案，因为类名称似乎已经过时了。就我而言，我也不希望标题以相同的方式着色：

月视图：

.fc-day-sun .fc-daygrid-day-frame, .fc-day-sat .fc-daygrid-day-frame {
    background-color: #EFF1F5; /* choose whatever color you like */
}

周视图和日视图：

.fc-day-sun .fc-timegrid-col-frame, .fc-day-sat .fc-timegrid-col-frame {
    background-color: #EFF1F5; /* choose whatever color you like */
}

不同的方法

我没有在日期元素本身上找到一个类，该类也不在标题中使用，但我找到了一个

.fc-col-header-cell

，它在标题上使用，但不在日期实例中使用。这样，我们就可以一次完成造型：

.fc-day-sun:not(.fc-col-header-cell), .fc-day-sat:not(.fc-col-header-cell) {
    background-color: #EFF1F5;    /* choose whatever color you like */
}

我有点不喜欢在 CSS 上使用

:not(...)

声明，但我还没有找到更好的方法来实现我的目的。