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 w

Answer 1

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

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

Answer 2

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

Answer 3

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 4

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 5

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 6

you can set event width with eventAfterRender

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