CODEWITHSUNDEEP
javascriptjqueryhtmlfullcalendar
dreamkiller
dreamkiller

Reputation: 189

Having Multiple Months Displaying with Fullcalendar

I am trying to display two months at one time side by side using the FullCalendar plugin. I have looked through several other related questions and none seem to solve my issue. Currently my set up is as follows:

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

I am looking to have say August and July next to each other, and when I click on next and prev arrows it will move the calendars along so that August and September appear. Any ideas? Thanks

Upvotes: 0

Views: 3820

Answers (1)

keyz.Mist
keyz.Mist

Reputation: 174

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

This is work for you.Thanks

Upvotes: 1

Related Questions