Javascript 将fullcalendar.io与JSONP一起使用

我正在尝试将公共假日添加到完整日历中

第一个事件源可以工作，它从我的mvc控制器获取json。然而，第二个来源没有。我知道我需要使用jsonp，我想我需要将返回的数据映射到FullCalendar能够理解的东西上，但我不能正确地做到这一点。请协助

---

谢谢

首先，您需要使用有效参数调用url，即

http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForMonth&month=1&year=2013&country=eng

这将以以下格式返回数据：

[{"date":{"day":1,"month":1,"year":2015,"dayOfWeek":4},"localName":"New Year's Day","englishName":"New Year's Day"}]

然后是将该数据转换为预期格式的情况，即

这是通过如下方式迭代通过json返回的日期对象来完成的，但要设置所需的属性（在下面的演示中，我设置了标题和开始）：

所有这些都需要封装在一个

getJson

调用中，即

$.getJSON( "http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForMonth&month=3&year=2013&country=eng", function( data ) {

  $.each( data, function( key, val ) {
      items.push({ title : val.localName, start : val.date } );
  });  

});

您可以按如下方式设置日历项目（为演示而简化）：

var项目=[]；
var json=[{“日期”：{“日期”：1，“月份”：1，“年份”：2015，“dayOfWeek”：4}，“本地名称”：“新年”、“英语名称”：“新年”}]
$.each（json，函数（key，val）{
push（{title:val.localName，start:val.date}）；
});
$（“#日历”）.fullCalendar({
活动：项目
});

修改后的答案
我找到了解决办法。您用于约会的服务包含API文档。有关部分：

JSONP

在每个操作中，您都可以像下面这样使用JSONP：示例URL返回
2013年1月奥地利公共假日：
JSON\u URL？action=getPublicHolidaysForMonth&month=1&year=2013&country=aut&jsonp=myfunction

因此，将
callback
更改为
jsonp
，它应该可以工作。此外，如果你给出的是一个范围而不是一个月，那么对FC来说效果最好。您的ajax调用应该如下所示：

events: function (start, end, timezone, callback) {
    console.log(start.format('YYYY-MMM'));
    $.ajax({
        type: "get",
        url: 'http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForDateRange&jsonp=?',
        data: {
            country: "zaf",
            fromDate: start.format('DD-MM-YYYY'),
            toDate: end.format('DD-MM-YYYY')
        },
        dataType: 'jsonp',
        contentType: 'application/json',
        success: function (data) {
            var events = [];
            $.each(data, function (i, holiday) {
                events.push({
                    start: moment({
                        year: holiday.date.year,
                        month: holiday.date.month - 1, //momentjs uses base 0 months
                        day: holiday.date.day
                    }),
                    title: holiday.englishName,
                    allDay: true
                });
            });
            callback(events);
        }
    }).fail(function (jqXHR) {
        alert("failed to get holidays");
    });

这是一个正在工作的

旧答案：（仍然适用于非jsonp服务器）
如果您试图执行跨域json请求（jsonp），服务器需要支持它

JSONP请求是并且必须是有效的JS。文字对象不是有效的JS（如
{A:'b'}
）

jQuery通过向服务器发送回调函数名参数来处理此问题。它看起来像：

callback=jQuery21003313164389692247_1423682275577

服务器必须在此函数中包装响应数据，如下所示：

jQuery21003313164389692247_1423682275577( {id:"2",name:"me"} );

现在是有效的可执行JS

因此，除非该服务器的API允许JSONP请求，否则您无法对其执行跨域请求这是web浏览器的安全限制。

作为替代方案，您可以通过服务器代理数据。让fullcalendar向您的服务器发出请求，然后服务器从外部源加载数据并将其发送回客户端。
当我点击该URL时，我得到
{“错误”：“Country'zaf？callback=？”不受支持。}
。你真的得到了事件的JSON反馈吗？很抱歉，如果你去掉了“？callback=？”部分，它会返回很多JSonTanks。如何绕过-请求的资源上不存在“Access Control Allow Origin”标题。@Michael如果向url添加
&callback=？
，则应强制jsonp<代码>http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForMonth&month=3&year=2013&country=eng&callback=?

强制jsonp，但它不调用函数来构建items@michael抱歉，您离开了电脑，但看起来您正在进步。服务器说它支持吗？在底部。我将研究代理数据

events: function (start, end, timezone, callback) {
    console.log(start.format('YYYY-MMM'));
    $.ajax({
        type: "get",
        url: 'http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForDateRange&jsonp=?',
        data: {
            country: "zaf",
            fromDate: start.format('DD-MM-YYYY'),
            toDate: end.format('DD-MM-YYYY')
        },
        dataType: 'jsonp',
        contentType: 'application/json',
        success: function (data) {
            var events = [];
            $.each(data, function (i, holiday) {
                events.push({
                    start: moment({
                        year: holiday.date.year,
                        month: holiday.date.month - 1, //momentjs uses base 0 months
                        day: holiday.date.day
                    }),
                    title: holiday.englishName,
                    allDay: true
                });
            });
            callback(events);
        }
    }).fail(function (jqXHR) {
        alert("failed to get holidays");
    });

callback=jQuery21003313164389692247_1423682275577

jQuery21003313164389692247_1423682275577( {id:"2",name:"me"} );