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: 'YmI4NGQ0ZGFmNWJlNDY1MzMwODQ0MGJmOTJlYTdhY2IzOGE4ZTIwNDk5MmFmODA1M2VjNTIzMzA3ZDYxNGIyY2ZkYWNkZTA2YjAzZmE2NWVkYmU0NGViMWE1NzlmOWFmOTljMGMwNDhkZjAyNjY0NjZhNDI1ZDYwOGQ3MzA3YzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16TXhNakl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</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 |