2011-05-30 1097 views
0

我在FullCalendar的每日和每週視圖上更改了className標記,以顯示日曆中項目的狀態。使用FullCalendar自定義月視圖上的視圖

問題是在月視圖中所有事件的樣式都是一樣的。有沒有一種方法可以用自定義的CSS標籤來覆蓋它?我試過color,但這似乎不起作用。

謝謝。

+1

什麼是完整的日曆是一個插件?也許你不介意給我們看一些代碼? – Ibu 2011-05-30 00:30:16

+0

嘗試添加!重要的顏色:#ffffff!important; – wdm 2011-05-30 02:16:14

+0

FullCalendar是一個jQuery插件..一個相當不錯的一個.. .. http://arshaw.com/fullcalendar/ – 2011-05-31 15:06:22

回答

2

確保您單獨使用className來分隔您想要顯示的事件。 EG:

events: [ 
    { 
     title: 'All Day Event', 
     start: new Date(y, m, 1), 
     className: 'Myevent_1' 
    }, 
    { 
     title: 'Long Event', 
     start: new Date(y, m, d-5), 
     end: new Date(y, m, d-2), 
     className: 'Myevent_2' 
    }, 
    ... ... 


然後結構樣式,像這樣(至少):

.Myevent_1, .Myevent_1 .fc-event-skin { 
    background: gold; 
} 
.Myevent_2, .Myevent_2 .fc-event-skin { 
    background: red; 
} 


See a demo at jsFiddle.

0

感謝布魯克..

問題是我使用:

.subOpen, 
.fc-agenda .subOpen .fc-event-time, 
.subOpen a { 
    background-color:#FFFF33; 
    color: #000000; 
} 

我實際上已經從FullCalendar 1.3升級到1.5.1,現在可以將以下內容作爲偶數對象的一部分傳遞給它。

顏色的backgroundColor邊框顏色,和文字顏色Ref: FullCalendar Event Object

使用時,它們覆蓋fullCalendar.css中的CSS,並將設置正確傳遞給所有視圖。

因此,而不是使用CSS,我將顏色設置與事件數據一樣傳遞。

[{"title":"Thomas Trutt","start":"2011-05-30 09:00","end":"2011-05-30 22:00","id":"28","opID":"3","allDay":false,"color":"#36F"}] 

這可以解決,因爲我的所有事件都是從數據庫中提取的。

再次感謝