如何使用Fullcalendar单击年份视图的相应月份单元格时重定向到月视图

Posted 2021-04-07

我需要重定向到月视图，同时使用Fullcalendar单击年视图的月份单元格。我在下面解释我的代码。

<div class="calender" id='calendar'></div>
  <script>
    function getCalendar() {
      var todayDate = new Date().toISOString().slice(0, 10);
      // var evStartDate = new Date(inputdate)
      //console.log('date',evStartDate);
      //addClassByDate(evStartDate);
      $('#calendar').fullCalendar({
        theme: true,
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'year,month,agendaWeek,agendaDay'
        },
        ///////// edit
        dayClick: function(date, jsEvent, view) {
          //alert('day click');
        },
        eventClick: function(event, jsEvent) {
          //alert('event clicked');
          $('#eventpopup').modal({
            backdrop: 'static'
          });
        },
        eventRender: function(event, element, view) {
          var evStart = moment(view.intervalStart).subtract(1, 'days');
          var evEnd = moment(view.intervalEnd).subtract(1, 'days');
          if (!event.start.isAfter(evStart) ||
            event.start.isAfter(evEnd)) {
            return false;
          }
          if (event.title.length > 10) {
            var eventShortTitle = event.title.substring(0, 10) + '...';
            element.qtip({
              content: event.title,
              position: {
                at: 'bottom left', // at the bottom right of...
              }
            });
            element.find('.fc-title').text(eventShortTitle);
          }
        },
        ///////////
        defaultDate: todayDate,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'jQuery is a fast and concise javascript Library',
          start: '2017-12-01'
        }, {
          title: 'hello',
          start: '2017-12-02'
        }, {
          id: 999,
          title: 'hii',
          start: '2017-11-02'
        }]
      });
    }
  </script>

在这里我也有年视图，因为我的要求是年视图，我使用旧版本的Fullcalendar。在这里我需要当用户点击月份单元格时，相应月份将从月份视图中显示.Here is my full plunkr code.

答案

你可以尝试这个

dayClick: function(date, jsEvent, view) {
     $('#calendar').fullCalendar('gotoDate',date);
     $('#calendar').fullCalendar('changeView','month'); //This would take you to the respective month
},

eventClick: function(calEvent, event, jsEvent) { 
     var dt = calEvent.start; 
     $('#calendar').fullCalendar('gotoDate',dt); 
     $('#calendar').fullCalendar('changeView','month'); 
}

另一答案

实际上你可以在changeView方法上设置日期。

立即切换到不同的视图。

.fullCalendar（'changeView'，viewName，dateOrRange）

例如：

$('#calendar').fullCalendar('changeView', 'agendaDay', '2017-06-01');