Calendar Placement, Responsiveness

[ctrachte]

Currently, when using the Datepicker on smaller devices, the calendar will not be entirely visible on the screen because of absolute placement.

We need to rework the calendar placement so that:

Smaller devices don't bother with datepicker.calendarPlacement() but rather use straight css, and breakpoints

• Calendar should be 100% width and centered for small devices, not a static size. Add this to the CSS.
• Add logic to datepicker.calendarPlacement() method to detect screen size and disable if a small screen size. (galaxy s5 for example), or mobile device. Calendar then relies solely on CSS and media breakpoint queries that correspond with this logic.
• Calendar placement method datepicker.calendarPlacement() should still exist for larger screens such as desktop monitors, etc.

[himansh-gjr]

Hey @ctrachte I will love to work on this, I followed the instruction from here to setup the project locally by using git clone but getting a blank page when opening the Datepicker.html in google chrome

.

I am new to open source need some help in getting started and setting up the project.

[ctrachte]

That is interesting. I have the master branch open right now in Chrome and I do not have that error. Do you see any console errors in your dev tools when you right click > inspect?

[ctrachte]

I would suggest getting a fresh copy, then ensuring you are checked out onto the main branch, then double check the references in your Datepicker.html file. You may need to remove the import and export lines in Datepicker.html and Datepicker.js respectively. Then ensure the Datepicker.js file is referenced correctly in the <script> tags of Datepicker.html

[himansh-gjr]

Thanks ! it's working now, issue was the Githubissues.

Githubissues is a development platform for aggregating issues.