How to edit width of event in FullCalendar?

Question

This seems incredibly easy, but I have spent half a day bashing my head against the wall trying to figure out why my fullcalendar events are showing only at 77px, when the width of the cell(month view) seems to be either 90px or higher. I have tried modifying the fc-event css rule, but it seems like javascript is writing some inline styles into the calendar, overwriting these styles.

I can't seem to find out where these styles are getting written!

Can anyone who has customized fullcalendar give some insight? It is running as a page on a wordpress blog, not sure if this has anything to do with it, as I noticed that one of the buttons is lopped off at an awkward position.

Answer 1

you can set event width with eventAfterRender

$('#calendar').fullCalendar({
  eventAfterRender: function(event, element, view) {
                      $(element).css('width','50px');
                    }
});

Answer 2

I've used !important to override the inline style and it worked fine

.fc-event{ width: 98px !important;}

Answer 3

eventRender: function (event, element, view) {
    if (event.eventType == "Task") { //own property
        var one_day = 1000 * 60 * 60 * 24;
        var _Diff = Math.ceil((event.start.getTime() - view.visStart.getTime()) / (one_day));
        var dayClass = ".fc-day" + _Diff;

        if (event.days == 1) {  //own property
            jQuery(dayClass).addClass("one-day-event"); //set width to 90px (cca 2 cells)
        } else {
            jQuery(dayClass).removeClass("one-day-event");

        }
        view.setWidth(jQuery(dayClass).css("width") * event.days);
    }
},