| Issue 644: | Views squished when page loaded | |
| 2 people starred this issue and may be notified of changes. | Back to list |
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 += ">Date="+jQuery.fullCalendar.formatDate(start,"yyyy-MM-dd")+"<Date="+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;
}
*/
});
});
};
Sep 22, 2010
#1
n8cs...@gmail.com
Oct 7, 2010
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 |
|
| ► Sign in to add a comment |