Open
Description
Problem is with how responsive support is implemented, month container initially has no col-xx-yy classes thus has full width and all months are rendered beneath each other.
Responsive column class is calculated with
/* Responsive management */
setInterval(function() {
var calendarSize = $(_this.element).width();
var monthSize = $(_this.element).find('.month').first().width() + 10;
var monthContainerClass = 'month-container';
if(monthSize * 6 < calendarSize) {
monthContainerClass += ' col-xs-2';
}
else if(monthSize * 4 < calendarSize) {
monthContainerClass += ' col-xs-3';
}
else if(monthSize * 3 < calendarSize) {
monthContainerClass += ' col-xs-4';
}
else if(monthSize * 2 < calendarSize) {
monthContainerClass += ' col-xs-6';
}
else {
monthContainerClass += ' col-xs-12';
}
$(_this.element).find('.month-container').attr('class', monthContainerClass);
}, 300);
This can be removed altogether if creation of "month-container" inside _renderBody is changed from
...
/* Container */
var monthDiv = $(document.createElement('div'));
.addClass('month-container');
...
to something like
...
/* Container */
var monthDiv = $(document.createElement('div'));
monthDiv.addClass('month-container col-xs-12 col-sm-4 col-md-3 col-lg-2');
...
It would be even better if new option for responsive column classes is introduced.
Metadata
Metadata
Assignees
Labels
No labels