Incorrect presentation of the calendar (no matrix format)

[SlitEye]

There are an issue at my Bootstrap project. The generated calender is only shown as picked day list, not as typical calendar form (as matrix). What am I doing wrong?

See my Code and the screenshot (attached to unzip): P3.zip

• index.html:
• controller.js:
• calendar.html:

Screenshot with issue:

You can see my current project here: www.openskymap.org At this page, please click on the menu item "Calendar" to reproduce my issue.

I use the following libraries:

• moment-with-locales.min.js (current version),
• datepickk.min.js (current version: v1.4.1),
• datepickk.min.css (current version: v1.4.1),
• jquery-3.3.1.slim.min.js,
• popper.min.js (v1.14.7),
• bootstrap.min.js (v4.3.1),
• bootstrap.min.css (v4.3.1),
• fontawesome.com/releases/v5.7.2/css/all.css,
• /angularjs/1.7.8/angular.min.js,
• /angularjs/1.7.8/angular-route.js.

Tested with:

• Firefox x64 v65.0.2 on Windows 10 Pro Build 1809 x64,
• Chrome x64 v72.0.3626.121,
• Edge of Windows 10 Pro x64 Build 1809

[Elvenmagic]

You're not doing anything wrong.

Problem is that there's css class name d-table in generated code, which must have display: flex; property. But bootstrap has also defined utility class d-table which has display: table !important. You must override that bootstrap specification with your own css, like #Datepickk .d-table { display: flex !important }