My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 163: Collapsed calendar in cached tabs
2 people starred this issue and may be notified of changes. Back to list
Status:  Released
Owner:  ----
Closed:  Aug 2013


Sign in to add a comment
 
Reported by gle...@gmail.com, Nov 3, 2009
What steps will reproduce the problem?
1. Add a fullcalendar inside a jQuery ui cached tab
2. Select another tab
3. Go back to the fullcalendar tab

What is the expected output? What do you see instead?
Sometimes the calendar and events all collapse to the upper left corner of
the calendar. It was worse in previous versions of fullCalendar.

What version of the product are you using? On what operating system?
fullCalendar 1.3, Windows XP, firefox, ie, chrome

Please provide any additional information below.
I fixed the problem by adding this method to the publicMethods and calling
it whenever the fullCalendar tab is shown.

rerenderAll: function() {
	view.updateSize();
	view.rerenderEvents();
}
collapsed-fc.JPG
68.6 KB   View   Download
Nov 10, 2009
Project Member #1 adamrs...@gmail.com
agreed. something like this needs to be available, in case the calendar's element is
resized dynamically through javascript.

i'll probably just have the 'render' method call updateSize()
Status: Accepted
Nov 12, 2009
#2 arnaud.b...@gmail.com
Hi, I experience the same type of problems with seven ui tabs and a fullcalendar in
each...

When the document loads , the calendar in the first tab is as expected, but in all
the other tabs (hidden at loading) the first four day of the week are collapsed on
the left side of the tab and the last day of the week (I use the "no weekend" option)
uses all the left space on the right side. 

Click on the previous or next buttons resizes the calendar cells as expected

On IE, same problem, except that when you clic on an hidden tab, the fullcalendar
shows with the problem that I just explained, but after some milliseconds, it resizes
itself with the proper dimensions 

I use fullcalendar v1.4.1, Windows Vista, firefox, ie, chrome

I think the fix applied by glenza could solve my problem, but I'm not sure where to
put the additional method and how to call it...

PS : sorry for my bad english
first_tab.JPG
50.4 KB   View   Download
second_tab.JPG
55.4 KB   View   Download
Nov 12, 2009
#3 gle...@gmail.com
You need to add this
// Added to fix collapsed calendar in cached tabs
rerenderAll: function() {
	view.updateSize();
	view.rerenderEvents();
},

to the publicMethods var of fullCalendar and call the method
when a cached tab is shown.

$('.tabs').bind('tabsshow', function(event, ui) {
    	$(ui.panel).find('div.fc-content').each( 
    	    	function() { 
    	    	$(ui.panel).find('#fullcalendar').fullCalendar('rerenderAll');
    	    	}
    	);
});
Nov 12, 2009
#4 arnaud.b...@gmail.com
Thanks a lot glenza ! I'll try it tonight.
Dec 3, 2009
Project Member #5 adamrs...@gmail.com
as of 1.4.2 (just released), this is built-in. it is done via the 'render' method.
just make sure to call $('#calendar').fullCalendar('render') on every tab 'show'
event and you should be fine. thanks
Status: Fixed
Dec 3, 2009
#6 arnaud.b...@gmail.com
Works great for me !!!

Thanks a lot.
Jan 8, 2012
#7 martin.s...@gmail.com


this is working fine (thanks guys)


//#tabs is id of on page tabs 
//#fullcalendar is id of fullcalendar inside tab

$('#tabs').bind('tabsshow', function(event, ui) {
    	$(ui.panel).find('div.fc-content').each( 
    	    	function() { 
    	    	$(ui.panel).find('#fullcalendar').fullCalendar('render');
    	    	}
    	);
});


Aug 13, 2013
Project Member #8 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Implemented
Aug 13, 2013
Project Member #9 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Released
Sign in to add a comment

Powered by Google Project Hosting