search

Paul-DS / bootstrap-year-calendar

[DEPRECATED] A fully customizable year calendar widget, for boostrap !
Apache License 2.0
294 stars 243 forks source link

Showing months one below the other not in one page. #203

Open amitrohra opened 6 years ago

amitrohra commented 6 years ago

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?

William-H-M commented 6 years ago

At least you show some code It's virtually impossible to know what you're doing. Help us to help you

amitrohra commented 6 years ago

Hi,

Sorry for incomplete information, following are the details: I am getting the following output:

Not able to get any event / select dates.

image

Html:

<body>
    <div class="calendar" style=""></div>
    <script>
        $(function(){
            $('.calendar').calendar();
        });
    </script>

</body>

Anything else need to be imported/ I missed applying options?

Pianoman1 commented 6 years ago

Anyone have a solution? I'm having the same issue.

Pianoman1 commented 6 years ago

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.

garth1138 commented 6 years ago

This project can easily be made to work with Bootstrap 4! Use the bootstrap-year-calendar.js file. Make the following changes:

  1. 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'
  2. In _renderBody: function, add classes "d-flex"and "flex-wrap" to line 175 so it reads: monthsDiv.addClass('months-container d-flex flex-wrap');
  3. 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.

amugox commented 5 years ago

@garth1138 Thank you very much. It worked for me