Fullcalendar：更改特定日期的颜色

Posted 2023-02-21

【中文标题】Fullcalendar：更改特定日期的颜色

【英文标题】：Fullcalendar: Change the color for specific days

【发布时间】：2013-07-10 22:01:16

【问题描述】：

我在工作中遇到了一个项目。我需要更改某些日子的背景颜色。这是一个用户应该看到的日历，哪些日子可用，哪些不可用。我发现有一个属性叫做“data-date”，但是我没有找到使用它的可能性。

有什么方法可以操纵特定日子的背景吗？

我认为一定有办法，因为显示当前日期的单元格也有另一种颜色。

【参考方案1】：

我猜getDate不起作用，请改用moment。

里面var calendar = $('#calendar').fullCalendar( ...

dayRender: function (date, cell) 
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) 
            cell.css("background-color", "blue");
        
    ,

【参考方案2】：

使用特定日期的日期参数进行比较：

$("#calendar").fullCalendar(
    dayRender: function (date, cell) 
        if (date.isSame('2016-08-04')) 
           cell.css("background-color","red");
        
    
);

isSame 来自于 fullcalendar 使用的 moment.js： http://momentjs.com/docs/#/query/is-same/

【参考方案3】：

对于那些只想更改过去日期颜色的人，请在您的 css 中定位 .fc-past 并添加 background-color 属性。例如：

.fc-past 
    background-color: silver;

【参考方案4】：

对于视图month、basicWeek 和basicDay，您可以通过提供dayRender 函数来更改天数的呈现。例如：

$("#calendar").fullCalendar(
    dayRender: function (date, cell) 
        cell.css("background-color", "red");
    
);

dayRender 的文档可在此处获得：http://arshaw.com/fullcalendar/docs/display/dayRender/

这是一个关于 jsfiddle 的工作示例：http://jsfiddle.net/kvakulo/CYnJY/4/

【讨论】：

请参阅下面我的答案，以了解可能更快的基于 CSS 的解决方案：***.com/a/36927481/270302

我只能在这里传递日期，我怎么能像 [10-12-2018,24-12-2018] 而不是 [10,24] 这样的月份和年份传递它

【参考方案5】：

    dayRender: function(date, cell)
        if (moment().diff(date,'days') > 0)
            cell.css("background-color","silver");
        
    ,

【参考方案6】：

为什么不使用“数据日期”属性？

$("#calendar").fullCalendar(function() 

  viewRender: function() 
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
,

....

【讨论】：

这个帮助了我。因为dayRender 方法不能与 dayThreeView 一起正常工作

【参考方案7】：

如果有人想查询以前一整天的红色（或任何其他）颜色的全日历，那么这就是代码。

    var $calendar = $('#calendar').fullCalendar(
    header: 
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    ,

    defaultView: 'month',

    dayRender: function (date, cell) 
       var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
                    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
                    if (check < today) 
                        cell.css("background-color", "red");
                    
    
);

Regin Larsen 代码帮助我实现了这一点。 谢谢雷金·拉森。

【参考方案8】：

使用外部库时，您应该尽量不要利用该库生成的任何内容。因为在下一个版本中，如果他们更改了库内部的工作方式，该库仍将向后兼容，但您的代码将停止工作。所以尽量使用库 API，而不是做 hack。

回答您的问题，一种方法是在所有不可用的日子里添加一个新事件。这可以通过创建事件对象并执行 renderEvent(.fullCalendar('renderEvent', event [, stick ])) 来完成。创建事件对象时，将背景颜色指定为您想要的颜色，并将颜色、文本颜色、边框颜色设置为与背景相同（如果您不希望它可见）。

编辑： Regin Larsen 的回答似乎更好。我没有在文档中注意到这一点。