我的问题是我调用了一个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/