Question

有没有办法让月份视图中的月份值可以在Google日历中点击？

我希望当用户点击一个月中的某一天（只是天数而不是整个数据块）时，fullCalendar会切换到该特定日期的日视图。

谢谢！

Answer 1

使用dayClick event，changeView method和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：评论

您可以查看回调中的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()); 
            }
        }
    }
});

Answer 2

只要你没有启用fullCalendar的selectable选项，马特鲍尔的答案就会很好。如果你这样做，这不起作用。

问题是创建了一个叠加div来表示选择，并且叠加div变为jsEvent.target。它也与jQuery的.is(':hover')测试混淆 - 调用仅对最顶层元素返回true，最顶层元素是覆盖。

我的解决方案是将自己的叠加层添加到fullCalendar的叠加层中。我的叠加层绝对位于日期编号的右上角。在我的onDayClick事件处理程序中，我可以测试我的角点叠加层是否具有：悬停。如果是，我知道点击了日期编号。

这是我的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 ... ]
    });

用于叠加层的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;
}

Answer 3

Fullcalendar 3.0及更高版本现在默认通过navLinks包含此内容。只需使用navLinks: true。

如何在月视图中使日值可点击

3 个答案:

编辑re：评论