如何在ASP.NET Core C#中修改Syncfusion Scheduler节假日标记颜色？

1. 定义节假日数据模型 #

先创建C#模型类存储节假日信息：

public class Holiday
{
    public DateTime Date { get; set; }
    public string Name { get; set; }
}

2. 准备节假日数据并传递到视图 #

在Controller中构造自定义节假日列表，传给前端视图：

public IActionResult Index()
{
    // 自定义节假日集合
    var holidays = new List<Holiday>
    {
        new Holiday { Date = new DateTime(2024, 1, 1), Name = "元旦" },
        new Holiday { Date = new DateTime(2024, 2, 10), Name = "春节" },
        // 按需添加更多节假日
    };
    // 将日期转为字符串格式传递，方便前端判断
    ViewBag.HolidayDates = holidays.Select(h => h.Date.ToString("yyyy-MM-dd")).ToList();
    return View();
}

3. 配置Scheduler日期单元格模板实现红色标记 #

在Razor视图中，通过DateCellTemplate自定义日期单元格，判断当前日期是否为节假日并添加红色标记：

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="650" selectedDate="new DateTime(2024, 1, 1)">
    <e-schedule-eventsettings dataSource="@ViewBag.Events"></e-schedule-eventsettings>
    <!-- 自定义日期单元格模板 -->
    <e-schedule-datecelltemplate template="#dateCellTemplate"></e-schedule-datecelltemplate>
</ejs-schedule>

<!-- 日期单元格模板脚本 -->
<script id="dateCellTemplate" type="text/x-template">
    <div class="date-wrap">
        <span class="date-num">${date.getDate()}</span>
        ${(function() {
            const holidayList = @Html.Raw(Json.Serialize(ViewBag.HolidayDates));
            const currentDateStr = date.toISOString().split('T')[0];
            return holidayList.includes(currentDateStr) ? '<span class="holiday-dot"></span>' : '';
        })()}
    </div>
</script>

<!-- 标记样式 -->
<style>
    .holiday-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: red;
        margin-left: 4px;
        vertical-align: middle;
    }
    .date-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .date-num {
        font-size: 14px;
    }
</style>

4. 可选：月视图头部标记节假日 #

如果需要在月视图的星期头部也标记节假日，可配置DayHeaderTemplate：

<script id="dayHeaderTemplate" type="text/x-template">
    <div class="day-header">
        ${date.toLocaleDateString('zh-CN', { weekday: 'short' })}
        ${(function() {
            const holidayList = @Html.Raw(Json.Serialize(ViewBag.HolidayDates));
            const currentDateStr = date.toISOString().split('T')[0];
            return holidayList.includes(currentDateStr) ? '<span class="header-holiday-dot"></span>' : '';
        })()}
    </div>
</script>

<style>
    .header-holiday-dot {
        width: 6px;
        height: 6px;
        background-color: red;
        border-radius: 50%;
        display: block;
        margin: 2px auto 0;
    }
    .day-header {
        text-align: center;
    }
</style>

内容的提问来源于stack exchange，提问作者nyny