CODEWITHSUNDEEP
jquerycssfullcalendar
Tom Trutt
Tom Trutt

Reputation: 1

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 color, but that doesn't seem to work.

Thanks.

Upvotes: 0

Views: 2587

Answers (2)

Tom Trutt
Tom Trutt

Reputation: 1

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

Upvotes: 0

Brock Adams
Brock Adams

Reputation: 93443

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.

Upvotes: 2

Related Questions