Click on the input fields downthere to see the examples

📳 Full Responsive
🌱 Double / Single Format
⚙️ Set The Date
🍀 Add "Any Date" Option
🔒 Disable Dates
💡 Relates 2 datepickers for range
📎 Execute external function on click
🤏 Minified version is just 6.3K
✌️ Just include 2 files and call many times you need in a page
📅 Aria Label
⌨️ Key Navigation support

Currently beta version for key navigation in this DEMO

Easy usage:

1. Include CSS and JS

2. Create any field with an unique ID in the page

3. Init the calendar passing a json

Example 1: Two columns

Two column
Just call the function passing just the id

// Just one parameter
new DeskyCalendar({'calendar_date_selector1': {mode: "double"}})

calendar_date_selector1

Example 2: One Column

One column (default) pass single as second parmeter

new DeskyCalendar({"calendar_date_selector2": {}})

calendar_date_selector2

Example 3: Specify date

Pass a date as third parameter

//Create a date
const d = Date.parse('04 Dec 2025 00:12:00 GMT');
new DeskyCalendar({'calendar_date_selector3': {mode: 'double', defaultDate: d1}});

calendar_date_selector3

Example 4: "Any Date"

Add a "Any Date" button to leave some free choice
Generally useful in filters and reports
Set 4th parameter as true

//Set true the 4th parameter new DeskyCalendar({'calendar_date_selector4': {anyDate: true}});

calendar_date_selector4

Example 5: Range

Range options Specify the next ID, and clicking on the first input,
Automatically disable dates in the second input
Use the single mode

//Set the options in the json

options = {
    // Use the "single" mode
    'calendar_date_selector5': {
        mode: 'single',
        anyDate: true,
        nextInput: 'calendar_date_selector6'
    },
    'calendar_date_selector6': {
        mode: 'single',
        anyDate: true
    },
    // Or the double mode
    'calendar_date_selector7': {
        mode: 'single',
        nextInput: 'calendar_date_selector8'
    },
    'calendar_date_selector8': {
        mode: 'single'
    }
}
new DeskyCalendar(options);

calendar_date_selector5

calendar_date_selector6

calendar_date_selector7

calendar_date_selector8

Example 6: Disable Before or After Date

Disable selection before or after a date
Using 6th and 7th parameters

//Set the options in the json

//Create a date
const d2 = new Date();
const d3 = new Date();
//just an example, 2 days before and 10 days after
d2.setTime(d2.getTime()-(2*3600*24*1000));
d3.setTime(d3.getTime()+(10*3600*24*1000));
// Set a date for disableBefore 

options = {
    // Use the "single" mode
    'calendar_date_selector9': {
        disableBefore: d2,
    },
    'calendar_date_selector10': {
        disableBefore: d2,
        disableAfter: d3
    }
}
new DeskyCalendar(options);

calendar_date_selector9
disabled before d2

calendar_date_selector10
disabled before d2 and after d3

Example 7: Scroll into view

Add a scroll into on show.
Generally useful when calendar goes out of borders on show up
Set 8th parameter as true

//Set true the 8th parameter
options = {
    "calendar_date_selector11": {scroll: true},
}
new DeskyCalendar(options);

calendar_date_selector11

Example 8: CallBack function

Specify a call back function on day click
in 9th parameter.
Try to select a date to see the result

//Set a external function on 9th parameter new DeskyCalendar({"calendar_date_selector12": {mode: 'double', callback: this_is_callback}})

calendar_date_selector12

No Date Selected

CSS Examples - set vars locally

More calendars with different styles can stay all together in the same page

White and light blue

calendar_date_selector13

/*
***White and light blue***
You just need to add this code to your page's CSS, changing your ID
IE, if you choose ID "calendar_date_selector13"
scope vars locally for #deskycal_calendar_date_selector13
*/

