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

Question

有没有办法像在谷歌日历中那样使月份中的日期值在月视图中可点击？

我希望当用户单击该月中的某一天(只是日期数字，而不是整个块(时，fullCalendar 将切换到该特定日期的日视图。

谢谢！

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

<小时 />

编辑回复：评论

您可以在回调中查看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选项，Matt Ball的答案就可以很好地工作。如果你这样做，这是行不通的。

问题是创建了一个覆盖div 来表示选择，并且该覆盖div 成为jsEvent.target .它还弄乱了 jQuery 的.is(':hover')测试——调用只会为最顶层的元素返回 true，而最顶层的元素是覆盖层。

我的解决方案是将我自己的叠加层添加到完整日历的叠加层中。我的叠加层绝对位于日数的右上角。在我的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'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 及更高版本现在默认通过 navLink 包含此功能。只需使用navLinks: true.