how to make day value clickable in month view

Question

Is there a way to make the day of the month value clickable in the month view like in Google Calendar?

I would like it so when a user clicks on a day in the month(just the day number, not the whole block), the fullCalendar would switch to the day view of that particular day.

Thanks!

Answer 1

Use the dayClick event, the changeView method, and the goToDate method.

Something like this (not tested):

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            // Clicked on the entire day
            $('#calendar')
                .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
                .fullCalendar('gotoDate',
                    date.getFullYear(), date.getMonth(), date.getDate());
        }
    }
});

---

Edit re: comments

You can check the event.target within the callback:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            // Clicked on the entire day 
            
            if ($(jsEvent.target).is('div.fc-day-number')) {      
                // Clicked on the day number 
                
                $('#calendar') 
                    .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */) 
                    .fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate()); 
            }
        }
    }
});