<style>
#deskycal_calendar_date_selector13 {
--deskycal-main-color: #00bcd4;
--deskycal-today-bg-color: #006897;
--deskycal-today-right-color: #fff;
--deskycal-today-left-hover-color: #03a9f4;
--deskycal-base-bg-color: #ffffff;
--deskycal-dates-color: #00437c;
--deskycal-disabled-dates-color: #d5d5d5;
--deskycal-border-width: 5px;
--deskycal-border-radius: 18px;
--deskycal-border-color: #00bcd4;
--deskycal-font-size: 26px;
--deskycal-line-height: 30px;
--deskycal-width-double: 700px;
--deskycal-width-single: 300px;
}
</style>

Pink

calendar_date_selector14

/*
***Pink and white***
*/

<style>
#deskycal_calendar_date_selector14 {
--deskycal-main-color: #8f005c;
--deskycal-today-bg-color: #ff21b0;
--deskycal-today-right-color: #fff;
--deskycal-today-left-hover-color: #8f005c;
--deskycal-base-bg-color: #ffffff;
--deskycal-dates-color: #ff21b0;
--deskycal-disabled-dates-color: #ffb8e6;
--deskycal-border-width: 5px;
--deskycal-border-radius: 18px;
--deskycal-border-color: #ff21b0;
--deskycal-font-size: 15px;
--deskycal-line-height: 34px;
--deskycal-width-double: 700px;
--deskycal-width-single: 300px;
}
</style>

Green

calendar_date_selector15

/*
***Green***
Size can be dynamic
*/

<style>
#deskycal_calendar_date_selector15 {
--deskycal-main-color: #02ff00;
--deskycal-today-bg-color: #216c20;
--deskycal-today-right-color: #fff;
--deskycal-today-left-hover-color: #99ff98;
--deskycal-base-bg-color: #000000;
--deskycal-dates-color: #bbffbb;
--deskycal-disabled-dates-color: #285c27;
--deskycal-border-width: 5px;
--deskycal-border-radius: 40px;
--deskycal-border-color: #02ff00;
--deskycal-font-size: 4vh;
--deskycal-line-height: 2em;
--deskycal-width-single: 30vw;
--deskycal-width-double: 700px;
}
</style>

Just inspect the calendar and change variables as you like, and copy and paste in a <style> tag

All the code for this page, with all the calendars, looks like

const d1 = new Date(Date.parse('04 Dec 2025 00:12:00 GMT'));

const d2 = new Date();
const d3 = new Date();
d2.setTime(d2.getTime()-(2*3600*24*1000));
d3.setTime(d3.getTime()+(10*3600*24*1000));

const deskyOpts = {
    /// Call the init Calendar
    /// Example 1
    'calendar_date_selector1': {mode: "double"},

    /// Example 2
    'calendar_date_selector2': {mode: 'single'},

    /// Example 3
    /// Select date
    'calendar_date_selector3': {mode: 'double', defaultDate: d1},


    /// Example 4
    //// Any Date
    'calendar_date_selector4': {anyDate: true},

    /// Example 5
    //// Next Input
    'calendar_date_selector5': {mode: 'single', anyDate: true, nextInput: 'calendar_date_selector6'},
    'calendar_date_selector6': {mode: 'single', anyDate: true},
    'calendar_date_selector7': {mode: 'single', nextInput: 'calendar_date_selector8'},
    'calendar_date_selector8': {mode: 'single'},

    /// Example 6
    //// disable before after date
    'calendar_date_selector9': {mode: 'single', disableBefore: d2},
    'calendar_date_selector10': {mode: 'single', disableBefore: d2, disableAfter: d3},

    /// Example 7
    //// Scroll
    "calendar_date_selector11": {scroll: true},

    // Call Back
    "calendar_date_selector12": {mode: 'double', callback: this_is_callback},

    // Colors
    "calendar_date_selector13": {},
    "calendar_date_selector14": {},
    "calendar_date_selector15": {},

};

new DeskyCalendar(deskyOpts);