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