在使用FullCalendar单击各个月份的年度观看时,如何重定向到月视图



我需要使用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。在这里我需要在用户单击一个月单元时,各个月将从一个月视图显示。

您可以尝试一下

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');

相关内容

  • 没有找到相关文章