Table of Contents

• About the Project
  • Built With
• Getting Started
  • Configurable options
  • Installation
• Contact
• Acknowledgements

About The Project

Lightweight datepicker component for your projects. It's fully compatible with any frameworks/libraries (React, Vue, Angular, ecc...). Light fast and customizable. Partially inspired by airbnb/react-dates.

Built With

This library does not have any dependencies. It's fully and totally pure vanilla javascript. We only used devDependencies to write modern code, beautify and bundle it:

• babel
• rollup
• eslint
• prettier

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

2. Clone the repo

git clone https://github.com/TheBous/universal-datepicker.git

3. Install NPM packages

yarn

4. Start your locally application

yarn start

Configurable options

1. DOMElement: DOM element to which the calendar should be attached (es. body, #app)

2. today: Pass today from the parent application, so calendar can avoid to adapt itself to internalization and/or timezones. Today could be a js Date, a string formatted with YYYY/MM/DD or an object { year, month, day }

3. initialDate: selected date to fit calendar to the right month/year on the splash screen

4. weekdaysLabels: Array of weekdays label in current language

5. monthsLabels: Array of months label in current language

6. checkin: checkin in javascript date format (checkin: new Date()).

7. checkout: checkout in javascript date format (checkout: new Date()).

8. orientation: calendar orientation : vertical with scroll or horizontal with arrows (horizontal|vertical).

9. horizontalPages: number of calendar page per view in horizontal view.

10. verticalPages: number of calendar page per view in vertical view.

11. onCheckinChange: (function) callback triggered with new checkin date (dd/mm/yyyy) .

12. onCheckoutChange: (function) callback triggered with new checkout date (dd/mm/yyyy) .

13. maxCheckin: max number of days between checkin and checkout (default = 30)

14. leftArrowClassname: Class to add some icon style to left arrow

15. rightArrowClassname: Class to add some icon style to right arrow

16. showTodayDate: Boolean to show a custom UI for today date cell

17. customCheckinElement: DOM element to customize checkin calendar cell (ex ) customizable with position relative-absolute

18. customCheckoutElement: DOM element to customize checkout calendar cell (ex ) customizable with position relative-absolute

Installation

1: Install NPM packages

yarn add universal-datepicker

2: Add these lines when you want to show calendar

const UniversalCalendar = require("universal-datepicker");
const calendar = new UniversalCalendar({configs here})

3: Add a DOM element in your own project. Coincides with the DOMElement configuration

<div id="calendar"></div>

4: Horizontal arrows to switch months are <i></i>. You need to pass to application a class to these icons with leftArrowClassname and rightArrowClassname

{
  ...,
  leftArrowClassname: "my-custom-right-arrow-class",
  rightArrowClassname: "my-custom-right-arrow-class"
}

5: Add custom css hooking to existing classes

In order to add some style customization, you need to override these CSS classes (optional):

• calendar__wrapper: calendar generic wrapper
• calendar__wrapper--horizontal: calendar wrapper with horizontal orientation
• calendar__wrapper--vertical: calendar wrapper with horizontal orientation
• calendar__weekday: Each generic weekday on the top of calendar
• calendar__header: Header with month - year values
• calendar__arrow-wrapper: Horizontal calendar arrows wrapper
• calendar__arrow : Arrow to change month in horizontal view
• calendar__arrow--left: Arrow left
• calendar__arrow--right: Arrow right
• calendar__cell: Each generic calendar day
• calendar__cell--past: A past day in calendar
• calendar__cell--checkin: Selected checkin in calendar
• calendar__cell--checkout: Selected checkout in calendar
• calendar__cell--range: Date between checkin and checkout
• calendar__cell--today: Today date
• calendar__cell--today-highlighted: Rule to custom today highlighting date
• calendar__cell__decorator: Decorator for checkin and checkout cells

Limits

With minor 1.2.0 a user can select a date up to 1 year from now.

Contact

TheBous - @the_bous - [email protected]