Issue 259: Problem with window resize
Status:  Released
Owner: ----
Closed:  Aug 2014
Reported by wowmo...@gmail.com, Dec 23, 2009
I have a page that uses another script to change my page background image
on window resize. Oddly enough it the last column of the calendar
(Saturday) is compressed (screen shot included). Looking at the HTML
produced by this plugin (this is the HTML from the intro page of the
FullCalendar site), I see this:

<tr>
 <th class="fc-sun fc-state-default fc-leftmost" style="width: 108px;">Sun</th>
 <th class="fc-mon fc-state-default" style="width: 108px;">Mon</th>
 <th class="fc-tue fc-state-default" style="width: 108px;">Tue</th>
 <th class="fc-wed fc-state-default" style="width: 108px;">Wed</th>
 <th class="fc-thu fc-state-default" style="width: 108px;">Thu</th>
 <th class="fc-fri fc-state-default" style="width: 108px;">Fri</th>
 <th class="fc-sat fc-state-default">Sat</th>
</tr>

So, as you can see the width is not set for the Saturday column. I added a
hack to my window resize code to change the th widths to percentages
(14.3%), which shouldn't require recalculation after every window resize. 
saturdaycolumn.jpg
11.8 KB   View   Download
Dec 29, 2009
#1 Subdude...@gmail.com
I encountered this issue as well, to work around it was to set the containing div's
width property:

$("#calendar").width(750).css({'margin-left': 'auto','margin-right': 'auto'});

In my case, I am resizing the containing div when switching to day view.  When
switching back to month or week, the above line corrected the odd layout issues. 
Dec 30, 2009
Project Member #2 adamrs...@gmail.com
not sure i completely understand the context, but if you have some javascript that
changes the dimensions of the calendar's container, you need to call the `render`
method to make it readjust:
http://arshaw.com/fullcalendar/docs/methods.php
(towards the bottom)

let me know if this works for you. thanks
Jan 5, 2010
#3 wowmo...@gmail.com
Thanks adamrshaw, that did work, but I'd end up having to call the function twice: on
document ready and then on window resize. Like I said, my fix using percentages
doesn't require me to render the calendar at all:

$('.fc table').css('width','100%').find('thead .fc-state-default').css('width','14.3%');

The context of this is because my page has a fixed width, but when the window is
resized a different stylesheet is loaded with a new fixed width. It's done so users
with a wide screen monitor aren't looking at a tiny column in the middle of the page.
Here is the code I am using:

