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

我正在为我的api使用asp.net mvc 5并获取请求,我直接使用javascript js6 fetch。

我的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"}





我在控制台中没有任何错误。但仍然无法正常工作。提前致谢。

最佳答案

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


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

关于javascript - 无法将api json数据绑定(bind)到javascript代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56697585/

10-15 02:06