JavaScript Calendar

Note: Looking for enhanced accessibility and advanced features? Check out CalendarJS, our feature-rich calendar component with comprehensive ARIA support and keyboard navigation. jSuites Calendar is perfect for lightweight implementations.

The jSuites Calendar is a lightweight JavaScript Calendar plugin and web component crafted to facilitate the creation of calendar components. It supports date selection, date pickers, and datetime pickers. Engineered for an outstanding user experience, it ensures compatibility across various devices.

Framework Agnostic: Seamless integration with React, Angular, VueJS, and more.
Responsiveness: Optimized for mobile devices.
Functionality: Enables date and time selection.
Custom Views: Supports year-month only display.
Event Handling: Offers multiple events for straightforward integration.
Flexibility: Available as a JavaScript Plugin or Web Component.
Date Constraints: Allows for the definition of valid date ranges.
Localization: Supports international settings for global usability.

Documentation

Install

npm install jsuites

Methods

Upon initializing a calendar instance, the following methods are available for programmatic interaction:

Method	Description
`open()`	Opens the calendar picker, allowing user interaction.
`close(ignoreEvents)`	Closes the calendar. If `ignoreEvents` is set to true, the `onclose` event will not be triggered. `@param boolean ignoreEvents` - Skips the `onclose` event.
`getValue()`	Retrieves the currently selected date.
`setValue(newValue)`	Sets a new date for the calendar. `@param mixed newValue` - The new date, formatted as `YYYY-MM-DD HH:MM:SS`.
`reset()`	Clears the current selection, resetting the input value.
`next()`	Advances the calendar to the next month.
`prev()`	Moves the calendar back to the previous month.

Events

You can bind one of the following events to your calendar to seamlessly integrate it with your application:

Method	Description
`onchange`	Fires a method when the calendar's value changes.
`onupdate`	Invokes a method whenever any update occurs in the calendar picker.
`onclose`	Activates a method once the calendar picker is closed.
`onopen`	Initiates a method when the calendar picker is opened.

Initial Settings

Customize the behavior of the calendar with the following initial settings:

Property	Description
`type: string`	Defines the picker type as either `'default'` or `'year-month-picker'`. Default is `'default'`.
`validRange: [ date, date ]`	Restricts date selection to a specified range. Default is `null`, allowing for unrestricted selection.
`startingDay: number`	Sets the starting day of the week, with 0 being Sunday and 6 being Saturday. Default is `0 (Sunday)`.
`format: string`	Sets the date format. Default format is `'YYYY-MM-DD'`.
`readonly: boolean`	If true, disables manual changes to the input field.
`today: boolean`	If true, opens the calendar with today's date when no default value is set. Default is `false`.
`time: boolean`	If true, includes a time picker in the calendar. Default is `false`.
`resetButton: boolean`	If true, a reset button is displayed. Default is `true`.
`placeholder: string`	Text displayed when the input field is empty.
`months: array`	Array containing short names of the months. Default is `['Jan', 'Feb', 'Mar', ...]`.
`monthsFull: array`	Array containing full names of the months. Default is `['January', 'February', ...]`.
`weekdays: array`	Array containing names of the weekdays. Default is `['Sunday', 'Monday', ...]`.
`weekdays_short: array`	Array containing short names of the weekdays. Default is `['S', 'M', ...]`.
`value: string`	Sets a default date.
`fullscreen: boolean`	If true, renders the calendar in fullscreen. Default is `true` for screens with a width of 800px or less.
`opened: boolean`	The calendar opens by default if set to true. Default is `false`.
`textDone: string`	Sets the text of the 'Done' button.
`textReset: string`	Sets the text of the 'Reset' button.
`textUpdate: string`	Sets the text of the 'Update' button.

Helpers

Utilize the following static methods for general date and time operations:

