Как сделать значение дня кликабельным в режиме просмотра месяца

Ответ 1

Используйте dayClick событие, метод changeView и goToDate.

Что-то вроде этого (не тестировалось):

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

Редактировать re: comments

В обратном вызове вы можете проверить event.target:

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

Ответ 2

Ответ Matt Ball отлично работает, если у вас нет опции fullCalendar selectable. Если вы это сделаете, это не сработает.

Проблема заключается в том, что для представления выбора создается оверлейный div, а оверлейный div становится jsEvent.target. Это также связано с тестом jQuery .is(':hover') - вызов вернет true только для самого верхнего элемента, а самый верхний элемент - наложение.

Мое решение состоит в том, чтобы добавить свой собственный оверлей в оверлей fullCalendar. Мой оверлей абсолютно расположен, чтобы находиться в верхнем правом углу над номером дня. В моем обработчике событий onDayClick я могу проверить, имеет ли мой наклон угла: hover. Если это так, я знаю, что номер дня был нажат.

Вот мой 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 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 ... ]
    });

И CSS для наложения, а также чтобы число календарных дней div выглядело как ссылка и выстроено с нашим наложением:

#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;
}

Ответ 3

Fullcalendar 3.0 и теперь включают это по умолчанию через navLinks. Просто используйте navLinks: true.