FullCalendar - 通過 ajax 發送視圖

Question

我正在嘗試將fullCalendar插件集成到網站中。 我遇到的問題是我正在嘗試通過 json/$.ajax 方法將當前視圖作為自定義參數發送，無論是月份、議程日等。

$('#calendar').fullCalendar({
events: {
    url: 'feed.php',
    type: 'POST',
    data: {
        view: $('#calendar').fullCalendar('getView').name
    },
    error: function() {
        alert('there was an error while fetching events!');
    }
}
});

以上返回任何錯誤，但自定義view變量未與正常值一起傳遞。

我嘗試了以下方法：

$('#calendar').fullCalendar({
    events: {
        url: 'feed.php?view=' + $('#calendar').fullCalendar('getView').name,
       .......

但這只是將?view=undefined添加到 ajax 調用中。 我知道$('#calendar').fullCalendar('getView').name工作，因為它返回正確的值所以它必須是線view: $('#calendar').fullCalendar('getView').name但我不確定是什么。

Answer 1

只是想我會為這個問題添加解決方案，以備將來參考。

通過簡單地確定fullCalendar傳遞到我的服務器端php的start和end時間戳之間的天數，我可以知道我們正在為哪個視圖檢索數據。

$NumberOfDaysInView = abs($_GET['start'] - $_GET['end'])/60/60/24;

希望這可以幫助！

Answer 2

這是因為您在初始化之前調用了“ fullCalendar（）”，因此不允許這樣做。

$('#calendar').fullCalendar({...});

這意味着$（'＃calendar'）（一個jquery對象）將由您在{...}中發送的值初始化。

因此，在完成fullCalendar（）初始化之前，不能使用它。

Answer 3

似乎您在嘗試初始化fullCalendar之前正在嘗試訪問它。 嘗試將其分為單獨的步驟：

$('#calendar').fullCalendar();
var viewName = $('#calendar').fullCalendar('getView').name;
$('#calendar').fullCalendar({
    events: {
        url: 'feed.php',
        type: 'POST',
        data: {
            view: viewName
        },
        error: function() {
            alert('there was an error while fetching events!');
        }
    }
});

Answer 4

FullCalendar v4 及之后

// import FullCalendar like so:
// import { Calendar } from '@fullcalendar/core';

// then initialize Full Calendar on your element
let calendarEl = document.getElementById('calendar');
let calendar =  new Calendar(calendarEl, {
    // all your calendar settings except the events one
});

// then add your events source and configure it to send the calendar current view
calendar.addEventSource({
    url: "/url_of_your_events",
    extraParams: function() {
        return {
            viewName: calendar.view.type,
        };
    },
});

// then render your calendar
calendar.render();

FullCalendar v3 和之前使用 jQuery

$("#calendar").fullCalendar({
    // all your calendar settings
    // ...

    // configure the event source to send the calendar current view
    events: {
        url: "/url_of_your_events",
        data: function() {
            return { view: $('#calendar').fullCalendar('getView').name };
        },
    },
});