dhtmlxScheduler와 ASP.NET Core
이 가이드는 서버 측에서 ASP.NET Core를 사용하여 Scheduler를 만드는 과정을 안내합니다.
다른 서버 사이드 플랫폼에 대한 튜토리얼도 확인하실 수 있습니다:
- "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를 열고 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가 표시됩니다.

다음 단계에서는 백엔드 API를 만들고 Scheduler를 연결하는 방법을 안내합니다.
3단계. 모델 및 데이터베이스 생성
데이터 모델부터 시작합니다. Scheduler 이벤트는 클래스로 표현해야 합니다. dhtmlxScheduler는 일반적인 .NET 명명 규칙과는 다른 속성명