datedreamer

0.3.5 • Public • Published

DateDreamer

An easy to use lightweight javascript calendar library.

Install & Usage

Install

Install DateDreamer with either yarn or npm.

npm install datedreamer
yarn install datedreamer

Use

<script src="node_modules/datedreamer/datedreamer.js">

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

<script>
   window.onload = () => {
       new datedreamer.calendar({...options})
   }
</script>

OR

import * as datedreamer from "datedreamer";

new datedreamer.calendar({...options});

OR

import {calendar} from "datedreamer";

new calendar({...options});

Standalone Calendar

Use this if you want a standalone calendar that comes with an input filled and a Today button.

  • element: Sets where to insert the calendar to. Can be either a CSS selector string or an HTMLElement object.

  • selectedDate: Sets the starting date for the calendar. Can be set to a date string, Date object, or null. If null, todays date will be selected by default. If a string is passed, the format option should also be passed in order for the calendar to know the format of the selectedDate that you are passing.

  • format: Use this to specify the input AND output format of the date. Please see the available formats from DayJS.
    Example: 'DD/MM/YYYY'

  • iconNext: Sets the next arrow icon. You can pass it either text or an svg.

  • iconPrev: Sets the previous arrow icon. You can pass it either text or an svg.

  • inputLabel: Sets the label of the date input element.

  • inputPlaceholder: Sets the placeholder of the date input element.

  • hideInputs: Hides the input and today button from the UI.

  • onChange: Use this to provide a callback function that the calendar will call when the date is changed. The callback function will receive a CustomEvent argument that will include the chosen date inside the detail property.

    new datedreamer.calendar({
        ...,
        onChange: (e) => {
            // Get Date object from event
            console.log(e.detail);
        }
    })
  • onRender: Use this to provide a callback function that the calendar will call when the calendar is rendered. The callback function will receive a CustomEvent argument that will include a calendar property inside of the event detail property.

        new datedreamer.calendar({
            ...,
            onRender: (e) => {
                // Calendar has rendered
                console.log(e.detail.calendar);
            }
        })
  • theme: Sets the style template to use. Options are unstyled and lite-purple.

    • unstyled:

      Unstyled Calendar

    • lite-purple:

      Calendar using lite-purple theme

  • styles: Use this property to pass css styles that will be passed into the components style tag.

        new datedreamer.calendar({
            ...,
            styles: `
                button {
                    color: blue
                }
            `
        })

Toggle Calendar

The toggle calendar has the same options as the Standalone Calendar, however the input is a standalone input element which when clicked, triggers the calendar to show.

Toggle Calendar Input

Toggle Calendar

new datedreamer.calendarToggle({
    ...options
});

Development

Install dependencies using yarn

yarn install

Run development server

yarn start



Developed with love by Jorge Felico

Readme

Keywords

none

Package Sidebar

Install

npm i datedreamer

Weekly Downloads

49

Version

0.3.5

License

MIT

Unpacked Size

170 kB

Total Files

25

Last publish

Collaborators

  • jorgefelico