unable to change fullcalendar event color ('fc-event-inner' CSS) (used under JIRA)

Question

I went through other posts related to fullcalendar event color but it couldn't work for me.

I tried below

 calendar.fullCalendar('renderEvent',{
                                        id: resp[i].ID,                                         
                                        title: resp[i].desc,
                                        start: s,
                                        end: e,
                                        allDay: true,
                                        comments: resp[i].comments,
                                        className: ["event",  "greenEvent"],
                                        eventColor: '#378006'   
                                    }

Also, tried by applying at calendar object:

    disableDragging: false,
            eventColor: '#378006',              
            //eventBackgroundColor: 'red',

                     eventClick:...

But this just make the events border color change but it does not change the event's background color change. Event's background color remains white only...

I have found, it uses - '.fs-event-inner' as a CSS which override runtime. I tried by changing at firebug and it shows event color changed. But, when I tried to dynamically change color through below, then it did not applied and work.

 AJS.$('.fc-event-inner').css({"background":"red"});

Can any one please suggest me how it could be resolve and get the background color changed for events.

I am using this fullcalendar in JIRA.

2 questions, 1. What version of full calendar are you working with? 2. Are you trying to color all of the events, all of the events depending on event source, or just a single event? — Shaded
version is FullCalendar v1.6.0. I want to change all events color. I tried by applying at calanedar object : eventColor: 'couleur', eventBackgroundColor: 'couleur', but it just change the border. Can you please provide stuff which i missed to use. — dsi
Can you edit your question with the code you use to create the calendar, including event sources? This is probably where you will want to specify the color. — Shaded
Actually, have you tried in your renderEvent object to just set color: '#378006', instead of eventColor: '#378006'? — Shaded

Leonardo Oporto Leonardo Oporto · Accepted Answer · 2013-05-29T20:42:12

My friend, I had the same problem. I'm using fullCalendar 1.6.1 and jquery ui 1.10.3

I just did this and worked for me, I hope will work for you.

when I create the fullCalendar, I use the callBack "eventRender".

$('#my_cal_div').fullCalendar({

  ...

  ,eventRender:function(event,element){

  element.children('.fc-event-inner').css({'background-color':'yellow'});
  element.children('.fc-event-inner').css({'border-color':'blue'});
  element.children('.fc-event-inner').css({'color':'red'});

}

...

}); //end of fullCalendar constructor...

At least, It worked for me.

Saludos !

Leonardo Oporto.

unable to change fullcalendar event color ('fc-event-inner' CSS) (used under JIRA)

2 Answers