在页面加载时从模型向 FullCalendar 添加事件答案

【问题标题】：Add events to FullCalendar from model on page load在页面加载时从模型向 FullCalendar 添加事件
【发布时间】：2020-07-09 12:26:58
【问题描述】：

我正在尝试在页面加载时将事件添加到日历的所有日期，并且它们需要根据每天连接的一些数据具有三种颜色（红色、黄色、绿色）中的一种。三天活动的简单示例：

我有一个模型，其中包含有关给定日期的订单有多少可用托盘的数据。如果空闲托盘少于 10 个，则事件应该是红色的，如果它在 10 到 149 之间，则必须是黄色等等（如示例所示）。

这是当前的“FullCalendar”脚本：

<script type="text/javascript">
    var calendar = new FullCalendar.Calendar($("#calendar")[0], {
        plugins: ['interaction', 'dayGrid'],
        height: 'auto',
        defaultView: 'dayGridMonth',
        weekNumberCalculation: 'ISO',
        weekNumbers: true,
        events: [
            {
            title: '150-300',
                start: '2020-07-16',
            color: 'green'
            },
            {
            title: '10-149',
                start: '2020-07-15',
            color: 'yellow'
            },
            {
            title: '<10',
                start: '2020-07-14',
            color: 'red'
            }],
        dateClick: function (info) {
            window.location.href = "Incoming?date=" + info.dateStr;
        }
    });
    calendar.render();
    calendar.select('@(Model.Date?.ToString("yyyy-MM-dd"))');
</script>

硬编码事件仅用于示例。

我想在页面加载时，根据免费托盘数量的数据，在该月的每个日期用彩色事件填充日历。如何根据我的 MVC (.Net) 应用程序中的模型提供的数据动态创建这些事件？

我已经尝试了该论坛中关于动态添加事件的几种建议解决方案，但它们要么不起作用，要么与发布操作相关联，我认为在这种情况下没有必要这样做。

更新

我试图在我的控制器中创建一个 JsonResult 操作，它似乎创建了一个有效的 Json 字符串，我可以提供我的 FullCalendar。然而，它似乎不起作用。我有这个动作：

public JsonResult GetCalendarEvents(string id, DateTime? date)
        {
         //Database related code to get dates and their amount of free pallets (this is where I use the id and date parameters)
                var idEvent = 1;
                foreach (var v in days)
                {
                    var title = "";
                    var color = "";
                    var freecap = (v.DayOfWeek == DayOfWeek.Friday ? 200 : 300) - model.Incomings.Where(x => x.ExpectedDate == v &&
                            x.ExpectedPallets.HasValue).Sum(x => x.ExpectedPallets);


                    if(freecap >= 150)
                    {
                        title = "150-300";
                        color = "green";
                    } else if(freecap < 150 && freecap >= 10)
                    {
                        title = "10-149";
                        color = "yellow";
                    } else
                    {
                        title = "<10";
                        color = "red";
                    }

                    events.Add(new CalendarEvent { id = idEvent, title = title, allDay = "", start = v.Date.ToString().Substring(0,10), end = v.Date.ToString().Substring(0, 10), color = color });
                    
                    idEvent++;
                }
            }

            return Json(events, JsonRequestBehavior.AllowGet);

Json 结果如下所示：

[{"id":1,"title":"150-300","allDay":"","start":"19-07-2019","end":"19-07-2019","color":"green"},{"id":2,"title":"150-300","allDay":"","start":"22-08-2019","end":"22-08-2019","color":"green"},{"id":3,"title":"150-300","allDay":"","start":"30-08-2019","end":"30-08-2019","color":"green"}]

添加属性 id、allDay 和 end 是因为这篇文章的最佳答案：Jquery Full Calendar json event source syntax，但这并没有帮助。

日历中没有显示任何事件，但页面和日历加载正常（没有事件）。我在这里错过了什么？

【问题讨论】：

fullcalendar.io/docs/events-json-feed - 这有帮助吗？为您的事件提供单独的 JSON 提要，而不是将它们放在视图中的模型中。这样，您将获得一个非静态列表，该列表可以随着用户在日期范围内的移动而更新。当然你也可以使用代码生成事件数据，包括计算颜色，然后序列化为 JSON
嗯？我真的不确定你想说什么。事件的数量对 URL 没有影响。您只需指定一个 URL 作为事件源并告诉 fullCalendar 该 URL。 Fullcalendar 将向该 URL 发送请求（它还将当前视图的开始和结束日期附加到 URL，以帮助服务器知道要返回哪些事件）。然后，您的服务器在收到该请求时，必须以正确的 JSON 格式发回事件列表作为对该请求的响应。该列表在响应中，它与任何 URL 无关。
是的，当然。在 MVC 中，可以通过使操作返回 JsonResult 来完成
您的开始和结束日期必须采用 YYYY-MM-DD 格式。（DD-MM-YYYY 不明确，可能会被误认为是 MM-DD-YYYY，例如 2019 年 3 月 7 日 - 是 7 月 3 日还是 3 月 7 日？？ fullCalendar 无法判断您打算代表哪种格式，因此它不会t 接受它，所以你必须使用 YYYY-MM-DD 这是一个明确的格式。）
P.S.这在文档here 和更详细的here 中提到

