代码之家 › 专栏 › 技术社区 › user5443928

如何在使用Fullcalendar单击年视图的各个月单元格时重定向到月视图

fullcalendar jquery

user5443928 · 技术社区 · 7 年前

我需要重定向到月份视图,同时使用 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>

这里我有年份视图,因为我的要求是年份视图,我使用的是旧版本的 完整日历 . 在这里,我需要用户何时单击月份单元格,相应月份将从月份视图中显示。 Here is my full plunkr code.

2 回复 | 直到 7 年前

Subash 7 年前

你可以试试这个

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

Community CDub 4 年前

实际上你可以设定日期 changeView 方法

立即切换到其他视图。

.fullCalendar('changeView',viewName,dateOrRange)

例如:

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