Description
`jSuites.calendar.prettify(date: string, text: object)` Converts a date string into a user-friendly time lapse from the current date.
`jSuites.calendar.prettify()` Retrieves all dates on a page with the class `.prettydate` and prettifies them.
`jSuites.calendar.now()` Returns the current date as a string.
`jSuites.calendar.dateToNum(date: string\|object) => number` Converts a date string or object into an Excel-like number (e.g., 45134).
`jSuites.calendar.numToDate(date: number) => string` Converts an Excel-like number into a date string.
`jSuites.calendar.extractDateFromString(date: string, format: string) => string` Attempts to convert a formatted date string into an ISO date string based on the provided format.
`jSuites.calendar.getDateString(date: string, format: string)` Converts an ISO date string or date object into a formatted string.

Format

The format consists of a versatile set of tokens that define the representation of dates and times. Here are a few examples of combination of tokens you can utilize:

Token	Description
DAY	Represents the day of the week (e.g., Monday).
WD	Represents the abbreviated day of the week (e.g., Mon).
DDDD	Represents the full name of the day of the week (e.g., Monday).
DDD	Represents the abbreviated name of the day of the week (e.g., Mon).
DD	Represents the two-digit day of the month (e.g., 05).
D	Represents the day of the month (e.g., 5).
Q	Represents the quarter of the year (e.g., Q1).
HH24	Represents the hour in 24-hour format (e.g., 13 for 1 PM).
HH12	Represents the hour in 12-hour format (e.g., 01 for 1 AM/PM).
HH	Represents the two-digit hour (e.g., 01 or 13).
H	Represents the hour (e.g., 1 or 13).
AM\PM	Represents the AM/PM indicator.
MI	Represents the two-digit minute (e.g., 07).
SS	Represents the two-digit second (e.g., 42).
MS	Represents the milliseconds (e.g., 345).
YYYY	Represents the four-digit year (e.g., 2022).
YYY	Represents the three-digit year (e.g., 022).
YY	Represents the two-digit year (e.g., 22).
Y	Represents the year (e.g., 2022).
MONTH	Represents the full name of the month (e.g., January).
MON	Represents the abbreviated name of the month (e.g., Jan).
MMMMM	Represents the abbreviated name of the month (e.g., Jan).
MMMM	Represents the full name of the month (e.g., January).
MMM	Represents the abbreviated name of the month (e.g., Jan).
MM	Represents the two-digit month (e.g., 01).
M	Represents the month (e.g., 1).

Format examples
`mm/dd/yyyy`
`dd/mm/yyyy`
`d/m/y`
`hh:mm:ss`
`d/m/h h:m:s`

Examples

Basic Date Picker

Create a simple date picker with default settings:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY',
    placeholder: 'Select a date'
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                format={'DD/MM/YYYY'}
                placeholder={'Select a date'}
            />
        </div>
    );
}

export default App;

<template>
    <Calendar
        ref="calendar"
        format="DD/MM/YYYY"
        placeholder="Select a date"
    />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    }
}
</script>

DateTime Picker

Implement a responsive date and time input with a calendar picker. This tool enables users to select dates and times according to a specified format and monitors events triggered by changes.

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<input id='calendar' />
<input type="button" value="getValue()" id="btn1" />
<script>
let instance = jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY HH:MM',
    time: true,
    onchange: function() {
        console.log(arguments)
    }
});

document.getElementById('btn1').addEventListener('click', function() {
    alert(instance.getValue());
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';

import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar ref={calendar} format={'DD/MM/YYYY HH:MM'} time={true} onchange={() => { console.log(arguments) }} />
            <button onClick={() => alert(calendar.current.getValue())}>Get Value</button>
        </div>
    );
}

export default App;

<template>
    <div>
        <Calendar
            ref="calendar"
            format="DD/MM/YYYY HH:MM"
            :time="true"
            :onchange="onChange"
        />
        <button @click="handleClick">Get Value</button>
    </div>
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
    methods: {
        onChange: function() {
            console.log(arguments)
        },
        handleClick: function() {
            alert(this.$refs.calendar.current.getValue())
        }
    }
}
</script>

