Customizing view on Month view with FullCalendar
I changed the className
tag on the daily and weekly view of FullCalendar to show the status of items in the calendar.
The problem is in month view all events are styled the same. Is there a way to override this with a custom CSS tag? I tried col开发者_StackOverflow中文版or
, but that doesn't seem to work.
Thanks.
Make sure you use a separate className
for the events you wish to appear separate. 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'
},
... ...
Then structure the styles, like so (at a minimum):
.Myevent_1, .Myevent_1 .fc-event-skin {
background: gold;
}
.Myevent_2, .Myevent_2 .fc-event-skin {
background: red;
}
See a demo at jsFiddle.
Thanks Brock..
The issue was i used:
.subOpen,
.fc-agenda .subOpen .fc-event-time,
.subOpen a {
background-color:#FFFF33;
color: #000000;
}
I actually upgraded from FullCalendar 1.3 to 1.5.1 which now can be passed the following as part of the Even Object.
color , backgroundColor , BorderColor , and textColor. Ref: FullCalendar Event Object
When used they override the CSS in fullCalendar.css as well as pass the settings to all views correctly.
So instead of using CSS I am passing the color settings with the event data like so.
[{"title":"Thomas Trutt","start":"2011-05-30 09:00","end":"2011-05-30 22:00","id":"28","opID":"3","allDay":false,"color":"#36F"}]
This works out since all of my events are being pulled from a database.
Thanks again
精彩评论