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

首先，您需要使用有效参数拨打电话，即

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

修订答案

我找到了解决方案。您在日期中使用的服务包含API文档here。相关部分：

JSONP

在每个操作中，您可以像这样使用JSONP：返回示例URL   2013年1月在奥地利的公众假期：   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请求是wrapped in script tags，因此必须是有效的JS。文字对象不是有效的JS（如{a:'b'}）。

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

callback=jQuery21003313164389692247_1423682275577

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

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

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

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

作为替代方案，您可以通过服务器代理数据。让fullcalendar向您的服务器发出请求，然后从外部源加载数据并将其发送回客户端。

使用fullcalendar.io和JSONP

2 个答案:

修订答案

旧答案:(仍然适用于非jsonp服务器）