标签： javascript json asp.net-mvc fullcalendar fullcalendar-4

【解决方案1】：

在用户@ADyson 的帮助下，我找到了解决问题的方法。如果其他人碰巧遇到相同的问题或想通过在 MVC 上下文中提供 JSON 来处理 FullCalender 事件，这里有一个比较完整的示例和答案。

首先我有一个带有必要属性的事件类（我实际上只使用了标题、开始和颜色属性，但其余的可能也是必需的，这就是我添加它们的原因，根据这篇文章Jquery Full Calendar json event source syntax）：

public class CalendarEvent
    {
        public int id { get; set; }
        public string title { get; set; }
        public string allDay { get; set; }
        public string start { get; set; }
        public string end { get; set; }
        public string color { get; set; }
    }

然后我的控制器中有这样的操作 GetCalendarEvents：

public JsonResult GetCalendarEvents(string id, DateTime? date)
        {
         //Database related code to get dates and their amount of free pallets (this is where I use the id and date parameters)
                var idEvent = 1;
                foreach (var v in days)
                {
                    var title = "";
                    var color = "";
                    var freecap = (v.DayOfWeek == DayOfWeek.Friday ? 200 : 300) - model.Incomings.Where(x => x.ExpectedDate == v &&
                            x.ExpectedPallets.HasValue).Sum(x => x.ExpectedPallets);


                    if(freecap >= 150)
                    {
                        title = "150-300";
                        color = "green";
                    } else if(freecap < 150 && freecap >= 10)
                    {
                        title = "10-149";
                        color = "yellow";
                    } else
                    {
                        title = "<10";
                        color = "red";
                    }

                    events.Add(new CalendarEvent { id = idEvent, title = title, allDay = "", start = v.Date.ToString().Substring(0,10), end = v.Date.ToString().Substring(0, 10), color = color });
                    
                    idEvent++;
                }
            }

            return Json(events, JsonRequestBehavior.AllowGet);
}

操作中的逻辑主要是从我们的数据库中获取正确的数据并确定事件应该具有的颜色和名称（这取决于给定日期我们仓库中的空闲托盘数量）。这个方法可以做任何你需要做的事情，它的本质是它创建一个事件列表并将它们作为 Json 结果返回。

在我的视图中，FullCalendar 脚本和小部件所在的位置我将事件引用到这样的操作（请记住更改路由、控制器、操作和 id 字符串以适合您自己的）：

events: '@Url.HttpRouteUrl("Default", new { controller = "Home", action = "GetCalendarEvents", id = "DOD" })'

在所有事件的标题前可能会出现一个字符串“12a”。这是因为它指示了事件的开始时间（我没有设置）。无论哪种情况，如果您想摆脱它，都可以将这两行添加到脚本中：

timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
displayEventTime: false

我的完整 FullCalendar 脚本如下所示：

<script type="text/javascript">
    var calendar = new FullCalendar.Calendar($("#calendar")[0], {
        plugins: ['interaction', 'dayGrid'],
        height: 'auto',
        defaultView: 'dayGridMonth',
        weekNumberCalculation: 'ISO',
        weekNumbers: true,
        events: '@Url.HttpRouteUrl("Default", new { controller = "Home", action = "GetCalendarEvents", id = "DOD" })',
        timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
        displayEventTime: false,
        dateClick: function (info) {
                window.location.href = "Incoming?date=" + info.dateStr;
            }
        });
    calendar.render();
    calendar.select('@(Model.Date?.ToString("yyyy-MM-dd"))');
</script>

返回的 JSON 结果应如下所示：

[{"id":1,"title":"150-300","allDay":"","start":"2019-07-19","end":"2019-07-19","color":"green"},{"id":2,"title":"150-300","allDay":"","start":"2019-08-22","end":"2019-08-22","color":"green"},{"id":3,"title":"150-300","allDay":"","start":"2019-08-30","end":"2019-08-30","color":"green"}]

正如@ADyson 指出的那样，这里需要注意的是，日期格式必须是 yyyy-MM-dd（这就是我更新的帖子不起作用的原因）。如果您需要更多信息，请查看 FullCalendar 文档，@ADyson 还链接了该文档： Event Parsing 和 Events (as a json feed)

【讨论】：