This is a very obscure one.
When the data is directly assigned in the controller and thus available when the page is being rendered, the sizing appears to mess up.
I have this in my controller;
for(var i = 0; i < 10; ++i)
{
$scope.events.push({
title: 'Event ' + i,
start: new Date(),
end: new Date(),
allDay: false
});
}
When I load the page, the calendar looks like this;
When I resize the window, even a pixel, the issue fixes itself. I was also able to fix the issue by adding this in my controller, effectively calling the window resize;
$timeout(function()
{
angular.element(window).triggerHandler('resize');
});
Now, when I load the data through an AJAX call, the problem does not occur and everything looks fine from the start. My guess is that this has something to do with the data being assigned before the calendar is rendered. If there is even the slightest delay in the data being assigned (also if it is assigned withing a $timeout call), this issue does not occur.
Perhaps not something that will ever happen in a real situation, but something to be aware of.
This is a very obscure one.
When the data is directly assigned in the controller and thus available when the page is being rendered, the sizing appears to mess up.
I have this in my controller;
When I load the page, the calendar looks like this;
When I resize the window, even a pixel, the issue fixes itself. I was also able to fix the issue by adding this in my controller, effectively calling the window resize;
Now, when I load the data through an AJAX call, the problem does not occur and everything looks fine from the start. My guess is that this has something to do with the data being assigned before the calendar is rendered. If there is even the slightest delay in the data being assigned (also if it is assigned withing a $timeout call), this issue does not occur.
Perhaps not something that will ever happen in a real situation, but something to be aware of.