Responsive JavaScript Calendar

Full-Screen Mode

Set the fullscreen property to true to enable full-screen mode in the JavaScript calendar. This feature is automatically activated for screens narrower than 800 pixels, ensuring optimal usability on smaller devices.

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<input id='calendar' />

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

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

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

export default {
    name: 'App',
    components: {