---
title: "JavaScript Calendar Events"
description: "Learn how events enable seamless integration of the JavaScript Calendar into your application using native event handling."
source: https://jsuites.net/docs/javascript-calendar/events
---
This documentation provides examples of using events with the jSuites JavaScript Calendar plugin. Learn how to integrate interactive calendar features into your applications.
## Documentation
### Supported Events
Explore the events available in the calendar plugin with examples to create dynamic and responsive features.
| Event | description |
|----------|----------------------------------------------------------------------------------------------------------------------------------------|
| onopen | `onopen(el: DOMElement) => void` Triggered when the calendar is opened. |
| onclose | `onclose(el: DOMElement) => void` Triggered when the calendar is closed. |
| onchange | `onchange(DOMElement element, string currentValue, string previousValue) => void` Triggered when the calendar value changes. |
| onupdate | `onupdate(DOMElement element, string value) => void` Triggered when calendar information is updated. |
## Example
This example shows how to declare events like `onopen`, `onclose`, `onchange`, and `onupdate` to handle **calendar interactions**.
```html
```
```jsx
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 (
);
}
export default App;
```
```vue
```
## More examples
Explore additional use cases for the jSuites JavaScript Calendar plugin:
* [Year and Month Selection](/docs/javascript-calendar/year-month)
* [JavaScript Calendar Events](/docs/javascript-calendar/events)
* [Calendar Date Range Validations](/docs/javascript-calendar/valid-range)
* [International Settings](/docs/javascript-calendar/international)
* [Responsive JavaScript Calendar](/docs/javascript-calendar/mobile)