CODEWITHSUNDEEP
jqueryarraysjsonfullcalendar
Claudio Martinez
Claudio Martinez

Reputation: 295

Render events on Full calendar using JSON

I'm trying to render events on Full calendar js by building a JSON object and pass it to the Event handler on Full Calendar, code goes like this:

$('#dailyPaymentsModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var matrixId = button.data('id');
  var matrixprice = button.data('price');
  var qualifiedDate = button.data('qdate');
  var qDate = new Date(qualifiedDate);
  var tomorrow = new Date(qualifiedDate);
  var endDate = new Date(qualifiedDate);
  endDate.setDate(endDate.getDate() + 14);
  tomorrow.setDate(tomorrow.getDate() + 1);
  var nextDay = qDate;
  var myObject = new Object();
  var myarray = [];
  var dailybonus = matrixprice * 0.03;
  while (nextDay <= endDate) {
    myObject.title = 'Daily Bonus';
    myObject.start = nextday;
    myObject.description = dailybonus;
    myarray.push(myObject);
    nextDay.setDate(nextDay.getDate() + 1);
  }
  var myString = JSON.stringify(myarray);
  alert(myString);
  var calendar = $('#fcalendar').fullCalendar({
    events: myString,
    displayEventTime: false,
    eventRender: function(event, element) {
      element.find('.fc-title').text(event.title);
    }
  });
})

I get a JSON array in myString, but when passed to events on Full calendar, it does not render any event.

Upvotes: 1

Views: 1459

Answers (1)

Nasser Ali Karimi
Nasser Ali Karimi

Reputation: 4663

You don't need JSON.stringify(myarray); just remove that line and use myarray in events.

// var myString = JSON.stringify(myarray);
// alert(myString);
var calendar = $('#fcalendar').fullCalendar({
   events: myarray,
   displayEventTime: false,
   eventRender: function(event, element) {
      element.find('.fc-title').text(event.title);
   }
});

Note Fullcalendar has a very good demo that you can simply use them to build yours. here is a demo of event data that you can use. https://codepen.io/nasser-ali-karimi/pen/YzzdxWg?editors=0010

Upvotes: 4

Related Questions