fullcalendar: Problem with window resize

Originally reported on Google Code with ID 259

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.

Reported by wowmotty on 2009-12-23 20:57:32

- _Attachment: [saturdaycolumn.jpg](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-259/comment-0/saturdaycolumn.jpg)_

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 20 (20 by maintainers)

Most upvoted comments

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?

Reported by rempel.oliveira on 2014-04-29 00:27:31

arshaw on Aug 19, 2015