JavaScript Calendar Events

This documentation explores the technical intricacies of event handling in the JavaScript calendar plugin. Here is the available events and examples on how to use events to integrate the calendar plugin to your applicatrions.

Documentation

Supported Events

Uncover the diverse events offered by the calendar plugin, facilitating developers in creating dynamic, responsive features based on user interactions.

Event	description
onopen	`onopen(el: DOMElement) => void` This method is called when the calendar is opened.
onclose	`onclose(el: DOMElement) => void` This method is called when the calendar is closed.
onchange	`onchange(DOMElement element, string currentValue, string previousValue) => void` This method is called when the value is changed.
onupdate	`onupdate(DOMElement element, string value) => void` This method is called when a information changes.

Example

Learn how to harness JavaScript events to seamlessly integrate the calendar with any web application.

<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' />
<div id='log'></div>

<script>
// Create a instance of the calendar
jSuites.calendar(document.getElementById('calendar'), {
    time: true,
    format: 'DD/MM/YYYY',
    placeholder: 'DD/MM/YYYY',
    readonly: false,
    // Enable events on the calendar
    onopen: function() {
        jSuites.notification({ title:'Calendar', message:'Calendar is open now!' });
    },
    onclose: function() {
        jSuites.notification({ title:'Calendar', message:'Calendar is closed now!' });
    },
    onchange: function(instance, value) {
        document.getElementById('log').innerText = 'New value is: ' + value;
    }
});
</script>
</html>

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


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

  const onOpen = function () {
    jSuites.notification({ title: 'Calendar', message: 'Calendar is open now!' })
  }

  const onClose = function () {
    jSuites.notification({ title: 'Calendar', message: 'Calendar is closed now!' })
  }

  const onChange = function (instance, value) {
    log.current.innerText = 'New value is: ' + value;
  }
  return (
    <div className="App">
      <Calendar ref={calendar} time={true}
        format={'DD/MM/YYYY'}
        placeholder={'DD/MM/YYYY'}
        readonly={false} onopen={onOpen} onclose={onClose} onchange={onChange} />
      <div ref={log}></div>
    </div>
  );
}

export default App;

<template>
    <Calendar ref="calendar" :time="true" format="DD/MM/YYYY" placeholder="DD/MM/YYYY" :readonly="false" :onopen="onOpen"
        :onclose="onClose" :onchange="onChange" />
    <div ref="log"></div>
</template>

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

export default {
    name: 'App',
    components: {
        Calendar
    },
    methods: {
        onChange: function (instance, value) {
            this.$refs.log.innerText = 'New value is: ' + value;
        },
        onClose: function () {
            jSuites.notification({ title: 'Calendar', message: 'Calendar is closed now!' })
        },
        onOpen: function () {
            jSuites.notification({ title: 'Calendar', message: 'Calendar is open now!' })
        }
    }
}
</script>

Edit this page on GitHub