Question

我正在使用ASP.Net，C＃和javascript库“ jQuery full calendar”构建Intranet网站。根据文档，我有基本要求，但是我认为我可能是脚本混乱，或者日历显示时缺少某些内容，但未显示列出的事件。我特别希望节日活动能够像在我的Google日历上一样显示。

link to documentation

下面是我的主页上的一些相关代码，如有必要，我可以包括整个主页。

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

我的“日历”页面看起来像这样。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%-- using fullcalendar from  https://fullcalendar.io/docs/intro --%>
<div id='calendar'></div>

以下是我的JSON文件中的示例

{
"Subject": "Easter Day",
"StartDate": "4/1/2018",
"StartTime": "12:00:00 AM",
"EndDate": "4/2/2018",
"EndTime": "12:00:00 AM",
"All_day_event": "TRUE",
"Reminder_on_off": "FALSE",
"ReminderDate": "3/31/2018",
"ReminderTime": "11:45:00 PM",
"MeetingOrganizer": "",
"RequiredAttendees": "",
"OptionalAttendees": "",
"MeetingResources": "",
"BillingInformation": "",
"Categories": "",
"Description": "",
"Location": "United States",
"Mileage": "",
"Priority": "Normal",
"Private": "FALSE",
"Sensitivity": "Normal",
"Show_time_as": 3

}，

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

任何人都可以帮我吗？

Answer 1

如果您在浏览器的控制台中查看，我预计您会遇到一两个错误。

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

是错误的-它没有任何用处。我可以看到您正在尝试执行的操作（即，设置与fullCalendar的预期事件结构匹配的字段名称），但是要使其正常工作，您需要实际创建一个对象。

不幸的是，这样做之后，您通过编写var calevents = result;使问题更加复杂-因此，您只是将整个原始结果数组放入calEvents中，而忽略了为满足fullCalendar的期望而进行的所有处理尝试。

然后有StartDate.format() ...

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

FullCalendar（使用momentJS处理日期）可以通过多种方式接受日期（有关更多详细信息，请参见https://fullcalendar.io/docs/moment和https://momentjs.com/docs/#/parsing/string/）。

它可以接受日期作为字符串，但不能采用您提供的格式-模棱两可。 “ 4/1/2018”可能是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);
  });
},

注意：

a。 fullCalendar可以接受momentJS对象作为输入，因此无需使用.format()将其重新更改为字符串。

b。您的for语法是完全错误的-这是迭代对象属性的语法，而不是数组索引。 result是整个数组，而不是单个项目。

c。 if语句有点多余。不返回任何结果并不表示错误，而仅表示没有结果。如果没有结果，那么日历上不会显示任何事件，仅此而已。这不是错误或错误。

d。在$ .getJSON请求中发送“ start”和“ end”参数是无用的，因为您正在访问静态JSON文件。仅在将请求发送到服务器端脚本时，发送这些参数才有用，该脚本可以处理它们并使用它们来限制返回到fullCalendar的数据范围。因此，我将其从示例中删除。

选项2）

一个更清洁的选项是更改JSON，以便它以明确的格式输出日期字符串。 fullCalendar和momentJS接受国际标准IS0-8601格式的日期字符串，其中日期部分采用YYYY-MM-DD格式，例如2018-04-01。在这一点上，将日期和时间字段组合为一个字段也是明智的，因为fullCalendar将读取单个日期/时间字符串作为开始和结束时间。这样一来，您以后就不必再合并它们了。您提供的示例被标记为全天活动，因此这并不适用，但这将成为其他活动的模式。

实际上，如果您对JSON进行了大修，则可以使其完全不需要使用JavaScript进行处理，而可以直接将其直接传递给fullCalendar。

像这样在JSON中写一个事件：

{
  "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
},

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

events: "/outlookHolidayCalendar2018.JSON"

并删除整个函数，因为标题，开始，结束和allDay字段的字段名称和格式与fullCalendar期望的一样（请参见https://fullcalendar.io/docs/event-object）。

P.S。您的“ googleCalendarAPIKey”选项和“ contentType”行也都显得多余。第一个是无用的，因为您没有在代码中访问Google日历，而第二个则无处可去，只是被声明（无论如何都好像是对象属性一样），然后被丢弃。您还可以删除gcal.js脚本，因为该脚本也仅用于从Google日历下载。

基于所有这些，我认为您现在需要做的最重要的事情是更详细地研究JavaScript语法，并学习如何使用浏览器的开发人员工具（包含控制台和其他工具）调试程序并查看错误。

如何显示jQuery Full Calendar事件

1 个答案: