How to change event width in FullCalendar?

Question

It seems incredibly easy, but I spent half a day puzzling against a wall, trying to understand why my fullcalendar events only show at 77px, when the cell width (month) seems to be either 90px or higher. I tried to change the css fc-event rule, but it seems that javascript is writing some inline styles to the calendar, overwriting these styles.

I can’t understand where these styles are written!

Can anyone who set up fullcalendar give an idea? It works like a page on a WordPress blog, not sure if this has anything to do with it, as I noticed that one of the buttons has been removed in an awkward position.

Answer 1

Some WordPress theme styles do not play well with fullcalendar. I am using Wordpress 3.0 using the Twenty Ten style. Instead of pasting it into the content div, I pasted it into my parent element, the container div, and then the styles fixed themselves.

Answer 2

you can set event width with eventAfterRender

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

Answer 3

I used! it's important to override the inline style and it worked great

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

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 I hope that you will be fine too.

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

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 full calendar:

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