Javascript calendar

A lightweight, responsive and mobile compatible javascript calendar, date and date time picker plugin. This plugin was created for the user keep the same codebase accross different devices. It brings full integration with other plugins and works great in small mobile screens.


1

Calendar examples


Date picker webcomponent

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<jsuites-calendar value="2020-01-20"></jsuites-calendar>

</script>
    document.querySelector('jsuites-calendar').addEventListener('onchange', function(e) {
        console.log('New value: ' + e.target.value);
    });
    document.querySelector('jsuites-calendar').addEventListener('onclose', function(e) {
        console.log('Calendar is closed');
    });
</script>
</html>


Javascript calendar as plugin

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

<div id="calendar1"></div>

<script>
jSuites.calendar(document.getElementById('calendar1'));
</script>
</html>

Javascript datetime picker

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

<div id="calendar2"></div>

<script>
jSuites.calendar(document.getElementById('calendar2'), {
    time:true,
    format:'DD/MM/YYYY HH24:MI',
});
</script>
</html>

Events

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

<div id="calendar3"></div>

<script>
jSuites.calendar(document.getElementById('calendar3'), {
    time: true,
    format: 'DD/MM/YYYY',
    placeholder: 'DD/MM/YYYY',
    readonly: false,
    onclose: function() {
        alert('Calendar is closed now!');
    }
});
</script>
</html>

Responsive

Taylored to work with all screen sizes. The javascript calendar will automatically set this as true for screens lower than 800 pixels.

// EXAMPLE1 - Simple calendar 
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="calendar4"></div>

<script>
jSuites.calendar(document.getElementById('calendar4'), {
    placeholder:'DATE',
});
</script>
</html>


// EXAMPLE2 - Fullscreen is default for screen < 800, but you can force that for any screen.
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="calendar5"></div>

<script>
jSuites.calendar(document.getElementById('calendar5'), {
    fullscreen:true,
    format:'DD/MM/YYYY HH24:MI',
    placeholder:'DATE AND TIME',
    time:true,
});
</script>
</html>


2

Javascript methods


open();Open the javascript date picker
close(ignoreEvents);Close the dropdown
@param int ignoreEvents - Do no execute onclose event
getValue();Get the current selected date
setValue(newValue);Set a new value for the javascript date and time picker
@param mixed newValue - New date should be set as YYYY-MM-DD HH:MM:SS
reset();Clear from the input


3

Events


onchangeTrigger a method when value is changed.
oncloseTrigger a method when the dropdown is closed.


4

Initialization options


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,
};