使用 Fullcalendar 显示多个月份

Question

我正在尝试使用 FullCalendar 插件同时显示两个月。我查看了其他几个相关问题，但似乎没有一个可以解决我的问题。目前我的设置如下：

               <div class="calendar-box">
                   <div class="row">
                       <div class="col-md-6">
                           <div id='calendar0'></div>
                       </div>
                       <div class="col-md-6">
                           <div id='calendar1'></div>
                       </div>
                   </div>
                </div>

Javascript：

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar0').fullCalendar({
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    month:m,
    theme: true,
    editable: false
});
$('#calendar1').fullCalendar({
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    month:m+1, 
    theme: true,
});

我希望将 8 月和 7 月彼此相邻，当我单击“下一个”和“上一个”箭头时，它会移动日历，以便出现 8 月和 9 月。有任何想法吗？谢谢

Answer 1

Try this:-


$(document).ready(function() {
   var date = new Date();
   var d = date.getDate();
   var m = date.getMonth();
   var y = date.getFullYear();
   var x = new Date();
   x.setDate(1);
   x.setMonth(x.getMonth() - 1);

   var cal0 = $('#calendar0');
   var cal1 = $('#calendar1');

   cal0.fullCalendar({
    header: {
      left: 'title',
      center: '',
      right: 'prev,next today'
    },
    defaultDate: x,
    viewRender: function(view, element) {
      cur = view.intervalStart;
      d = moment(cur).add('months', 1);
      cal1.fullCalendar('gotoDate', d);
    }
  });

  cal1.fullCalendar({
    header: {
      left: 'title',
      center: '',
      right: ''
    },
    defaultDate: date,
  });`enter code here`
});

这对你有用。谢谢