Responsive JavaScript Calendar

Full-Screen Mode

Enable the calendar in full-screen mode by setting the fullscreen property to true. This mode activates automatically on screens narrower than 800 pixels, optimizing usability on smaller devices.

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

<input id='calendar' />

<script>
// Create new calendar instance in full screen mode
jSuites.calendar(document.getElementById('calendar'), {
    // Enable the fullscreen mode
    fullscreen: true,
    format: 'DD/MM/YYYY HH24:MI',
    placeholder: 'DATE AND TIME',
    // Enable the hour and minute dropdowns
    time: true,
});
</script>
</html>

import { Calendar } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
  const calendar = useRef(null);

  return (
    <div className="App">
      <Calendar ref={calendar} fullscreen={true}
        format={'DD/MM/YYYY HH24:MI'}
        placeholder={'DATE AND TIME'}
        time={true} />
    </div>
  );
}

export default App;

<template>
    <Calendar ref="calendar" format="DD/MM/YYYY HH24:MI" placeholder="DATE AND TIME" :fullscreen="true" :time="true" />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
}
</script>

More examples

Explore additional use cases for the jSuites JavaScript Calendar plugin:

Edit this page on GitHub