我怎样才能给周末涂上颜色而不是隐藏在完整的日历中

How can I color weekend instead of hide in full calendar?

本文关键字:隐藏 日历 颜色 周末      更新时间:2023-09-26

目前我正在为我的项目使用FullCalendar插件。有一个活动名称"周末"。如果周末设置为假,那么周日和周六将隐藏起来。

但我希望周末的背景颜色将被指定,而不是隐藏它。

以下是我发现的插件中的js代码。

    if (this.opt('weekends') === false)
    {
       hiddenDays.push(0, 6); // 0=sunday, 6=saturday
       // $('.fc-fri').css('background', 'green');
       // alert($('.fc-fri').css('background'));
        //$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-fri').css('background', 'green');
        //$('.fc-sat').css('background-color', '#00FF00');
    }
    for (i = 0; i < 7; i++) {
        if (
            !(isHiddenDayHash[i] = $.inArray(i, hiddenDays) !== -1)
        ) {
            dayCnt++;
        }
    }
    if (!dayCnt) {
        throw 'invalid hiddenDays'; // all days were hidden? bad.
    }
    this.isHiddenDayHash = isHiddenDayHash;
}

通过评论代码,我试图给周末的日子涂上颜色。但我没有发现任何结果。如果有什么建议,请帮我解决这个问题。

您可以使用以下CSS

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

如果我正确理解你的问题

你可以使用类似的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!');
}