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 명명 규칙과는 다른 속성명을 사용하므로, Data Transfer Object(DTO) 패턴을 적용합니다. 즉:
- EF Core 및 내부 앱에서 사용할 도메인 모델 클래스
- Web API와 통신할 DTO 클래스
이 모델들 간의 매핑도 구현하게 됩니다.
모델
프로젝트에 Models라는 새 폴더를 추가하세요. 이 폴더에 모델 클래스와 EF 컨텍스트를 보관합니다.
이벤트 모델
캘린더 이벤트를 나타내는 클래스를 생성합니다. Models 폴더 내부에 SchedulerEvent.cs 파일을 추가하세요.
아래는 모델의 간단한 예시입니다:
namespace SchedulerApp.Models
{
public class SchedulerEvent
{
public int Id { get; set; }
public string? Name { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
}
Scheduler 이벤트에는 더 많은 속성이 포함될 수 있지만, 본 예제에서는 필수 항목만 다룹니다.
데이터베이스 컨텍스트
먼저, ASP.NET Core용 Entity Framework Core를 설치해야 합니다. NuGet 패키지 관리자를 통해 설치할 수 있습니다:

또는 패키지 관리자 콘솔에서 아래 명령어를 실행하세요:
PM> Install-Package Microsoft.EntityFrameworkCore.SqlServer
PM> Install-Package Microsoft.EntityFrameworkCore
PM> Install-Package Microsoft.EntityFrameworkCore.Design
Entity Framework Core는 앱과 데이터베이스 간의 데이터 통신을 담당합니다.
Entity 컨텍스트 생성
다음으로, 데이터베이스 세션을 정의하고 데이터의 로드 및 저장을 가능하게 하는 Context 클래스를 생성합니다:
- Models 폴더에 SchedulerContext.cs 파일 추가
- 데이터베이스 컨텍스트를 아래와 같이 정의
using Microsoft.EntityFrameworkCore;
namespace SchedulerApp.Models
{
public class SchedulerContext : DbContext
{
public SchedulerContext(DbContextOptions<SchedulerContext> options)
: base(options)
{
}
public DbSet<SchedulerEvent> Events { get; set; } = null!;
}
}
데이터베이스에 첫 레코드 추가
이제 데이터베이스에 초기 레코드를 추가할 차례입니다. 샘플 이벤트로 데이터베이스를 채워주는 이니셜라이저를 생성합니다.
Models 폴더에 SchedulerSeeder라는 클래스를 추가하세요. 이 클래스에는 이벤트를 데이터베이스에 삽입하는 Seed() 메서드가 포함됩니다.
using System;
using System.Collections.Generic;
using System.Linq;
namespace SchedulerApp.Models
{
public static class SchedulerSeeder
{
public static void Seed(SchedulerContext context)
{
if (context.Events.Any())
{
return; // DB has been seeded
}
var events = new List<SchedulerEvent>()
{
new SchedulerEvent
{
Name = "Event 1",
StartDate = new DateTime(2019, 1, 15, 2, 0, 0),
EndDate = new DateTime(2019, 1, 15, 4, 0, 0)
},
new SchedulerEvent()
{
Name = "Event 2",
StartDate = new DateTime(2019, 1, 17, 3, 0, 0),
EndDate = new DateTime(2019, 1, 17, 6, 0, 0)
},
new SchedulerEvent()
{
Name = "Multiday event",
StartDate = new DateTime(2019, 1, 15, 0, 0, 0),
EndDate = new DateTime(2019, 1, 20, 0, 0, 0)
}
};
events.ForEach(s => context.Events.Add(s));
context.SaveChanges();
}
}
}
데이터베이스 등록하기
다음 단계는 Program.cs 파일에서 데이터베이스를 등록하는 것입니다. 그 전에 연결 문자열이 필요합니다. 이 문자열은
애플리케이션 설정의 JSON 파일에 저장됩니다.
프로젝트를 API 템플릿으로 생성했다면 해당 파일이 이미 프로젝트 폴더에 존재합니다. Empty template을 사용했다면 이 파일을 새로 만들어야 합니다.
appsettings.json 파일을 생성하거나(이 미 있다면 열어서) 데이터베이스 연결 문자열을 추가하세요:
{
"ConnectionStrings": {
"DefaultConnection":"Server="(localdb)mssqllocaldb;"
Database=SchedulerDatabase;Trusted_Connection=True;" }
}
그 다음, 의존성 주입을 통해 데이터베이스 컨텍스트를 등록합니다.
Program.cs에 다음 네임스페이스를 추가합니다:
using Microsoft.EntityFrameworkCore;
using SchedulerApp.Models;
using Microsoft.Extensions.Configuration;
등록 코드는 다음과 같습니다:
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<SchedulerContext>(
options => options.UseSqlServer(connectionString));
컨트롤러를 활성화하려면 services.AddControllers() 메서드를 호출해야 합니다.
builder.Services.AddControllers();
아래는 Program.cs의 전체 내용입니다:
using Microsoft.EntityFrameworkCore;
using SchedulerApp.Models;
using Microsoft.Extensions.Configuration;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<SchedulerContext>(
options => options.UseSqlServer(connectionString));
builder.Services.AddControllers();
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.MapControllers();
app.Run();
마지막으로, 앱이 시작될 때 데이터베이스를 초기화하고 시드해야 합니다. 일반적으로 마이그레이션을 사용하지만 여기서는 단순화를 위해 생략합니다.
초기화를 처리할 클래스를 먼저 생성하세요. Models 폴더에 SchedulerInitializerExtension.cs 파일을 추가합니다:
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Hosting;
namespace SchedulerApp.Models
{
public static class SchedulerInitializerExtension
{
public static IHost InitializeDatabase(this IHost webHost)
{
var serviceScopeFactory =
(IServiceScopeFactory?)webHost.Services.GetService(typeof(IServiceScopeFactory));
using (var scope = serviceScopeFactory!.CreateScope())
{
var services = scope.ServiceProvider;
var dbContext = services.GetRequiredService<SchedulerContext>();
dbContext.Database.EnsureDeleted();
dbContext.Database.EnsureCreated();
SchedulerSeeder.Seed(dbContext);
}
return webHost;
}
}
}
그런 다음 **InitializeDatabase()**를 호출합니다:
app.InitializeDatabase();
이 부분이 완료되었습니다. 이제 Scheduler에 집중하세요.