Embedding a Calendar in Your Application

Incorporate a calendar picker with customizable actions to streamline date and time selection while enabling automated programmatic responses.

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<div id='calendar'></div>
<input type="button" value="getValue()" id="btn2"/>
<script>
let instance = jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY HH:MM',
    onupdate: function() {
        console.log(arguments)
    }
});

document.getElementById('btn2').addEventListener('click', function() {
    alert(instance.getValue());
})
</script>
</html>

import { Calendar } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'


function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar ref={calendar} format={'DD/MM/YYYY HH:MM'} time={true} onupdate={() => { console.log(arguments) }} />
            <button onClick={() => alert(calendar.current.getValue())}>Get Value</button>
        </div>
    );
}

export default App;

<template>
    <div>
        <Calendar
            ref="calendar"
            format="DD/MM/YYYY HH:MM"
            :time="true"
            :onupdate="onUpdate"
        />
        <button @click="handleClick">Get Value</button>
    </div>
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
    methods: {
        onUpdate: function() {
            console.log(arguments)
        },
        handleClick: function() {
            alert(this.$refs.calendar.current.getValue())
        }
    }
}
</script>

Date Picker Web Component

Explore utilizing the jSuites calendar as a calendar picker web component and binding JavaScript events for enhanced functionality.

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://jsuites.net/v6/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<jsuites-calendar value="2020-01-20"></jsuites-calendar>

<script>
document.querySelector('jsuites-calendar').addEventListener('onchange', function(e) {
    console.log('New value: ' + e.target.value);
});
document.querySelector('jsuites-calendar').addEventListener('onclose', function(e) {
    console.log('Calendar is closed');
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    const onChange = function(el, cv, pv) {
        console.log('New value: ' + cv);
    }

    const onClose = function(el) {
        console.log('Calendar is closed');        
    }

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                value={"2020-01-20"}
                onchange={onChange}
                onclose={onClose}
            />
        </div>
    );
}

export default App;

<template>
    <Calendar ref="calendar" value="2020-01-20" :onchange="onChange" :onclose="onClose" />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
    methods: {
        onChange: function (_, cv) {
            console.log('New value: ' + cv);
        },
        onClose: function () {
            console.log('Calendar is closed')
        }
    }
}
</script>

Calendar with Date Range Restriction

Restrict date selection to a specific range:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY',
    validRange: ['2024-01-01', '2024-12-31'],
    placeholder: 'Select a date in 2024'
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                format={'DD/MM/YYYY'}
                validRange={['2024-01-01', '2024-12-31']}
                placeholder={'Select a date in 2024'}
            />
        </div>
    );
}

export default App;

<template>
    <Calendar
        ref="calendar"
        format="DD/MM/YYYY"
        :validRange="validRange"
        placeholder="Select a date in 2024"
    />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
    data() {
        return {
            validRange: ['2024-01-01', '2024-12-31']
        }
    }
}
</script>

Year-Month Picker

Create a calendar that only allows year and month selection:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
jSuites.calendar(document.getElementById('calendar'), {
    type: 'year-month-picker',
    format: 'MMM/YYYY',
    placeholder: 'Select month and year'
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                type={'year-month-picker'}
                format={'MMM/YYYY'}
                placeholder={'Select month and year'}
            />
        </div>
    );
}

export default App;

<template>
    <Calendar
        ref="calendar"
        type="year-month-picker"
        format="MMM/YYYY"
        placeholder="Select month and year"
    />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    }
}
</script>

Calendar with Custom Format

Implement a calendar with a custom date format:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
jSuites.calendar(document.getElementById('calendar'), {
    format: 'DDD, DD MMMM YYYY',
    value: '2024-06-15'
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                format={'DDD, DD MMMM YYYY'}
                value={'2024-06-15'}
            />
        </div>
    );
}

