使用Fullcalendar显示多个月

时间:2017-08-02 06:23:51

标签: javascript jquery html fullcalendar

我试图使用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月和9月出现。有任何想法吗?感谢

1 个答案:

答案 0 :(得分: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`
});

这对你有用。谢谢