ASP.Net 核心中的日历

Question

如果这个问题 post 出现在 Stack 的错误位置，请告诉我 - 我会确保删除它并在正确的位置重新写一个新的 post。截至目前，我在这里看到了类似的问题，并认为这也是接受的table。

所以，我想知道我应该使用什么来创建一个在整个页面上带有日历的视图，该视图根据数据库日期突出显示日期。例如，在数据库中，我有以下 table:

因此，正如我所说 - 在日历视图中，应该有一个巨大的日历，其中 StartDate 和 EndDate 以特定颜色突出显示，还说明了 Name发布.

这怎么可能？我对这些东西很陌生，所以我正在寻找一些关于我应该如何处理这个问题的提示。

非常感谢！

Answer 1

它认为你把它贴在了正确的位置。你的标签看起来很棒。

如果您熟悉 JavaScript 和 ASP.Net 核心网站 API，我会推荐 Full Calendar。

将控制器添加到控制器文件夹中的 ASP.Net 核心项目。
将完整日历添加到您的页面。 (Read this.)
完整日历将调用您的 API 以获取事件数据。（参考 return JSON 格式的完整日历文档）

祝你一切顺利。

Answer 2

我建议采用 jQuery UI 方法。您可以自由定制它（参见他们的文档）

您可以使用 AJAX/jQuery 或其他方式通过控制器中的方法从数据库中获取日期。然后在 div.

中显示日历

这是一个 jsfiddle。

http://jsfiddle.net/Lhpc7zt2/1/

var events = [ 
{ Title: "Birthday", Date: new Date("12/12/2019") }, 
{ Title: "Christmas", Date: new Date("12/25/2019") }, 
{ Title: "Boxing Day", Date: new Date("12/26/2019") }
];

$("#calendar").datepicker({
beforeShowDay: function(date) {
    var result = [true, '', null];
    var tooltip = "";
    var matching = $.grep(events, function(event) {
        if (event.Date.valueOf() === date.valueOf()) {
        tooltip = event.Title;
        return true;
      }
    });

    if (matching.length > 0) {
        result = [true, 'event', tooltip];
    }
    return result;
}
});

从控制器获取 JSON：

var events;    
$.getJSON('dateController/read', null, function(output) {
    events = output;
}

那么您的控制器操作将类似于：

[HttpGet]
public IActionResult read()
{
    //Database call to read dates and convert them to JSON object...

    List<SelectedDates> highlightDates = new List<SelectedDates>();
        highlightDates.Add(new SelectedDates { Date = new DateTime(2019, 12, 
    1), Title = "Birthday" });

    return Json(highlightDates);
}

ASP.Net 核心中的日历

Calendar in ASP.Net Core

c#

calendar

asp.net-core