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()); 
            }
        }
    }
});

Answer 2

Matt Ball's answer work great as long as you don't have fullCalendar's selectable option enabled. If you do, this doesn't work.

The problem is that an overlay div is created to represent the selection, and that overlay div becomes the jsEvent.target. It also messes with jQuery's .is(':hover') test -- the call will only return true for the topmost element, and the topmost element is the overlay.

My solution is to add my own overlay into the fullCalendar's overlay. My overlay is absolutely positioned to be in the upper right corner over the day number. In my onDayClick event handler, I can test to see if my corner overlay has :hover. If it does, I know the day number was clicked on.

Here's my Javascript:

// Called after the calendar layout has been rendered, 
// but before events are added.
function onCalendarViewRender(view, element) {
    // The .fc-cell-overlay div isn't created until a selection event happens. 
    // Force a selection event to trigger the creation of this div.
    $('#calendar').fullCalendar('select', 
        pageData.calendarMonth, 
        pageData.calendarMonth, 
        true);

    // Create our corner overlay so we can detect whether the 
    // mouse was over the day when the click event occurred.
    var corner = $('<div>').addClass('my-cell-overlay-day-corner');
    $('.fc-cell-overlay').append(corner);
}


function onCalendarDayClick(date, allDay, jsEvent, view) {
    // Check to see whether the mouse was hovering over our day corner overlay 
    // that is itself applied to the fullCalendar's selection overlay div.
    // If it is, then we know we clicked on the day number and not some other 
    // part of the cell.
    if ($('.my-cell-overlay-day-corner').is(':hover')) {
        alert('Click!');
    }
}


$('#calendar')
    .fullCalendar({
        selectable : true,
        viewRender : onCalendarViewRender,
        dayClick   : onCalendarDayClick,
        eventSources : [ ... your sources ... ]
    });

And the CSS for the overlay, and to make sure the calendar's day number div looks like a link and lines up with our overlay:

#calendar .fc-day-number {
    text-decoration: underline;
    width: 15px;
    height: 16px;
    text-align: right;
}

#calendar .fc-day-number:hover {
    cursor: pointer;
}


#calendar .my-cell-overlay-day-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 19px;
    height: 16px;
    cursor: pointer;
}