Back to Examples

JavaScript Calendar

With the new features of javascript calendar it is possible to explore this column editor to create advance calendar rules, and bring a better user experience, for instance:

  • Create a range of valid dates from one column based on the values of another
  • Create a year and month picker only
  • Explore events to change other column values
  • Integrate the calendar with other applications through jspreadsheet events
  • Define several different date formats with new valid tokens

The example below shows how to use the calendar column type, with a rule where the second calendar column cannot be greater than the first.

NOTE The filter argument creates a validRange option based on the previous column value. The onbeforechange behavior blocks the user to paste or programmaticaly overwrite the rule.

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

<div id="spreadsheet"></div>

<script>
let data = [
    ['Roger Taylor', '2019-01-01', '2019-03-01' ],
    ['Bob Shiran', '2019-04-03', '2019-05-03'],
    ['Daniel P.', '2018-12-03', '2018-12-03'],
    ['Karen Roberts', '2018-12-03', '2019-01-03'],
    ['Willan A.', '',''],
    ['LUX London', '',''],
];

let filterOptions = function(o, cell, x, y, value, config) {
    // Clone options
    config.options = Object.create(config.options);
    // Get the value of the previous column
    let previousColumnValue = o.getValueFromCoords(x - 1, y);
    // Set a valid range to avoid past dates to be selected
    config.options.validRange = [ previousColumnValue, null ];
    // Customized options
    return config;
}

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type:'text',
            title:'Name',
            width:'300px',
        },
        {
            type:'calendar',
            title:'From',
            options: { format:'DD/MM/YYYY' },
            width:'150px',
        },
        {
            type:'calendar',
            title:'To',
            options: { format:'DD/MM/YYYY' },
            filterOptions: filterOptions,
            width:'150px',
        },
    ],
    onbeforechange: function(el, cell, x, y, value) {
        // Valid only for second column
        if (x == 2 && value) {
            // Get the value of the previous column
            let previousColumnValue = el.jexcel.getValueFromCoords(x - 1, y);
            if (previousColumnValue > value) {
                cell.style.border = '1px solid red';
                // Return nothing
                return '';
            } else {
                cell.style.border = '';
            }
        }
        return value;
    },
    nestedHeaders:[
        [
            {
            title: 'Information',
            colspan: 1,
        },
        {
            title: 'Holidays period',
            colspan: '2'
        }]
    ],
    license: 'M2VmMzBmM2RmOTk3Yjk5MjliMGRlMGRlNDZmMDhkYWMwNzNkYjg1NWUwOTYzNGQzNDBmNjhiZmEwODBhYjc2NDE0ZTk0MTk1YTBmZTgzY2U0YzYxMTg4YmEwNDQ0MmMwZGY5ZGZjZjVlOWFmOWNkMzNlNjRlYmQ4NmJmMmNjMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeE5UWTFOVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
</html>

Date column customization

Customize the format and the behavior of your column through the initialization options, as below. For more information about the jSuites Javascript calendar, date & datetime picker responsive plugin.

Parameter Description
validRange Disable dates out of the range.
@array [Initial date, Final date]
format Date format
@string YYYY-MM-DD
readonly Calendar input is readonly.
@bool
today Calendar default is today when input is blank.
@bool
time Enable timepicker.
@bool
resetButton Enabled reset button
@bool
placeholder Default place holder for the calendar input
@string
months Array with the month names
@array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
weekdays Array with the weekdays names
@array ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
weekdays Array with the weekdays names
@array ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
weekdays_short Array with the weekdays names
@array ['S', 'M', 'T', 'W', 'T', 'F', 'S']
value Initial value
@string
opened Calendar starts opened
@bool
onclose On close event
@function
onchange On change event
@function