dateClick
Triggered when the user clicks on a date or a time.
function( dateClickInfo ) { }
In order for this callback to fire, you must load the interaction plugin. If you are using an ES6 build system:
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
...
let calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin ],
...
dateClick: function(info) {
alert('Clicked on: ' + info.dateStr);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('Current view: ' + info.view.type);
// change the day's background color just for fun
info.dayEl.style.backgroundColor = 'red';
}
});
...
Alternatively, you can use a global bundle:
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
// no plugin configuration required!
});
...
</script>
dateClickInfo is a plain object with the following properties:
| date |
a Date for the clicked day/time. |
|---|---|
| dateStr |
An ISO8601 string representation of the date. Will have a time zone offset according to the calendar’s timeZone like |
| allDay |
|
| dayEl |
An HTML element that represents the whole-day that was clicked on. |
| jsEvent |
The native JavaScript event with low-level information such as click coordinates. |
| view |
The current View Object. |
| resource |
If the current view is a resource-view, the Resource Object that owns this date. Must be using one of the resource plugins. |
List View
The dateClick trigger is not fired when the user clicks a day heading in list view.
Resource Views
For resource views, this callback will receive an additional Resource Object parameter. Example:
var calendar = new FullCalendar.Calendar(calendarEl, {
dateClick: function(info) {
alert('Date: ' + info.dateStr);
alert('Resource ID: ' + info.resource.id);
}
});
Resources are a premium feature.