在ASP.NET Core (.NET 6)中构建可视化医生预约调度系统

我们需要使用DayPilot.Navigator类初始化日期选择器：

const nav = new DayPilot.Navigator("nav", {
    selectMode: "Week",
    showMonths: 3,
    skipMonths: 3,
    onTimeRangeSelected: (args) => {
        app.loadEvents(args.day);
    }
});
nav.init();

该app.loadEvents()方法很重要，因为它从服务器加载预约空档。它检查当前视图类型（使用nav.selectMode）并加载数据。

const app = {
    async loadEvents(date) {
        const start = nav.visibleStart();
        const end = nav.visibleEnd();

        const {data} = await DayPilot.Http.get(`/api/appointments?start=${start}&end=${end}`);

        const options = {
            visible: true,
            events: data
        };

        if (date) {
            options.startDate = date;
        }

        day.hide();
        week.hide();
        month.hide();

        const active = app.active();
        active.update(options);

        nav.update({
            events: data
        });
    },
    // ...
};

请注意，它会加载日期选择器中可见的整个日期范围（三个月）的预约数据。这样，日期选择器可以突出显示有预约的日期。此数据可用于当前可见的日历组件（日历日期范围始终是日期选择器中可见的整个范围的子集）。

服务器端部分是从Entity Framework模型类生成的标准ASP.NET Core API控制器。在某些情况下，当我们需要执行特定操作（除了基本的create、update、delete、select操作）或需要额外参数时，控制器方法会被扩展。

这是GetAppointments()方法（GET /api/appointments端点）的样子：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Project.Models;
using Project.Service;

namespace Project.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AppointmentsController : ControllerBase
    {
        private readonly DoctorDbContext _context;

        public AppointmentsController(DoctorDbContext context)
        {
            _context = context;
        }

        // GET: api/Appointments
        [HttpGet]
        public async Task 
               GetAppointments([FromQuery] DateTime start, [FromQuery] DateTime end)
        {
            return await _context.Appointments.Where(e => !((e.End = end))).ToListAsync();
        }
        
        // ...        
    }
}

在医生UI中的每个日历视图中，您可以使用“生成”按钮来填充当前范围的预约空档：

该按钮将打开一个模式对话框，您可以在其中检查是否还想为周末生成预约空档：

在月视图中，您还可以使用拖放选择任意范围：

选择日期范围将生成指定日期的时段：

它将跳过与现有预约空档冲突的时间。

插槽生成逻辑在服务器端实现。该AppointmentController类的PostAppointmentSlots()方法使用Timeline类助手来生成插槽日期。Timeline类的细节这里就不赘述了，大家可以查看项目源码中的实现。

该PostAppointmentSlots()方法还选择日期范围的现有槽，并在SQL Server数据库中创建新槽记录之前检查重叠。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Project.Models;
using Project.Service;

namespace Project.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AppointmentsController : ControllerBase
    {
        private readonly DoctorDbContext _context;

        public AppointmentsController(DoctorDbContext context)
        {
            _context = context;
        }

        [HttpPost("create")]
        public async Task 
                     PostAppointmentSlots(AppointmentSlotRange range)
        {
            var existing = await _context.Appointments.Where(e => !((e.End = range.End))).ToListAsync();
            var slots = Timeline.GenerateSlots(range.Start, range.End, range.Weekends);
            slots.ForEach(slot =>
            {
                var overlaps = existing.Any(e => !((e.End = slot.End)));
                if (overlaps)
                {
                    return;
                }
                _context.Appointments.Add(slot);
            });

            await _context.SaveChangesAsync();

            return NoContent();
        }

        public class AppointmentSlotRange
        {
            public DateTime Start { get; set; }
            public DateTime End { get; set; }
            public bool Weekends { get; set; }
        }

        // ...
    }
}

每个预约空档可以标记为“可用”、“等待”或“已确认”：

可用：

等待确认中：

已确认：

插槽状态存储在AppointmentSlot类的Status属性中。API控制器将其作为预约数据对象的状态字段发送到客户端。

using Microsoft.EntityFrameworkCore;
using System.Text.Json.Serialization;

namespace Project.Models
{
    public class AppointmentSlot
    {
        public int Id { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }

        public string? PatientName {  set; get; }

        public string? Text => PatientName;

        [JsonPropertyName("patient")]
        public string? PatientId { set; get; }

        public string Status { get; set; } = "free";
    }
}

DayPilot JavaScript 日历组件提供了一个onBeforeEventRender事件处理程序，可让您在呈现之前自定义预约外观。我们将使用它来根据插槽状态应用自定义颜色：

const week = new DayPilot.Calendar("week", {
    viewType: "Week",
    onBeforeEventRender: (args) => {
        switch (args.data.status) {
        case "free":
            args.data.backColor = app.colors.blue;
            args.data.barColor = app.colors.blueDarker;
            args.data.borderColor = "darker";
            args.data.fontColor = app.colors.text;
            args.data.text = "Available";
            break;
        case "waiting":
            args.data.backColor = app.colors.orange;
            args.data.barColor = app.colors.orangeDarker;
            args.data.borderColor = "darker";
            args.data.fontColor = app.colors.text;
            args.data.text = args.data.patientName;
            break;
        case "confirmed":
            args.data.backColor = app.colors.green;
            args.data.barColor = app.colors.greenDarker;
            args.data.borderColor = "darker";
            args.data.fontColor = app.colors.text;
            args.data.text = args.data.patientName;
            break;
        }
    },
    // ...
});

一切都包括在内：

• 服务器端依赖项（实体框架）由NuGet管理。Visual Studio通常会在第一次构建期间自动为你加载NuGet依赖项。
• 客户端依赖项(DayPilot)位于wwwroot/lib文件夹中。
• 该数据库需要安装SQL Server Express LocalDB实例。如果需要，您可以修改appsettings.json文件中的数据库连接字符串。包含初始实体框架迁移（请参阅迁移文件夹），但您需要在控制台中运行Update-Database以应用它们。

https://www.codeproject.com/Articles/5322192/Build-a-Visual-Doctor-Appointment-Scheduling-Syste