结合使用fullcalendar.io和JSONP

Question

我正在尝试将公共假期添加到完整日历中。 http://fullcalendar.io/

var actionUrl =  @Html.Raw(Json.Encode(@Url.Action("Calendar", "Lecture")));

        $('#fullcalendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            eventTextColor : "Black",
            eventSources: [

            {
                url: actionUrl,
                data: function() {
                    return {
                        campusIds: getCampusIds(),
                        lectureRoomIds: getLectureRoomsIds(),
                        lecturerIds: getLecturerIds(),
                        eventTypeIds: getEventTypeIds(),
                    }
                },
                error: function() {
                    alert('there was an error while fetching events!');
                },
                traditional: true
            },

            {
                url: "http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForMonth&month=1&year=2013&country=zaf?callback=?",
                error: function() {
                    alert('there was an error while fetching events!');
                },
            }
        ],

第一个事件源有效，并且可以从我的mvc控制器获取json。 但是第二个来源没有。 我知道我需要使用jsonp，我想我需要将返回的数据映射到整个日历都可以理解的东西，但是我做不到。 请协助！

谢谢

Answer 1

首先，您需要使用有效参数调用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"}]

然后是将数据转换为期望的格式，即EventData的情况 。

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

  var items = [];
  $.each( json, function( key, val ) {
      items.push({ title : val.localName, start : val.date } );
  });

所有这些都需要包装在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 } );
  });  

});

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

$('#calendar').fullCalendar({
    events: items
});

的jsfiddle

 var items = []; var json = [{"date":{"day":1,"month":1,"year":2015,"dayOfWeek":4},"localName":"New Year's Day","englishName":"New Year's Day"}] $.each( json, function( key, val ) { items.push({ title : val.localName, start : val.date } ); }); $('#calendar').fullCalendar({ events: items }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.css" rel="stylesheet"/> <div id='calendar'></div> 

Answer 2

修改后的答案

我找到了解决方案。 您用于约会的服务在此处具有API文档。 相关部分：

JSONP

在每个操作中，您都可以像这样使用JSONP：2013年1月在奥地利返回公共假日的示例URL： JSON_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");
    });

这是一个正在工作的JSFiddle 。

旧答案：（仍适用于非jsonp服务器）

如果您尝试执行跨域json请求（jsonp），则服务器需要支持它。

JSONP请求包装在脚本标签中 ，因此必须是有效的JS。 文字对象不是有效的JS（例如{a:'b'} ）。

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

callback=jQuery21003313164389692247_1423682275577

服务器必须使用以下函数包装响应数据：

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

现在是有效且可执行的JS。

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

或者，您可以通过服务器代理数据。 向您的服务器发出全日历请求，服务器再从外部源加载数据并将其发送回客户端。