ASP.Net Core 中的日歷

Question

如果這個問題發布在 Stack 的錯誤位置，請讓我知道 - 我會確保刪除它並在正確的位置重新寫一篇新帖子。 截至目前，我在這里看到了類似的問題，並認為這也可以接受。

所以，我想知道我應該使用什么來在整個頁面上創建一個帶有日歷的視圖，該視圖根據數據庫日期突出顯示日期。 例如，在數據庫中，我有下表：

因此，正如我所說 - 在日歷視圖中，應該有一個巨大的日歷，其中StartDate和EndDate用某些顏色突出顯示，還說明了發布的Name 。

這怎么可能？ 我對這個東西很陌生，所以我正在尋找一些關於我應該如何處理這個問題的提示。

非常感謝！

Answer 1

它認為你把這個貼在了正確的地方。 你的標簽看起來很棒。

如果您熟悉 JavaScript 和 ASP.Net Core Web API，我會推薦Full Calendar 。

1. 將控制器添加到 Controllers 文件夾中的 ASP.Net Core 項目。
2. 將完整日歷添加到您的頁面。 （讀這個。 ）
3. 完整日歷將調用您的 API 以獲取事件數據。 （有關返回 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);
}