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

Question

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

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

Answer 1

您需要设置颜色的Event Source Object

像下面

eventSources: [ 
      { 
       url: 'api/holidays', 
       color: 'yellow' // This is where you set the cell color 
      }, 

这让我所有的假期黄色..

UPDATE：

我已经套装

• =阿迪真
• 渲染=背景

在所有eventObjects来自该源的到来。

Answer 2

虽然我不知道具体的fullcalendar组件，请尝试以下操作：

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

你完成了，但也许你想要更多的定制（例如有颜色的固定电话号码，你会使用，作为离子或Twitter的引导），你可以开始了相同的选择多次添加附加类的颜色。

假设你的日历有这样的结构：

<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; 
} 

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

1. 提供全日历指示，您可以添加自定义类，你把你的定制类的指令，并定义它像这样在您的选择：

   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 */ 
   

2. 如果你不能直接由指令提供的平均添加自定义类，你总是可以包装元素，并对其进行自定义：

   <!-- 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找到方法）。