$(document).ready(function(){
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 if (!$('#myCss').length) $('body').append('<div id="myCss"></div>');
 var pageWidth = $(window).width();
 var sizeSelected = "800.css";
 if (pageWidth > 900) sizeSelected = "1024.css";
 if (pageWidth > 1100) sizeSelected = "1280.css";
 if (pageWidth > 1310) sizeSelected = "1440.css";
 if (pageWidth > 1480) sizeSelected = "1600.css";
 if (pageWidth > 1610) sizeSelected = "1680.css";
 $("#myCss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet"
type="text/css" />');
}

Jan 19, 2010
Project Member #4 adamrs...@gmail.com
hi wowmotty,
it is cool you are using percentages, i might look at that for the next version of
fullcalendar. i forget why i didn't originally use it, but i think it had to do w/
rendering problems in opera.

i have a question... when the window is resized, and there are events on the
calendar, don't the events move out of place? i would think you would need to call
the rerenderEvents method.

events will always need to be positioned absolutely w/ pixel values b/c if you
aligned, them with percentages, some browsers render them 1 pixel off, so they
wouldn't align cleanly w/ the sides of the days.
Feb 5, 2010
#5 wowmo...@gmail.com
Hi Adam!

Actually I haven't switched the table cell widths to a percentage, the problem was
only occurring when the script I posted in the last message is used. But if I do use
a percentage, the events don't actively reposition themselves which the window is
resizing, but does correctly place itself in the right place once the resize is done.
Feb 6, 2010
Project Member #6 adamrs...@gmail.com
it seems like the original problem was.. fullcalendar was trying to resize itself 
before the 2nd stylesheet fully loaded, so it was working off the wrong dimensions. 
the ideal solution would be to wait until the new stylesheet loaded, and then call the 
render method

but glad you figured out a workaround.
Status: Done
Jul 5, 2010
Project Member #8 adamrs...@gmail.com
songyunhui2008, looking at your screenshot, i can't see anything wrong. i have a feeling this is a separate issue altogether. please post a different issue with a much more detailed description, or use the support page (http://arshaw.com/fullcalendar/support/) to find help. thanks
Aug 12, 2010
#9 jackey....@gmail.com
hi adam,

I am working on windowResize. I call the following from windowResize, events still out of place when resize window. what idea? thanks so much.
					$('#calendar').fullCalendar('render');
					$('#calendar').fullCalendar('rerenderEvents');
Feb 13, 2012
#11 samdavy...@gmail.com
I have experienced the same issue. The best solution is to trigger a resize of the window after the calendar has loaded.

$(window).trigger("resize"); 
Feb 15, 2012
#12 German.E...@gmail.com
good solution ..... thksssss
Apr 28, 2014
#13 rempel.o...@gmail.com
Ex: http://jsfiddle.net/rK5ZK/

Adjust on the following functions in fullcalendar.js v2.0.0-beta2 (not min.js):

line 3167
	function setWidth(width) {
		viewWidth = width;
		colPositions.clear();
		colContentPositions.clear();

		weekNumberWidth = 0;
		if (showWeekNumbers) {
			weekNumberWidth = head.find('th.fc-week-number').outerWidth();
		}

		colWidth = Math.floor((viewWidth - weekNumberWidth) / colCnt);
		
		//
		// CHANGE - REMOVE SLICE
		//setOuterWidth(headCells.slice(0, -1), colWidth);
		//

		setOuterWidth(headCells, colWidth);
	}
	
line 3954
	function setWidth(width) {
		viewWidth = width;
		colPositions.clear();
		colContentPositions.clear();

		var axisFirstCells = dayHead.find('th:first');
		if (allDayTable) {
			axisFirstCells = axisFirstCells.add(allDayTable.find('th:first'));
		}
		axisFirstCells = axisFirstCells.add(slotTable.find('th:first'));
		
		axisWidth = 0;
		setOuterWidth(
			axisFirstCells
				.width('')
				.each(function(i, _cell) {
					axisWidth = Math.max(axisWidth, $(_cell).outerWidth());
				}),
			axisWidth
		);
		
		var gutterCells = dayTable.find('.fc-agenda-gutter');
		if (allDayTable) {
			gutterCells = gutterCells.add(allDayTable.find('th.fc-agenda-gutter'));
		}

		var slotTableWidth = slotScroller[0].clientWidth; // needs to be done after axisWidth (for IE7)
		
		gutterWidth = slotScroller.width() - slotTableWidth;
		if (gutterWidth) {
			setOuterWidth(gutterCells, gutterWidth);
			gutterCells
				.show()
				.prev()
				.removeClass('fc-last');
		}else{
			gutterCells
				.hide()
				.prev()
				.addClass('fc-last');
		}
		
		colWidth = Math.floor((slotTableWidth - axisWidth) / colCnt);
		
		//
		// CHANGE - REMOVE SLICE
		//setOuterWidth(dayHeadCells.slice(0, -1), colWidth);
		//
		
		setOuterWidth(dayHeadCells, colWidth);
	}
	
	********
	
	And to set more speed to reset all the widths of cells, change:
	
line 785
	function windowResize() {
		if (!ignoreWindowResize) {
			if (currentView.start) { // view has already been rendered
				var uid = ++resizeUID;
				setTimeout(function() { // add a delay
					if (uid == resizeUID && !ignoreWindowResize && elementVisible()) {
						if (elementOuterWidth != (elementOuterWidth = element.outerWidth())) {
							ignoreWindowResize++; // in case the windowResize callback changes the height
							updateSize();
							currentView.trigger('windowResize', _element);
							ignoreWindowResize--;
						}
					}
				
				//
				// CHANGE - NEW VALUE
				//}, 200);
				//

				}, 5);
				
			}else{
				// calendar must have been initialized in a 0x0 iframe that has just been resized
				lateRender();
			}
		}
	}

	*******
	
Put this adjustments in the next version of fullcalendar, please?
Jun 10, 2014
Project Member #14 adamrs...@gmail.com
 Issue 2139  has been merged into this issue.
Jun 10, 2014
Project Member #15 adamrs...@gmail.com
I'm still having trouble recreating this issue. I understand what things *look* like when they go wrong. I just don't know the steps involved to create the bug (does the user have to resize the window?) and I can't recreate it on my end.

JSFiddles will be extremely helpful because I fear this has a lot to do with the other CSS on your page (non-FullCalendar CSS).

@rempel.oliveira, I looked at your JSFiddle, but things look good to me. Can you give me more instruction about how to recreate it? Or maybe it is only happening in a specific browser? what OS/browser are you using
Status: Reproducing
Labels: -Type-Defect Type-Bug
Jun 10, 2014
#16 wowmo...@gmail.com
I think the problem is on line #328 of the BasicView.js file (https://github.com/arshaw/fullcalendar/blob/master/src/basic/BasicView.js#L328)

I don't know why <code>headCells</code> is getting sliced, but it's removing the last header cell so it is not getting a width set.

<code>setOuterWidth(headCells.slice(0, -1), colWidth);</code>
Jun 15, 2014
Project Member #17 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: milestone-skeleton
Jul 23, 2014
Project Member #18 adamrs...@gmail.com
Things are done way differently in v2.1 (beta). I'm nearly certain this bug is fixed

http://blog.arshaw.com/1/post/2014/07/fullcalendar-210-beta.html

I would really appreciate if you could verify this. Thanks a lot!
Aug 26, 2014
Project Member #19 adamrs...@gmail.com
This issue has been resolved with the official release of v2.1.0:
http://blog.arshaw.com/1/post/2014/08/fullcalendar-210-released.html

Please post any follow-up bug reports or feature requests as separate issues. Thanks.
Status: Released
Jun 30, 2015
#20 nidhiS.a...@gmail.com
hi,

Why the height is not resized when the browser is resized.