Hi,
It seems that the jQuery accordion uses
display: none; to collapse pages, which messes up some of the sizing computations that the calendar control does. We will provide a fix for that in the next release, but in the meantime, you can use the following workaround:
var originalGetDimensions = MindFusion.Scheduling.ResourceView.prototype.getDimensions;
MindFusion.Scheduling.ResourceView.prototype.getDimensions = function (e) {
if ($mindfusion(this._calendar.get_element()).is(":hidden")) { return; }
originalGetDimensions.apply(this, [e]);
};
In addition to that, you'll need to recalculate the dimensions of the control when its parent accordion page is expanded. To do that, call the
adjust method of the calendar in the accordion's Activate handler:
$(function () {
$("#accordion").accordion({ activate: function (event, ui) {
var plannerDiv = ui.newPanel.find('div.WebPlannerResourceView')[0];
if (plannerDiv)
plannerDiv.Calendar.adjust();
}
});
});
If the adjustments in the sizes are visible during the opening of a calendar's accordion item - that can happen if animations on the Accordion control are enabled - you may consider disabling the animations or using an overlay div over the calendar to hide it until the adjustments are complete. You can use calendar's own built-in overlay. To do that, modify the accordion initialization code like this:
$(function () {
$("#accordion").accordion({
animate: true, /*false - to disable animations*/
beforeActivate: function (event, ui) {
var jqPlanner = ui.newPanel.find('div.WebPlannerResourceView');
if (jqPlanner) {
jqPlanner.children().append("<div class=\"WebPlannerLoader\"></div>");
}
},
activate: function (event, ui) {
var plannerDiv = ui.newPanel.find('div.WebPlannerResourceView')[0];
if (plannerDiv) {
plannerDiv.Calendar.adjust();
plannerDiv.Calendar.endInit();
}
}
});
});
Regards,
Lyubo