Javascript 如何获取要显示的jQuery完整日历事件

我正在使用ASP.Net、C#和javascript库“jQuery full calendar”构建一个内部网站。根据文档，我有一些基本要求，但我想我可能是脚本出了问题，或者在日历呈现时遗漏了一些内容，但没有显示列出的事件。我特别寻找假日活动，因为他们在我的谷歌日历上显示

下面是我的母版页中的一些相关代码，如果需要，我可以包括整个母版页

<link rel='stylesheet' href='Content/fullcalendar.css' />
<link rel='stylesheet' href='Content/fullcalendar.print.css' />
<link rel="stylesheet" href="Content/jquery-ui.css"/>
<script src='Scripts/moment.min.js'></script>
<script src='Scripts/jquery.min.js'></script> 
<script src="Scripts/jquery-ui.js"></script>
<script src='Scripts/gcal.js'></script>
<script src='Scripts/fullcalendar.js'></script> 
<script src='Scripts/Site.js'></script>

<script type='text/javascript'>
      $(document).ready(function() {

        $('#calendar').fullCalendar({
            theme: true,
            editable: true,
            disableDragging: true,
            disableResizing: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            googleCalendarApiKey: 'my api key',
            events: function(start, end, callback) {
        // do some asynchronous ajax
        contentType:"application/json; charset=utf-8",
            $.getJSON("/outlookHolidayCalendar2018.JSON",
                    {
                            start: dateFormat(start.getTime()),
                            end: dateFormat(end.getTime())
                    },
                    function(result) {
                            if(result != null)
                            {
                                for (i in result) {
                                    var calEvent = result[i];
                                    //calEvent.date = new Date(parseInt(calEvent.date.replace("/Date(", "").replace(")/", ""), 10));
                                    //calEvent.start = new Date(parseInt(calEvent.start.replace("/Date(", "").replace(")/", ""), 10));
                                    //calEvent.end = new Date(parseInt(calEvent.end.replace("/Date(", "").replace(")/", ""), 10));

                                    title: result.Subject;
                                    start: result.StartDate.format();
                                    end: result.EndDate.format()

                                }
                            }
                            else {
                                alert('there was an error while fetching JSON events!');
                            }
                            var calevents = result;
                            // then, pass the CalEvent array to the callback
                            callback(calevents);

                    });

            },
            eventClick : function(event) {
                editEventShow(event);
            },
            dayClick : function(dayDate){
                addEventShow(dayDate, this);
            }
        });

      });
    </script>

},

以下是其渲染方式的屏幕截图：

---

你们中有谁能帮我吗？

如果您查看浏览器控制台，我预计您会出现一两个错误

title: result.Subject;
start: result.StartDate.format();
end: result.EndDate.format()

是错误的-它没有做任何有用的事情。我知道您试图做什么（即设置与fullCalendar预期的事件结构相匹配的字段名），但要使其工作，您需要实际创建一个对象

不幸的是，这样做之后，您通过编写

var calevents=result-所以您只需将原始的整个结果数组放入calEvents，忽略处理它以符合fullCalendar预期的所有尝试

然后是
StartDate.format（）

为什么这是一个问题？因为您的数据是从JSON解析的。在JSON中，
StartDate
和
EndDate
是字符串（表示日期，但仍然是字符串）。因此，在
结果
数组中，它们仍然是字符串。字符串没有
format（）
方法。您的代码将因此崩溃（除了所有其他问题！）

FullCalendar（使用momentJS处理日期）可以通过多种方式接受日期（有关更多详细信息，请参阅和）

它可以接受日期作为字符串，但不能采用您提供的格式-这是不明确的。“2018年4月1日”可能是4月1日或1月4日，具体取决于您的阅读方式——通常您的阅读方式取决于您所在国家的习俗。然而，除非你告诉计算机，否则计算机无法确定你想要的是哪一个

因此，您有两种选择：


备选方案1）

如果出于任何原因不能/不会更改JSON源数据，则必须创建一个事件对象（或修改现有对象），该对象的字段名和格式与fullCalendar匹配。您需要设置正确的属性，并使用momentJS解析日期，如果您告诉它日期的格式：

events: function(start, end, callback) {
  // do some asynchronous ajax
  $.getJSON("/outlookHolidayCalendar2018.JSON", function(result) {
   for (i = 0; i < result.length; i++) {
      result[i].title = result[i].Subject;
      result[i].start = moment(result[i].StartDate, "MM/DD/YYYY");
      result[i].end = moment(result[i].EndDate, "MM/DD/YYYY")
    }
    callback(result);
  });
},

然后在JavaScript中，您可以简单地编写：

events: "/outlookHolidayCalendar2018.JSON"

去掉整个函数，因为title、start、end和allDay字段的字段名和格式与fullCalendar期望的一致（请参阅）


另外，您的“googleCalendarAPIKey”选项和“contentType”行似乎都是多余的。第一个是无用的，因为你没有在你的代码中访问谷歌日历，第二个只是不去任何地方，它只是被声明（不管怎样都是错误的，好像它是一个对象属性），然后被丢弃。您还可以删除
gcal.js
脚本，因为该脚本也只能从谷歌日历下载

基于所有这些，我认为您现在需要做的最重要的事情是更详细地研究JavaScript语法，并学习如何使用浏览器的开发工具（包括控制台和其他工具）调试程序并查找错误。
旁注：
必须是
，否则您将始终获得“打印”网页中完整日历的布局，而不是web版本。Google“CSS媒体查询”“如果你不明白为什么，非常感谢你的帮助。看来我在那里犯了很多错误。实际上，我尝试了您的解决方案1和2，但这会导致其他错误。我感觉我就快到了，然后我的副总裁把整个项目都搞糟了。因此，我将无法报告这个解决方案是否真的有效，但无论如何，非常感谢。干杯
events: function(start, end, callback) {
  // do some asynchronous ajax
  $.getJSON("/outlookHolidayCalendar2018.JSON", function(result) {
   for (i = 0; i < result.length; i++) {
      result[i].title = result[i].Subject;
      result[i].start = moment(result[i].StartDate, "MM/DD/YYYY");
      result[i].end = moment(result[i].EndDate, "MM/DD/YYYY")
    }
    callback(result);
  });
},

{
  "title": "Easter Day",
  "start": "2018-04-01",
  "end": "2018-04-02",
  "allDay": true,
  "Reminder_on_off": false,
  "ReminderDate": "2018-03-31 23:45:00",
  "MeetingOrganizer": "",
  "RequiredAttendees": "",
  "OptionalAttendees": "",
  "MeetingResources": "",
  "BillingInformation": "",
  "Categories": "",
  "Description": "",
  "Location": "United States",
  "Mileage": "",
  "Priority": "Normal",
  "Private": false,
  "Sensitivity": "Normal",
  "Show_time_as": 3
},

events: "/outlookHolidayCalendar2018.JSON"