Push array inside a calendar bootstrap array

问题

I'm creating a calendar for leave of my writers. In this code, it is hardcoded and of course working

var calendar = new Calendar(calendarEl, {
  plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
  header    : {
    left  : 'prev,next today',
    center: 'title',
    right : 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  //Random default events
  events    : [ 

    {
      title          : 'All Souls Day',
      start          : new Date(y, m, 2),
      backgroundColor: '#f56954', //red
      borderColor    : '#f56954' //red
    },

  ],
  editable  : true,
  droppable : true, // this allows things to be dropped onto the calendar !!!
  drop      : function(info) {
    // is the "remove after drop" checkbox checked?
    if (checkbox.checked) {
      // if so, remove the element from the "Draggable Events" list
      info.draggedEl.parentNode.removeChild(info.draggedEl);
    }
  }    
});

Now I wrote this script (AJAX) to pull the records from DB

var arrevents = [];
$.get( "http://localhost/api/public/events", function( data ) {
    var response = JSON.parse(data);
    $.each(response, function(k, v) {
        arrevents.push(v);
    });
  });
console.log(arrevents);

My question is how to put those results in the calendar using the events array on the first code.

I want to place the result here, in this variable

events    : [

    {
      title          : 'All Souls Day',
      start          : new Date(y, m, 2),
      backgroundColor: '#f56954', //red
      borderColor    : '#f56954' //red
    },

  ],

Thanks for the help.

回答1:

Okay, I think you use FullCalendar v4, if I am right then you need to have a callback to pass your events data to the calendar. Like this.

According to the DOCS you need to have a successCallback that will return the events to the calendar.

Here is the docs https://fullcalendar.io/docs/events-function

As I don't know your ajax process I just make an API that returns your data and then pass it to the successCallback that print the events correctly on the full calendar,

Note: As your event's date are on 11/28 and 11,29 so navigate to those dates to see the events.

Demo https://codepen.io/nasser-ali-karimi/pen/qBBGVbG?editors=0010

events: function(info, successCallback, failureCallback) {
    var arrevents = [];
    jQuery.get( "https://api.myjson.com/bins/16ubhe", function( data ) {

      // var response = JSON.parse(data);
      // $.each(response, function(k, v) {
      //     arrevents.push(v);
      // });
      arrevents = data;
      successCallback(arrevents);
    });
},

来源：https://stackoverflow.com/questions/59024988/push-array-inside-a-calendar-bootstrap-array

标签

jquery

arrays

ajax

fullcalendar

fullcalendar-4