设置全日历单元格背景颜色

Posted 2023-02-21

【中文标题】设置全日历单元格背景颜色

【英文标题】：Setting Fullcalendar Cell Background Color

【发布时间】：2013-07-19 05:08:32

【问题描述】：

我看到了几个关于如何在全日历中设置单元格背景颜色的主题，但没有一个对我有用。我猜日历用于列出使用日期的日期，例如 .fc-day5 或 .fc-day17，但在 1.6.2 版中不再存在。

我有一个正在呈现的几个事件的列表，我想将它们的单元格颜色（全天单元格，而不仅仅是事件单元格）设置为特定颜色。

我使用'eventRender'来尝试设置一个类

eventRender: function (event, element, monthView)  
                if (event.className == "holiday") 
                    $day = $date.getDate();
                    $("td.fc-day-number[value='" + $day + "']").addClass("holiday");
                
            ,

如果您对如何设置背景颜色有任何想法，请告诉我。

【问题讨论】：

您是如何获取事件数据的？

【参考方案1】：

您可以尝试设置事件背景颜色。像这样的：

event.backgroundColor = 'cccccc#';

或用于单元格背景：

$('.fc-day[data-date="' + date + '"]').css('background', color);

date 必须是日期字符串等价于 php Y-m-d 日期格式。 渲染日历时需要更改样式。

【讨论】：

感谢您的回复，但我不想设置事件背景，我想设置整个单元格背景（包含事件的那个）。

完美运行。非常感谢

对于下一个看到这个的访问者：特别注意日期格式，因为它需要前导零才能工作。我的意思是：'2015-3-4' 不会工作，而 '2015-03-04' 会。这个post 帮助我克服了前导零。

【参考方案2】：

嗯，你可以这样做。

  title: 'Some title',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor',
  borderColor: '#SomeColor'
,

  title: 'Some title2',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor2',
  borderColor: '#SomeColor2'

另外，你可以这样设置类名：

  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["red"]
,

  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["green", "secondClass"]

然后描述那种风格的班级

<style>

.red 
    background-color:red;


.green 
    background-color:green;

.green
// do something

</style>

【讨论】：

这是更改事件颜色而不是完整日历的单元格背景颜色。顺便说一句，我正在使用完整的日历 4 版本。谢谢。