Question

我的问题是我调用了一个api，它给了我一组需要通过JavaScript绑定的json数据。我正在使用fullcalendar API来显示日历。在下面，我只粘贴我的代码，请帮助我。在控制台中，我没有任何错误，但仍然无法正常工作。

我将asp.net mvc 5用于我的api并提取请求，我直接使用javascript js6提取。

我的JavaScript代码

 document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        //fetch data for events
        var eventdata = fetch('@Url.Action("GetTsdates", "Remo")')
                .then(function (responce) {
                    responce.json().then(function (data) {
                        console.log(data);
                        return data;
                    })
                })
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            //defaultDate: '2019-06-12',
            editable: true,
            eventLimit: true,
            events: eventdata
        });
        calendar.render();
    });

控制台中的json数据

{start: "2019-06-01", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-02", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-03", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-04", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-05", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-06", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-07", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-08", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-09", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-10", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-11", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-12", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-13", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-14", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-15", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-16", overlap: false, rendering: "background", color: "#f44242"}

i控制台中没有任何错误。但仍然无法正常工作。预先感谢。

Answer 1

FullCalendar提供了一些方法来定义动态事件源。您不必直接提供数据数组，而是可以提供一个将以正确格式返回JSON数据的URL，然后由fullCalendar完成其余工作，或者可以提供一个回调函数，该函数将运行fullCalendar为了得到事件。

然后它将在需要获取新事件时调用提供的URL /运行提供的函数（当用户将日历视图更改为以前未获取事件的日期范围时，通常会发生这种情况-为了提高效率，通常服务器应该只发送实际显示日期的事件。FullCalendar可以告诉您的服务器它需要数据的日期。）

您可以在fullCalendar文档中详细了解其中的每个功能：

1）URL Event Source

2）Function Event Source

在您的情况下，您的服务器似乎已经通过GET请求以正确的格式返回了数据，因此我认为您可以选择选项1，仅向fullCalendar提供URL并使其继续工作。因此，您可以将代码更改为：

document.addEventListener('DOMContentLoaded', renderCalendar);

function renderCalendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['interaction', 'dayGrid'],
        //defaultDate: '2019-06-12',
        editable: true,
        eventLimit: true,
        events: '@Url.Action("GetTsdates", "Remo")'
    });
    calendar.render();
}

根据该文档，理想情况下，应该对服务器进行编程，使其接受fullCalendar将附加到其获取请求的开始和结束日期参数，然后过滤返回的事件列表，以便仅返回那些日期内的事件。如果您有大量的历史事件，这将对性能有所帮助，因为您不会花费时间和带宽来加载事件，而用户很有可能永远不会查看这些事件。

Answer 2

您需要编写一个函数，该函数使用promise的解析值并呈现日历。

document.addEventListener('DOMContentLoaded', getEventsFromServer);

function getEventsFromServer() {
    fetch('@Url.Action("GetTsdates", "Remo")')
        .then(resp => resp.json())
        .then(data => renderCalendar(data))
        .catch(err => console.log('Fetch Error :-S', err));
}

function renderCalendar(data) {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            //defaultDate: '2019-06-12',
            editable: true,
            eventLimit: true,
            events: data
        });
    calendar.render();
}

无法将api json数据绑定到javascript代码

2 个答案: