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);
    }
},

Answer 4

I got the result using this code and hope work fine with you too.

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

Answer 5

Some wordpress theme style does not play nice with fullcalendar. I am using Wordpress 3.0, using the style Twenty Ten. Instead of inserting it inside the content div, I inserted it in its parent, the container div, and then the styles fix themselves.

Answer 6

TwentyTen adds padding table cells (see style.css):

#content tr td {
    border-top: 1px solid #e7e7e7;
    padding: 6px 24px;
}

The following should 'fix' this for the fullCalendar:

#content .fc tr td{
    padding:0px;
}