Question

如何更改日期单元格背景颜色，而不仅仅是事件背景颜色？

fullcalendar只有文档中事件的背景颜色。

Answer 1

虽然我不详细了解fullcalendar组件，但请尝试以下方法：

检查是否有属性来设置颜色。如果找到一个，请使用它并停在这里。你已经完成了。
生成一个fullcalendar对象（通过适当的angularjs指令，我猜）并检查指令模板文件/字符串中的生成的DOM或浏览器（如果您在检查此类结构时不确定，请使用许多浏览器进行测试;我总是更喜欢检查模板，但有时会变得非常困难。
找到要自定义的单元格并推断出合适的CSS选择器（如果您不知道如何为找到的内容定义合适的选择器，那么这不是零选择器的地方，所以我希望你足够了解CSS3。
为此类选择器定义新的背景颜色（可能还有边框颜色）。

你已经完成了但也许你想要更多的自定义（例如你有一些固定数量的颜色，如Ionic或Twitter Bootstrap），你可以多次启动相同的选择器添加颜色的附加类。

假设您的日历具有以下结构：

<div class="full-calendar">
    ...
    <div class="column" ng-repeat="day in daysOfMonth">
        ...
        <div class="cell" ng-repeat="half_hour in halfHoursOfDay">
            ...
        </div>
    </div>
</div>

您的选择器将是这样的：

div.full-calendar > div.column > div.cell

你会这样使用：

div.full-calendar > div.column > div.cell {
    background-color: #ff7733;
}

如果你想要使用几种不同的颜色，你可以用两种不同的方式定义几个鉴别器类：

提供完整日历指令可让您添加自定义类，将自定义类添加到指令中，并在选择器中将其定义为：

div.full-calendar.your-custom-class > div.column > div.cell {
    background-color: #ff8877;
}
/* you should study the generated structure to check whether your custom class is added exactly there, or where, and customize the selector you want */

如果你不能通过指令提供的方法直接添加自定义类，你总是可以包装元素并对其进行自定义：

<!-- html -->

<div style="display: inline-block" class="your-custom-class">
    <your-full-calendar-directive-here />
</div>

/* css */

.your-custom-class div.full-calendar > div.column > div.cell {
    background-color: #ff8877;
}

摘要：不。我不知道您尝试使用的库，但如果您无法通过提供的方式自定义UI，则可以随时回退以定义自定义样式。

注释：您将无法传递任意颜色，但是您在css样式中创建的类所支持的颜色（除非您在适当的时候找到了使用jquery执行此操作的方法）。

fullcalendar更改日期单元格背景颜色，而不仅仅是事件背景颜色

1 个答案: