FullCalendar可按月更改视图

Question

在我的FullCalendar应用程序中，更具体地说，在月视图可视化中，每当在同一天添加3个或更多事件时，我都会出现一个链接，然后我想使该链接指向该特定日期的日视图模式。

$(".events-view-more a").click(function () {
    alert("clicou");
});

parent（.events view more a的parent）td元素包含一个日期值为"2013-11-29"的数据属性。

我如何使用它将可视化模式更改为当天的日视图？

Answer 1

如果您在Month视图中的任何位置单击单元格，类似的内容都会将您从Month视图带到Day视图：

$('#calendar').fullCalendar({
   //other parameters here          
   dayClick: function(date, jsEvent, view) {
            $('#calendar').fullCalendar('gotoDate',date);
            $('#calendar').fullCalendar('changeView','agendaDay');
   }
});

希望这对其他人有用，我知道这是一个老帖子。

Answer 2

$(".events-view-more a").click(function () {
    var date=new Date($(this).parents('td').attr('date'));
$('#fullCalendar').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
});

Answer 3

对于所有搜索非jquery解决方案的人：

window.calendar = new FullCalendar.Calendar(element, options);
// do stuff ...
window.calendar.changeView("timeGridDay")

Answer 4

dayClick: function(date, jsEvent, view) {
    var ajandamodu=view.name;
    if(ajandamodu=='month')
    {                             
        $('#calendar').fullCalendar( 'changeView', 'basicDay'  );
    }
},    

Answer 5

您唯一需要做的就是在header（例如agendaDay或agendaWeek）中指定视图名称：

$('#calendar').fullCalendar({
    // put your options and callbacks here
    header: {
        left:   'title',
        center: '',
        right:  'today prev,next agendaDay,agendaWeek'
    },
    defaultView: 'agendaWeek'
});

Answer 6

@rodrigoalves在日历配置中尝试下面的一个。

eventLimit: 3,
eventLimitClick: 'day',

这对我有用。

Answer 7

以上是我的angularjs 解决方案

$scope.alertDayClick = function(event) {
    // if on month view go day view
    var view = uiCalendarConfig.calendars.myCalendar.fullCalendar( 'getView' );
    if (view.type === 'month') {
        console.log(view.type);
        uiCalendarConfig.calendars.myCalendar.fullCalendar('changeView','agendaDay');
        uiCalendarConfig.calendars.myCalendar.fullCalendar( 'gotoDate', event );
        return;
    }
}

我像这个一样设置了我的Caldiv

<div ui-calendar="uiConfig.calendar" config="uiConfig.calendar" calendar="myCalendar" data-ng-model="eventSources"></div>