export default App;

<template>
    <Calendar
        ref="calendar"
        format="DDD, DD MMMM YYYY"
        value="2024-06-15"
    />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    }
}
</script>

Calendar with Event Handling

Implement comprehensive event handlers to respond to calendar interactions:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />
<div id="console" style="margin-top: 20px; padding: 10px; background: #f5f5f5;"></div>

<script>
jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY',
    value: '2024-06-15',
    onchange: function(el, currentValue, previousValue) {
        document.getElementById('console').innerHTML =
            'Changed from: ' + previousValue + ' to: ' + currentValue;
    },
    onopen: function(el) {
        console.log('Calendar opened');
    },
    onclose: function(el) {
        console.log('Calendar closed');
    },
    onupdate: function(el, value) {
        console.log('Calendar updated:', value);
    }
});
</script>
</html>

import { Calendar } from 'jsuites/react';
import { useRef, useState } from 'react';
import 'jsuites/dist/jsuites.css';

function App() {
    const calendar = useRef(null);
    const [message, setMessage] = useState('');

    const handleChange = (el, currentValue, previousValue) => {
        setMessage(`Changed from: ${previousValue} to: ${currentValue}`);
    };

    const handleOpen = (el) => {
        console.log('Calendar opened');
    };

    const handleClose = (el) => {
        console.log('Calendar closed');
    };

    const handleUpdate = (el, value) => {
        console.log('Calendar updated:', value);
    };

    return (
        <div className="App">
            <Calendar
                ref={calendar}
                format={'DD/MM/YYYY'}
                value={'2024-06-15'}
                onchange={handleChange}
                onopen={handleOpen}
                onclose={handleClose}
                onupdate={handleUpdate}
            />
            {message && (
                <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
                    {message}
                </div>
            )}
        </div>
    );
}

export default App;

<template>
    <div>
        <Calendar
            ref="calendar"
            format="DD/MM/YYYY"
            value="2024-06-15"
            :onchange="handleChange"
            :onopen="handleOpen"
            :onclose="handleClose"
            :onupdate="handleUpdate"
        />
        <div v-if="message" style="margin-top: 20px; padding: 10px; background: #f5f5f5;">
            {{ message }}
        </div>
    </div>
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
    data() {
        return {
            message: ''
        }
    },
    methods: {
        handleChange(el, currentValue, previousValue) {
            this.message = `Changed from: ${previousValue} to: ${currentValue}`;
        },
        handleOpen(el) {
            console.log('Calendar opened');
        },
        handleClose(el) {
            console.log('Calendar closed');
        },
        handleUpdate(el, value) {
            console.log('Calendar updated:', value);
        }
    }
}
</script>

More examples

Explore additional use cases for the jSuites JavaScript Calendar plugin:

Reactive JavaScript Calendar

LemonadeJS Reactive JavaScript Calendar is free JavaScript Plugin that can create range picker, has keyboard navigation and focus on the best user experience.

JavaScript Calendar with Date Range Picker

JavaScript Calendar

Documentation

Install

Methods

Events

Initial Settings

Helpers

Format

Examples

Basic Date Picker

DateTime Picker

Embedding a Calendar in Your Application

Date Picker Web Component

Calendar with Date Range Restriction

Year-Month Picker

Calendar with Custom Format

Calendar with Event Handling

More examples

Reactive JavaScript Calendar

See Also

CalendarJS - Advanced Calendar Component

JavaScript Calendar

Documentation

Install

Methods

Events

Initial Settings

Helpers

Format

Examples

Basic Date Picker

DateTime Picker

Embedding a Calendar in Your Application

Date Picker Web Component

Calendar with Date Range Restriction

Year-Month Picker

Calendar with Custom Format

Calendar with Event Handling

More examples

Reactive JavaScript Calendar

See Also

CalendarJS - Advanced Calendar Component

Related jSuites Components