C# fullcalendar未呈现事件(多个日期时间列表)
我有三个列表,我希望通过这些事件(在日历上显示)传递它们 1) 工作日日期 2) 当前日期 3) 缺席日期 我正在努力将它们显示在完整的日历上,C# fullcalendar未呈现事件(多个日期时间列表),c#,json,asp.net-mvc,fullcalendar,C#,Json,Asp.net Mvc,Fullcalendar,我有三个列表,我希望通过这些事件(在日历上显示)传递它们 1) 工作日日期 2) 当前日期 3) 缺席日期 我正在努力将它们显示在完整的日历上,weekdate带有边框,presentDates标题为“Present”,或者只在日期单元格的右上角打一个勾号,absentDates标题为“缺席”或者在日历上各个缺席日期的单元格右上角的小十字标记 var absentEventList = from e in absentDates
weekdate
带有边框,presentDates
标题为“Present”,或者只在日期单元格的右上角打一个勾号,absentDates
标题为“缺席”或者在日历上各个缺席日期的单元格右上角的小十字标记
var absentEventList = from e in absentDates
select new
{
id = EnrollNumber,
title = "Absent",
start = ((DateTime)e.Date).ToString("s"),
end = ((DateTime)e.Date).ToString("s"),
someKey = EnrollNumber,
allDay = false
};
var absentRows = absentEventList.ToArray();
return Json(absentRows,JsonRequestBehavior.AllowGet);
当前显示日历,但不显示事件(所有所需的日期列表)
Index.cshtml
<div class="form-group">
<b>Start Date</b>
<input type="date" id="startDate" name="startDate" required />
<b>End Date</b>
<input type="date" id="endDate" name="endDate" required />
</div>
@Html.LabelFor(model => model.EnrollNumber, "Enroll ID", htmlAttributes: new { @class = "control-label col-md-2", @style = "float:left; margin-left: -15px; margin-top: 30px;" })
<div class="col-md-10">
@Html.DropDownList("EnrollNumber", null, "Select Enroll ID", htmlAttributes: new { id = "ddEnrollNumber", @class = "form-control", @style = "margin-left: -30px; margin-top: 20px;", required = "required", title = "Please select an Enroll ID" })
@Html.ValidationMessageFor(model => model.EnrollNumber, "", new { @class = "text-danger" })
</div>
<div id="results" name="results"><br /></div>
<div class="form-group">
<input type="submit" class="btn btn danger" value="Filter" id="getBetween" name="FilterAbsents" onclick="showCal()" />
</div>
</div>
<div id='calendar'></div>
@section scripts{
<script>
function showCal() {
id = $('#EnrollNumber :selected').text();
s = $("#startDate").val();
e = $("#endDate").val();
console.log(s);
console.log(e);
$.post("/Absent/showLogs",
{
EnrollNumber: id,
startDate: s,
endDate: e
},
function (response) {
callCalendar(response);
}
);
}
function callCalendar(e)
{
console.log(e);
// $('#calendar').html('');
$("#calendar").fullCalendar('removeEvents');
$("#calendar").fullCalendar('addEventSource', e);
$("#calendar").fullCalendar('rerenderEvents');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultDate: '2017-11-13 14:26:36.000',
//defaultDate: '2017-11-13 09:05 am',
navLinks: true,
editable: true,
eventLimit: true,
events: e, //or should I change this to > ControllerName/funcName
slotMinutes:5
});
}
</script>
<script>
$(document).ready(function () {
callCalendar('');
});
</script>
}
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
更新:
因此,我能够显示缺席日期和当前日期,但一次只能显示一个列表(通过代码)。我现在如何将两者同时显示
以下代码显示日历上的所有当前日期
var presentEventList = from e in presentDates
select new
{
id = EnrollNumber,
title = "Present",
start = ((DateTime)e.Date).ToString("s"),
end = ((DateTime)e.Date).ToString("s"),
someKey = e.RegisterationId,
allDay = false
};
var presentRows = presentEventList.ToArray();
return Json(presentRows, JsonRequestBehavior.AllowGet);
但是,当我用这个代码替换上面的代码时,它会显示日历上的所有缺席日期
var absentEventList = from e in absentDates
select new
{
id = EnrollNumber,
title = "Absent",
start = ((DateTime)e.Date).ToString("s"),
end = ((DateTime)e.Date).ToString("s"),
someKey = EnrollNumber,
allDay = false
};
var absentRows = absentEventList.ToArray();
return Json(absentRows,JsonRequestBehavior.AllowGet);
现在如何将这两个列表一起传递?此外,是否有一种方法可以在当前日期上显示勾号,除了标题“当前”和交叉标记,而不是缺席日期上的“缺席”标题
我尝试的是:1)使用多个类似这样的EventSources,但它不调用showAbsentLogs函数
eventSources: [
// your event source
{
url: 'Absent/showLogs', // use the `url` property
color: 'green', // an option!
textColor: 'white' // an option!
},
{
url: 'Absent/showAbsentLogs', // use the `url` property
color: 'red', // an option!
textColor: 'white' // an option!
}
]
更好的解决方案是在C#中合并两个列表。我能够通过如下方式连接两个列表来解决问题
var completeList = (presentEventList.Concat(absentEventList).ToArray());
return Json(completeList, JsonRequestBehavior.AllowGet);
我能够通过像这样连接两个列表来解决这个问题
var completeList = (presentEventList.Concat(absentEventList).ToArray());
return Json(completeList, JsonRequestBehavior.AllowGet);
1) 您的输出不是fullCalendar要求的“事件”格式。今天早些时候关于另一个问题,我告诉过你阅读文档以查看所需的格式,似乎你还没有这样做?2) 这些是旧版本的ASP.NET通常输出的讨厌的日期格式。幸运的是,您可以使用momentJS将它们解析为fullCalenar可以理解的momentJS对象。我建议您在eventDataTransform回调()期间执行此操作。或者,您可以让C#直接以ISO字符串的形式输出日期,该字符串可以通过fullCalendar进行本机解析。它在客户端更干净,但只需要稍微调整服务器端模型(无论如何它都需要)。您在代码中的注释:
events:e,//或者我应该将其更改为>ControllerName/funcName
。是的,理想情况下你会这样做,因为它更有活力。您的服务器端方法必须符合此处给出的说明:。fullCalendar将处理传入的开始/结束日期(根据当前日历视图)。您可以使用该文章所示的数据:
选项添加其他参数。@ADyson您的输出不是fullCalendar所要求的“事件”格式
那么应该如何?我知道这与使用momentJS解析日期有关,但除此之外,我需要知道如何将这两个列表presentDates
和absentDates
传递到日历。对于这个问题的解决方案,我们将不胜感激:)“那该怎么办?”。好悲伤。第100次阅读文档。此外,还可以查看fullCalendar标签上的数百个以前的答案,其中显示了事件数据的实际示例。1)您的输出不是fullCalendar要求的“事件”格式。今天早些时候关于另一个问题,我告诉过你阅读文档以查看所需的格式,似乎你还没有这样做?2) 这些是旧版本的ASP.NET通常输出的讨厌的日期格式。幸运的是,您可以使用momentJS将它们解析为fullCalenar可以理解的momentJS对象。我建议您在eventDataTransform回调()期间执行此操作。或者,您可以让C#直接以ISO字符串的形式输出日期,该字符串可以通过fullCalendar进行本机解析。它在客户端更干净,但只需要稍微调整服务器端模型(无论如何它都需要)。您在代码中的注释:events:e,//或者我应该将其更改为>ControllerName/funcName
。是的,理想情况下你会这样做,因为它更有活力。您的服务器端方法必须符合此处给出的说明:。fullCalendar将处理传入的开始/结束日期(根据当前日历视图)。您可以使用该文章所示的数据:
选项添加其他参数。@ADyson您的输出不是fullCalendar所要求的“事件”格式
那么应该如何?我知道这与使用momentJS解析日期有关,但除此之外,我需要知道如何将这两个列表presentDates
和absentDates
传递到日历。对于这个问题的解决方案,我们将不胜感激:)“那该怎么办?”。好悲伤。第100次阅读文档。此外,还可以在fullCalendar标签上看到之前的数百个答案,其中显示了事件数据的实际示例。