bootstrap-year-calendar
bootstrap-year-calendar copied to clipboard
Paul-DS
Showing months one below the other not in one page.
I am not able to display the entire calendar in one page, I get the calendar one below the other.
Also not able to perform any events.
Is there anything I am missing to specify? Can you please guide?
At least you show some code It's virtually impossible to know what you're doing. Help us to help you
Hi,
Sorry for incomplete information, following are the details: I am getting the following output:
Not able to get any event / select dates.
Html:
<script type="text/javascript" src="js/bootstrap-year-calendar.js"></script>
</head>
<body>
<div class="calendar" style=""></div>
<script>
$(function(){
$('.calendar').calendar();
});
</script>
</body>
Anything else need to be imported/ I missed applying options?
Aha! I figured it out. The problem is that this bootstrap-year-calendar widget is not compatible with bootstrap v4. I switched to bootstrap 3.3.5 and it's working now. It may not be my place to criticize, but I would highly advise the makers of this plugin to revise their documentation to mention which version of bootstrap to use. It also doesn't help when they recommend you use npm as the package manager, but the command they suggest for installation will install bootstrap v4, which causes even more confusion. I don't know, that's just how I would do things.
This project can easily be made to work with Bootstrap 4! Use the bootstrap-year-calendar.js file. Make the following changes:
- assuming you are using downloaded fontawsome, change all "glyphicon glyphicon" to "fas fa" (no glyphicons included in BS4) eg: 'glyphicon glyphicon-chevron-right' to 'fas fa-chevron-right'
- In _renderBody: function, add classes "d-flex"and "flex-wrap" to line 175 so it reads: monthsDiv.addClass('months-container d-flex flex-wrap');
- change classes in the setInterval function (line 597) for monthContainerClass. remove the "xs-" from each class name (xs is deprecated) so they just look like "col-2" , "col-3" etc.
That is all! It is working for me with Bootstrap4.
