SwiftCal - A Calendar and Time Picker Web Component

GitHub repo

View more examples

View on NPM

Default calendar: select a range by clicking/tapping on two dates, select a single data by triple clicking.

Index:

Usage

Loading the component

Load the ./clientSideJS/calendar.js in your page passing the defer attribute,

<script defer src="./clientSideJS/calendar.js"></script>

Or from a CDN:

<script defer src="https://cdn.jsdelivr.net/gh/festinalente/SwiftCal2/clientSideJS/calendar.js"></script>

Then add a tag to your markup where you want the calendar,

<swift-cal></swift-cal>

Options are passed as data-attributes. The example bellow sets the calendar to display 12 months into the future:

<swift-cal data-number-of-months-to-display='12'></swift-cal>

Retrieving data

Data is retrieved directly from the WebComponent, you can access it with a querySelector. The function dynamicData() returns the data:

document.querySelector('.calendar-container').dynamicData()

The dynamicData object

Data from the calendar is stored in an object called "dynamicData". This object can be accessed directly from the WebComponent with the calendar.dynamicData().

The example below shows the form the data takes:

Custom Events

You can listen for an event that is fired every time a selection is made, there are two custom events:

  1. timeSelect - fired when a time is selected
  2. dateSelect - fired when a date is selected

You can listen for these as you would with a normal event:

calendar.addEventListener('timeSelect', function () { ... });

Developing and customising

To customize the calendar, follow these steps:

  1. git clone https://github.com/festinalente/SwiftCal2.git
  2. cd to the folder SwiftCal2 and run "npm install"
  3. then run "grunt watch

Now any changes you make will be written to and compiled (making the code backward compatible) automatically.

Appearance

To simply change appearance without breaking anything, the best thing to do is to alter the variables in variables.scss.

If you are a designer however and can make it look better, consider submitting a pull request.

Language and text

The easiest way to change language and or text is to edit the values in ./preBundlingJS/languages.js

Instantiation and Options

Instantiation via HTML

The calendar can be used as a web component by simply adding an element to the page

<swift-cal></swift-cal>

Options passed in data attributes using dash case

Various options can be passed to the calendar as data parameters. These parameters are string representations of primitives e.g. int, boolean, string etc.

Instantiation via JavaScript

The calendar can be instantiated via JavaScript and parameters passed in an object. The big difference is the requirement to pass a parent element to the calendar.

Example code used to instantiate the first calendar at the top of this page:

const cal = new calendar.SwiftCal(); cal.generateCalendar({ parentDiv: '.eg', numberOfMonthsToDisplay: 3, displayTimeChooserModal: false });

Options passed via an object to the generateCalendar() function using camel case -these are otherwise the same as the options passed to in html data attributes:

Examples:

TODO

Have a feature request, improvement suggestion or a job for me? Mail me. Bugs can be files under issues on GitHub.