c# - fullcalendar 不呈现事件(多个 DateTime 列表)

Question

我想通过事件传递三个列表(要显示在日历上。即

1) 工作日日期

2) 当前日期

3) 缺席日期

我正在努力在 fullCalendar 上显示它们，weekDates 被划线，presentDates 被标题为“Present”或者只是右上角的一个勾号日期单元格和 absentDates 标题为“缺席”或日历上相应缺席日期单元格右上角的小十字标记。

当前显示日历但不显示事件(所有需要的日期列表)

索引.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>

Controller

 [HttpPost]
        public ActionResult showLogs(DateTime startDate, DateTime endDate, int EnrollNumber, DateTime? results, FormCollection form)
        {

ICollection<D2L> lstMachineInfo = manipulator.GetD2LData(objZkeeper2, mNum, EnrollNumber).ToList();

// Build list of weekdays
                    List<DateTime> weekDates = new List<DateTime>();
                    int days = (endDate - startDate).Days;
                    for (int i = 0; i < days; i++)
                    {
                        DateTime date = startDate.AddDays(i);
                        if (date.DayOfWeek == DayOfWeek.Saturday || date.DayOfWeek == DayOfWeek.Sunday)
                        {
                            continue;
                        }
                        weekDates.Add(date);
                    }

                    //at this point I have the weekDays Dates
                    int countWeekDays = weekDates.Count()+1;

                    var mod = (from m in lstMachineInfo
                              where m.RegisterationId == EnrollNumber &&  m.Date >= startDate && m.Date <= endDate
                              select m).Distinct();
                   var presentDates = mod
                    .GroupBy(dt => dt.Date)
                    .Select(z => z.OrderBy(y => y.Date).First())
                    .ToList();
                    // Get the dates to be excluded
                    IEnumerable<DateTime> excluded = presentDates.Select(x => x.Date.Value);
                    // Get the absent dates
                    IEnumerable<DateTime> absentDates = weekDates.Except(excluded);

                    ViewBag.absentDates = absentDates;
                   //instead of just presentDates, I want to pass absentDates and weekDates
                   //and show them on the calendar
                     return Json(presentDates.ToArray(), JsonRequestBehavior.AllowGet);
}

不是传递 weekDates，如果我们可以使用它的“选项”以某种方式在日历中划定所有工作日，那么就不需要传递 weekDates。只有 presentDates 和 absentDates 有效!

使用当前代码，我在控制台中得到的输出为；

0: "/Date(1509476400000)/"
1: "/Date(1509562800000)/"
2: "/Date(1509649200000)/"
3: "/Date(1509908400000)/"
4: "/Date(1509994800000)/"
5: "/Date(1510081200000)/"
6: "/Date(1510513200000)/"
7: "/Date(1510858800000)/"
8: "/Date(1511118000000)/"
length: 9

更新:

所以我已经能够显示 absentDates 和 presentDates 但一次只能显示一个列表(通过代码)。我现在如何同时显示两者；

以下代码显示日历上所有的 presentDates；

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

我现在如何将这两个列表一起传递？更进一步，有没有办法在 presentDates 上显示一个刻度线，除了标题“Present”和交叉标记而不是 absentDates 上的“Absent”标题。

我尝试了什么: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# 中合并这两个列表。

Answer 1

我能够通过像这样连接两个列表来解决问题；

var completeList = (presentEventList.Concat(absentEventList).ToArray());
return Json(completeList, JsonRequestBehavior.AllowGet);