dhtmlxScheduler с ASP.NET Core
Это руководство описывает процесс создания Scheduler с использованием ASP.NET Core на серверной стороне.
Вы также можете ознакомиться с руководствами для других серверных платформ:
- dhtmlxScheduler с ASP.NET MVC
- dhtmlxScheduler с Node.js
- dhtmlxScheduler с PHP
- dhtmlxScheduler с PHP: Slim
- dhtmlxScheduler с PHP:Laravel
- dhtmlxScheduler с SalesForce LWC
- dhtmlxScheduler с Ruby on Rails
- dhtmlxScheduler с dhtmlxConnector
Взаимодействие с базой данных осуществляется с помощью Entity Framework Core. Пример разработан с использованием Visual Studio 2022.
Полный исходный код доступен на GitHub.
Шаг 1. Создание проекта
Запустите Visual Studio 2022 и создайте новый проект, выбрав "Create a new project".

Затем выберите "ASP.NET Core Web App" и задайте имя проекта SchedulerApp



На этом этапе проект готов, и вы можете перейти к добавлению разметки и скриптов для Scheduler.
Шаг 2. Добавление Scheduler на страницу
Перейдите в папку wwwroot и создайте новый файл с именем index.html.

В этом файле создайте простую страницу для отображения scheduler.
Обратите внимание, что в этом примере файлы scheduler загружаются с CDN. Если у вас есть Professional-версия, необходимо добавить файлы scheduler в проект вручную.
<!DOCTYPE html>
<html>
<head>
<title>Getting started with dhtmlxScheduler</title>
<meta charSet="utf-8"/>
<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<link href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css"
rel="stylesheet" type="text/css" charSet="utf-8">
<style>
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="scheduler_here" className="dhx_cal_container">
<div className="dhx_cal_navline">
<div className="dhx_cal_prev_button"> </div>
<div className="dhx_cal_next_button"> </div>
<div className="dhx_cal_today_button"></div>
<div className="dhx_cal_date"></div>
<div className="dhx_cal_tab" name="day_tab"></div>
<div className="dhx_cal_tab" name="week_tab"></div>
<div className="dhx_cal_tab" name="month_tab"></div>
</div>
<div className="dhx_cal_header"></div>
<div className="dhx_cal_data"></div>
</div>
<script>
scheduler.init('scheduler_here', new Date(2019, 0, 20), "week");
</script>
</body>
</html>
Далее откройте Program.cs и настройте приложение для обслуживания страницы index.html, разрешив работу со статическими файлами из папки wwwroot.
Добавьте метод app.UseDefaultFiles().
Подробнее об этом можно узнать здесь.
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days.
// You may want to change this for production scenarios,
// see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseDefaultFiles(); /*!*/
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();
Промежуточное ПО app.UseDefaultFiles() позволяет приложению обслуживать стандартные файлы, ища их в папке wwwroot:
- index.html
- index.htm
- default.html
- default.htm
Вы можете использовать любой из этих файлов, но в этом руководстве используется "index.html".
Обратите внимание, что UseDefaultFiles() только переписывает URL на стандартный файл, поэтому также необходимо использовать UseStaticFiles() для фактической отдачи файла.
После этих изменений при запуске приложения на странице отобразится пустой scheduler.

Дальнейшие шаги покажут, как создать backend API и подключить к нему scheduler.
Шаг 3. Создание моделей и базы данных
Начнем с модели данных. Для событий scheduler требуется класс-представление. Поскольку dhtmlxScheduler использует нестандартные имена свойств по сравнению с типичными соглашениями .NET, будет применен паттерн Data Transfer Object (DTO). Это подразумевает определение:
- доменных моделей для EF Core и внутреннего использования в приложении
- DTO-классов для обмена данными с Web API.
Также будет реализовано сопоставление между этими моделями.
Модели
Добавьте в проект новую папку Models. Здесь будут храниться классы моделей и EF-контекст.