【发布时间】：2018-08-31 17:02:33
【问题描述】：
我正在使用 ASP.Net、C# 和 javascript 库“jQuery full calendar”构建一个 Intranet 站点。根据文档，我有基本要求，但我认为我的脚本可能有问题，或者在日历呈现时遗漏了某些内容，但未显示列出的事件。我正在专门寻找像我的谷歌日历上那样显示的节日活动。
以下是我的母版页中的一些相关代码，如有必要，我可以包含整个母版页。
<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
},
谁能帮帮我？
【问题讨论】：
-
旁注：
<link rel='stylesheet' href='Content/fullcalendar.print.css' />必须是<link rel='stylesheet' href='Content/fullcalendar.print.css' media='print'/>否则您将始终在网页中而不是网络版本中获得 fullCalendar 的“打印”布局。如果您不明白原因，请使用 Google“CSS 媒体查询”。
标签： javascript jquery json fullcalendar momentjs