These docs are for an old release. Info on upgrading to v5
edit doc


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 = 'red';

Alternatively, you can use script tags and browser globals:

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction' ],

dateClickInfo is a plain object with the following properties:


a Date for the clicked day/time.


An ISO8601 string representation of the date. Will have a time zone offset according to the calendar’s timeZone like 2018-09-01T12:30:00-05:00. If clicked on an all-day cell, won’t have a time part nor a time zone part, like 2018-09-01.


true or false whether the click happened on an all-day cell.


An HTML element that represents the whole-day that was clicked on.


The native JavaScript event with low-level information such as click coordinates.


The current View Object.


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: ' +;


This is only available with the Scheduler plugin.

See a demo of dateClick with resources.