Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Calendar column type

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


    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.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'],
    ];
    
    jexcel(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 jTools responsive date & datetime 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>
    jexcel(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>