json FullCalendar Javascript 5.11.0和在日历上加载数据

e0uiprwp  于 2022-11-19  发布在  Java
关注(0)|答案(1)|浏览(97)

我在我的WordPress的插件上使用FullCalendar javascript...一个旧的库,所以我更新到最新的5.11.0,所以我不得不重写一点功能来管理日历如下:

var calendarEl = document.getElementById('mycalendar');

var calendar = new FullCalendar.Calendar(calendarEl, {      
    locale: locale.substring(0, 2),
    lazyFetching: false,
    loading: function(isLoading) { if (isLoading) { box = new ajaxLoader(".mycalendar"); } },
    customButtons: {
        myCustomButton: {
          text: 'custom!',
          click: function() {
            alert('clicked the custom button!');
          }
        }
    },
    headerToolbar: {
        left: 'today prevYear,prev,next,nextYear',
        center: 'title',
        right: 'myCustomButton'
    },
    initialView: 'dayGridMonth',
    initialDate: '2020-09-12',
    dateClick: function() {
        alert('a day has been clicked!');
    },          
    events: function (info, successCallback, failureCallback) {
        let url = 'http://'+window.location.host+'/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php?action=load_monthlyevents&' + new URLSearchParams({
            start: info.startStr,
            end: info.endStr
        });         
        fetch(url)
        .then(function(response) {
            //const isEmpty = Object.keys(response).length === 0;
            //if (!isEmpty)
            return response.json();
        })          
        .then(function(jsonResponse) {
            // do something with jsonResponse
            //alert(jsonResponse);
    
            //console.log(jsonResponse);
            var events = [];

            jsonResponse.forEach(function(el) {
                //alert(el.id + " - " + el.start + " - " + el.end + " - " + el.data1 + " - " + el.data2 + " - " + el.color);
                var event = {
                  id: el.id,
                  start: el.start,
                  end: el.end,
                  title: el.data1 + ' (' + el.data2 + ')',
                  backgroundColor: el.color,
                  textColor: '#000000'
                };
                events.push(event);
            });
                                    
            console.log(events);
            box.remove();
            successCallback(events);
        })
        .catch(function(err) {
            box.remove();
            failureCallback(err);
        });         
    },
    eventDidMount: function(info) {
        element.qtip({ 
            content: { text: $.ajax({url:"http://"+window.location.host+"/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php?action=load_eventdetails&ID="+info.event.id, async:false}).responseText }, 
            position: { effect: false, viewport: $('#mydata_grid'), adjust: { method: 'flipinvert' } } 
        });
    },
    eventMouseEnter: function(event, jsEvent) { $(jsEvent.target).css('cursor','pointer'); },
    eventClick: function(info) {
        /* load event in panel */
        alert("data id: " + info.event.id);
    }           
});

calendar.render();

问题是我从数据库中以JSON格式正确获取了数据,但它没有在日历上显示这些事件......可能是我遗漏了什么,或者我以错误的方式格式化了要传递给FullCalendar的结构?
我还尝试直接给FullCalendar JSON对象,让他用以下代码管理它:

events: {
    url: "http://"+window.location.host+"/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php",
    //method: 'GET',
    extraParams: {action:'load_monthlyevents'},
    //format: 'json',
    //cache: false,
    //async: false,
    failure: function () { box.remove(); },
    success: function (data) {
        box.remove();
        
        //callback(data);
        successCallback(data);                  
        //return data;
    }           
},

但是这样它就说没有定义successCallback/callback...这是我从db中获取的JSON示例,其中包含console.log(jsonResponse)

[
    {id: '576', start: '2015-09-07 12:00:00', end: '2015-09-07 17:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
    {id: '581', start: '2015-10-02 07:00:00', end: '2015-10-02 17:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
    {id: '582', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
    {id: '583', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5A9'},
    {id: '584', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F3F781'},
    {id: '585', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F5BCA9'},
    {id: '586', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9BCF5'},
    {id: '587', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F5A9F2'}
]

任何方向都将不胜感激。提前感谢!干杯!

oxiaedzo

oxiaedzo1#

首先预先在变量中获取json字符串,

var json = <?php echo json_encode($json_array); ?>;

在你让变量中的json像下面这样加载事件之后,

var calendar = new FullCalendar.Calendar(calendarEl, {
     ....
     ....
     ....
    events: json,
     ....
     ....
     ....       
});

相关问题