Issue 644: Views squished when page loaded
Status:  Duplicate
Merged:  issue 465
Owner: ----
Closed:  Oct 2010
Reported by n8cs...@gmail.com, Sep 22, 2010
I am using fullCalendar in a portal and have two portlets loading side by side on a single page. When this set up is used and there are events displayed in the view, the views get squished. If I click on the left/right arrows to move to the next day/week, it displays properly.

I have attached a screenshot so that you can see what is happening. Below is the code that creates the fullCalendar daily view instance. I don't think there is anything in the code or the params being passed that is incorrect.

CalendarViewerPortlets['V_015f10fc20d7e1fb93b65d714bf46f14'].buildEventCalendar('agendaDay', true, 6, 15);

this.buildEventCalendar = function(dv, dw, fh, mb, gc){
    	var cpSelector = this.ut.createIdSelector(this.addNamespace("calendarportlet"));
    	var formSel = this.ut.createIdSelector(this.addNamespace("configForm"));
    	var ecSel = this.ut.createIdSelector(this.addNamespace("eventCalendar"));
    	var edSel = this.ut.createIdSelector(this.addNamespace("eventDetailsContainer"));
    	
    	//have to set a variable to reference "this" inside of jQuery
   	 	var cvp = this;
   	 	jQuery.getScript(this.getContextPath()+"/js/fullcalendar/fullcalendar.min.js", function() {
	 		cvp.ut.loadCss(cvp.getCss());
	 		cvp.ut.loadCss(cvp.getTheme());
	    	jQuery(ecSel).fullCalendar({
	    		theme: true,
	    		defaultView: dv,
	    		weekends: dw,
	    		slotMinutes: mb,
	    		firstHour: fh,
	    		header: {
	    			left: 'prev,next today',
	    			center: 'title',
	    			right: 'month,agendaWeek,agendaDay'
	    		},
	    		buttonText: {
	    			agendaWeek: "Weekly",
	    			agendaDay: "Daily",
	    			basicWeek: "Basic Week",
	    			basicDay: "Basic Day",
	    			month: "Monthly",
	    			today: "Today"
	    		},
	    		loading: function(isLoading, view) {
	    			jQuery.getScript(cvp.getContextPath()+"/js/jquery.blockUI.js", function() {
		    			if(isLoading){
		    				jQuery(cpSelector).block({
		    					message: "<img src='"+cvp.getContextPath()+"/images/icon_loading.gif' align='absmiddle' alt='Loading...' /> Fetching events..."
		       				 });
		    			}else{
		    				jQuery(cpSelector).unblock();
		    			}
	    			});
	    		},
	    		events: function(start, end, callback) {
	    			var formData = jQuery(formSel).serialize();
	    			formData += "&gtDate="+jQuery.fullCalendar.formatDate(start,"yyyy-MM-dd")+"&ltDate="+jQuery.fullCalendar.formatDate(end,"yyyy-MM-dd");
	    	        jQuery.ajax({
	    	        	url: cvp.getResourceUrl(), 
	    	    		type: "POST",
	    	            data: formData,
	    	            beforeSend: function(xhr) {
	    	    			cvp.hideMessage();
	    				},
	    	            success: function(jsonStr) {
	    	                var events = [];
	    	                try{
	    	        			jsonObj = jQuery.parseJSON(jsonStr);
	    	        			if(jsonObj.error != undefined){
	    	        				//there was an error retrieving the events from the api
	    	        				cvp.showMessage("An error occurred retrieving the event data. "+
	    	        					"Please try your request again. If the problem persists, "+
    	       							"contact the system administrator.");
	    	       			 	}else if(jsonObj.events.event == undefined || jsonObj.events.event == null){
	    	       			 		//no events were returned from the api
	    	       			 		cvp.showMessage("There are no events that match the criteria.");
	    	       			 	}else{
	    	       			 		//there is no error, so parse the events
	    	       			 		if(jsonObj.events.event.length == undefined){
				    					//there is only one event
		    	        				var stDate = jsonObj.events.event.dateStart__.replace(" ","T")+"Z";
		    	        				var endDate = jsonObj.events.event.dateEnd__.replace(" ","T")+"Z";
		    	        				events.push({
		    	        					id: jsonObj.events.event.eventId__,
		    	        					title: jsonObj.events.event.title__,
		    	        					allDay: jsonObj.events.event.allDay__,
		    	        					start: stDate,
		    	        					end: endDate,
		    	        					category: jsonObj.events.event.primaryCategory__,
		    	        					recurring: jsonObj.events.event.recurring__,
		    	        					tbd: jsonObj.events.event.timeTBD__,
		    	        					hasAttachments: jsonObj.events.event.hasAttachments__
		    	        				});
	    	       			 		}else{
	    	       			 			//there are multiple events
	    	       			 			jQuery.each(jsonObj.events.event, function() {
			    	        				var stDate = this.dateStart__.replace(" ","T")+"Z";
			    	        				var endDate = this.dateEnd__.replace(" ","T")+"Z";
			    	        				events.push({
			    	        					id: this.eventId__,
			    	        					title: this.title__,
			    	        					allDay: this.allDay__,
			    	        					start: stDate,
			    	        					end: endDate,
			    	        					category: this.primaryCategory__,
			    	        					recurring: this.recurring__,
			    	        					tbd: this.timeTBD__,
			    	        					hasAttachments: this.hasAttachments__
			    	        				});
	    	       			 			});
	    	       			 			cvp.showLimitedResultsMessage(jsonObj.events.event.length);
	    	       			 		}
	    	       			 		//build the category legend
	    	       			    	cvp.buildCategoryLegend(events);
	    	        			}
	    	        		}catch(err){
	    	        			cvp.showMessage("There was an error parsing the events");
	    	        			cvp.loggr.log(err);
	    	        		}
	    	                callback(events);
	    	            },
	    				error: function(XMLHttpRequest, textStatus, errorThrown){
	    					cvp.showMessage("An error occurred when retrieving the event data");
	    				},
	    				complete: function(xhr, status) {
	    					jQuery(cpSelector).unblock();
	    				}
	    	        });
	    	    },
	    		eventRender: function(event, element) {
	    			if(event.recurring){
	    				jQuery(element).find("a:first").prepend('<img src="'+cvp.il.getIconsObj()["recurring"]+'" alt="recurring" border="0" />');
	    			}
		    		if(event.allDay){
						jQuery(element).find("a:first").prepend('<img src="'+cvp.il.getIconsObj()["allDay"]+'" alt="all day" border="0" />');
					}
	    			if(event.tbd){
	    				jQuery(element).find("a:first").prepend('<img src="'+cvp.il.getIconsObj["tbd"]+'" alt="tbd" border="0" />');
	    			}
	    			/*
	    			if(event.hasAttachments){
	    				jQuery(element).find("a:first").prepend('<img src="'+cvp.il.getIconsObj["attachment"]+'" alt="recurring" border="0" />');
	    			}
	    			*/	    			
	    			//set background color based on category
	    			jQuery(element).find("a:first").css("background-color", cvp.cl.getGroupCatsObj()[event.category]);
	    			jQuery(element).find("span").css("background-color", cvp.cl.getGroupCatsObj()[event.category]);
	    			//add tabindex, does not appear to make a difference 
	    			//jQuery(element).find("a:first").attr("tabindex","0");
	    		},
	    		dayClick: function( date, allDay, jsEvent, view ) {
	    			jQuery(ecSel).fullCalendar('gotoDate',date);
	    			jQuery(ecSel).fullCalendar('changeView','agendaDay');
	    		},
	    		eventClick: function(event, jsEvent, view) {
	    			cvp.showEventDetailDialog(event.id);
	    		}
	    		/* This is back button code.
	    		,
	    		year: tmpYear,
	    		month: tmpMonth,
	    		day: tmpDay,
	    		viewDisplay: function (view) {
	    			var d = jQuery('#calendar').fullCalendar('getDate');
	    			window.location.hash = 'year=' + d.getFullYear() + '&month=' + (d.getMonth() + 1) + '&day=' + d.getDate() + '&view=' + view.name + '&cats=' + tmpCats + '&tz=' + tmpTz;
	    		}
	    		*/
	    	});
   	 	});
    };
fullCalendar_squishedDailyView.png
144 KB   View   Download
Sep 22, 2010
#1 n8cs...@gmail.com
FYI, the above screen shot is from Firefox 3.6.10. This issue does not appear to happen in IE 8. I tried loading the CSS before the fullCalendar.js file and after it and it appears to have no effect either way.
Oct 7, 2010
Project Member #2 adamrs...@gmail.com
merging with an identical issue, but could post a runnable html file in the new issue? will help me reproduce it better. thanks
Status: Duplicate
Mergedinto: 465