dhtmlxScheduler와 ASP.NET MVC
이 가이드는 ASP.NET과 서버 측 REST API를 사용하여 Scheduler를 구축하는 과정을 단계별로 안내합니다.
Scheduler의 다른 서버 사이드 설정에 관심이 있다면 아래 튜토리얼도 참고하실 수 있습니다:
- "dhtmlxScheduler와 ASP.NET Core"
- "dhtmlxScheduler와 Node.js"
- "dhtmlxScheduler와 PHP"
- "dhtmlxScheduler와 PHP:Slim"
- "dhtmlxScheduler와 PHP:Laravel 연동하기"
- "dhtmlxScheduler와 SalesForce LWC 통합하기"
- "dhtmlxScheduler와 Ruby on Rails 연동하기"
- "dhtmlxScheduler와 dhtmlxConnector 연동하기"
여기서는 ASP.NET MVC 5와 REST API를 위한 Web API 컨트롤러를 함께 사용하여 Scheduler 앱을 구축합니다. 데이터베이스 연동은 Entity Framework를 활용하며, 개발 환경은 Visual Studio IDE를 사용합니다.
전체 소스 코드는 GitHub에서 확인할 수 있습니다.
1단계. 프로젝트 생성
Visual Studio 2022를 실행하고 새 프로젝트 만들기를 선택하세요.

"ASP.NET Web Application"을 선택하고 이름을 DHX.Scheduler.Web으로 지정합니다. 템플릿이 보이지 않는 경우 문제 해결 섹션을 참고하세요.


템플릿에서 Empty 프로젝트를 선택한 뒤, 오른쪽에서 MVC와 Web API 옵션을 체크하세요:

2단계. 페이지에 Scheduler 추가
컨트롤러 생성
빈 프로젝트가 준비되면, Scheduler 페이지를 표시할 MVC 컨트롤러를 추가해야 합니다.
Controllers 폴더에서 마우스 오른쪽 버튼을 클릭하고 Add -> Controller를 선택합니다. 대화 상자에서 MVC 5 Controller -> Empty를 선택하고 Add를 클릭하세요. 컨트롤러 이름은 "HomeController"로 지정합니다.

HomeController에는 기본적으로 ActionResult 클래스의 Index() 메서드가 포함되어 있으므로 추가적인 로직은 필요하지 않습니다. 이제 뷰만 추가하면 됩니다.
using System.Web.Mvc;
namespace DHX.Scheduler.Web.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
뷰(View) 생성
이제 index 페이지를 만들어야 합니다. Views/Home으로 이동하여 Index라는 이름의 빈 뷰를 추가하세요:

새로 생성된 뷰를 열고 아래 코드를 삽입합니다:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width="device-width"" />
<title>Index</title>
<link href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// initializing scheduler
scheduler.init("scheduler_here", new Date(2022,0,15));
// initiating data loading
scheduler.load("/api/scheduler");
// initializing dataProcessor
var dp = scheduler.createDataProcessor("/api/scheduler");
// and attaching it to scheduler
dp.init(scheduler);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});
</script>
</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>
</body>
</html>
이 코드는 다음을 수행합니다:
- Scheduler 앱을 위한 기본 페이지 레이아웃을 설정합니다.
- dhtmlx scheduler의 JS와 CSS를 CDN 링크에서 불러옵니다.
- 페이지에 scheduler를 생성합니다.
또한, "/api/scheduler/" 경로의 RESTful API 백엔드와 통신하도록 scheduler를 구성합니다:
scheduler.load("/api/scheduler");
// initializing dataProcessor
var dp = scheduler.createDataProcessor("/api/scheduler");
// and attaching it to scheduler
dp.init(scheduler);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
서버 측 구현은 이후에 진행합니다. 지금은 앱을 실행하면 Scheduler가 정상적으로 표시되는 것을 확인할 수 있습니다.

3단계. 모델 및 데이터베이스 생성
모델 생성
이제 scheduler를 위한 모델 클래스를 정의해야 합니다. Scheduler 이벤트를 나타내는 클래스를 만들어야 하며, dhtmlxScheduler는 데이터 모델에 대해 특정 네이밍 규칙을 사용합니다. 일부 클라이언트 측 속성은 데이터베이스에 저장되지 않고, 클라이언트 또는 백엔드 로직에서만 사용될 수 있습니다.
이를 위해 Data Transfer Object 패턴을 따릅니다. 즉, EF 및 내부 사용을 위한 도메인 모델 클래스와, Web API 통신을 위한 별도의 DTO 클래스를 정의합니다. 이후 이 모델들 간의 매핑을 설정합니다.
Scheduler 이벤트 모델
먼저 Event 클래스를 생성합니다. 기본 예시는 아래와 같습니다:
using System;
namespace DHX.Scheduler.Web.Models
{
public class SchedulerEvent
{
public int Id { get; set; }
public string Text { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
}
Scheduler 이벤트에는 캘린더 기능을 확장하는 다양한 속성이 있을 수 있지만, 예제에서는 필수 항목만 포함했습니다.