【问题标题】:Push array inside a calendar bootstrap array在日历引导数组中推送数组
【发布时间】:2019-11-25 03:45:33
【问题描述】:

我正在为我的作家的休假创建日历。 在这段代码中,它是硬编码的,当然可以工作

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

现在我编写了这个脚本 (AJAX) 来从数据库中提取记录

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

我的问题是如何使用第一个代码上的事件数组将这些结果放入日历中。

我想把结果放在这里,在这个变量中

events    : [

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

  ],

感谢您的帮助。

【问题讨论】:

  • 你能显示你从ajax得到的数据吗
  • 您使用的是 FullCalendar,哪个版本?如果您使用,请按照文档进行操作,因为它有很好的演示。
  • @KamleshBhurke 这是结果 [] 0: "{"title":"Buding Leave","start":"2019-11-28","end":"2019-11-28 ","backgroundColor":"#f56954","borderColor":"#f56954"}" 1: "{"title":"Buding Leave","start":"2019-11-29","end": "2019-11-29","backgroundColor":"#f56954","borderColor":"#f56954"}" 长度: 2 proto: Array(0)

标签: jquery arrays ajax fullcalendar fullcalendar-4


【解决方案1】:

好的,我认为您使用的是 FullCalendar v4,如果我是对的,那么您需要有一个回调来将您的事件数据传递到日历。像这样。

根据 DOCS,您需要有一个 successCallback,它将事件返回到日历。

这里是文档https://fullcalendar.io/docs/events-function

由于我不知道您的 ajax 流程,所以我只是创建了一个 API 来返回您的数据,然后将其传递给在完整日历上正确打印事件的 successCallback

注意:由于您的活动日期是 11/28 和 11,29,因此请导航到这些日期以查看活动。

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-09-21
    • 2011-03-04
    • 1970-01-01
    • 2012-03-30
    • 1970-01-01
    • 1970-01-01
    • 2018-07-11
    • 2016-12-22
    相关资源
    最近更新 更多