在日历引导程序数组中推入数组 [英] 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);
}
}
});
现在我写了这个脚本(AJAX)从数据库中提取记录
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);
我的问题是如何使用第一个代码中的events数组将这些结果放入日历中.
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
},
],
感谢您的帮助.
推荐答案
好吧,我认为您使用FullCalendar v4,如果我说对了,那么您需要回调以将事件数据传递到日历.这样.
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.
根据DOCS,您需要有一个successCallback
,它将事件返回到日历.
According to the DOCS you need to have a successCallback
that will return the events to the calendar.
由于我不知道您的ajax进程,我只是制作了一个API,该API返回您的数据,然后将其传递给successCallback
,以便在完整日历上正确打印事件,
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,
注意:由于您的活动日期在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);
});
},
这篇关于在日历引导程序数组中推入数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!