Star
Back to Examples

Calendar column type

The example below shows how to use and customize special calendar column type.

Jpreadsheet uses the jSuites Javascript Calendar plugin


Source code

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

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

<script>
var data = [
    ['Flag Fen', 'South East', '2019-01-01'],
    ['Bristol Aero Collection (BAC)','South West','2019-04-03'],
    ['Experience Barnsley', 'North','2018-12-03'],
    ['Cinema Museum', 'London',''],
    ['University of Hertfordshire Art Collection', 'South East',''],
    ['LUX London', 'London','2016-11-03'],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type:'text',
            title:'Museum',
            width:'300',
        },
        {
            type:'dropdown',
            title:'Region',
            source:['South East','South West','North','London'],
            width:'200',
        },
        {
            type:'calendar',
            title:'Last visit',
            options: { format:'DD/MM/YYYY' },
            width:'100',
        },
    ]
});
</script>
</html>

Date column customization

Customize the format and the behavior of your column through the initialization options, as follow:

options : {
    // Date format
    format:'DD/MM/YYYY',
    // Allow keyboard date entry
    readonly:0,
    // Today is default
    today:0,
    // Show timepicker
    time:0,
    // Show the reset button
    resetButton:true,
    // Placeholder
    placeholder:'',
    // Translations can be done here
    months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    // Value
    value:null,
    // Events
    onclose:null,
    onchange:null,
    // Fullscreen (this is automatic set for screensize < 800)
    fullscreen:false,
};

More information about the jSuites Responsive date time picker


Considering the example above, you can create a calendar including a time picker by simple send the option time:1 as the following example.

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type:'text',
            title:'Museum',
            width:'300',
        },
        {
            type:'dropdown',
            title:'Region',
            source:['South East','South West','North','London'],
            width:'200',
        },
        {
            type:'calendar',
            title:'Last visit',
            options: { format:'DD/MM/YYYY HH24:MI', time:1 },
            width:'100',
        },
    ]
});
</script>