| Issue 259: | Problem with window resize | |
| 5 people starred this issue and may be notified of changes. | Back to list |
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.
Dec 30, 2009
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
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
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
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
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
Jun 26, 2010
The problem still exists in my apps. http://www.webpagescreenshot.info/img/933506-627201025722AM
Jul 5, 2010
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
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');
Jan 27, 2012
i have the same problem http://www.flickr.com/photos/60154039@N07/6770739453/
Feb 13, 2012
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
good solution ..... thksssss
Apr 28, 2014
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
Issue 2139 has been merged into this issue.
Jun 10, 2014
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
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
(No comment was entered for this change.)
Labels:
milestone-skeleton
Jul 23, 2014
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
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
hi, Why the height is not resized when the browser is resized. |
|
| ► Sign in to add a comment |
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.