{"id":2060,"date":"2013-11-15T21:01:25","date_gmt":"2013-11-15T18:01:25","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2060"},"modified":"2026-03-23T15:54:27","modified_gmt":"2026-03-23T12:54:27","slug":"creating-event-calendar-with-dhtmlxscheduler-and-angularjs","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/creating-event-calendar-with-dhtmlxscheduler-and-angularjs\/","title":{"rendered":"Creating Event Calendar with dhtmlxScheduler and AngularJS"},"content":{"rendered":"

AngularJS<\/a> is a modern JavaScript framework that allows creating rich client-side apps in a fast and productive way. It goes without saying that AngularJS is convenient and powerful in working with HTML. However, it doesn’t have ready to use complex UI components yet. In this article we’ll try to partially eliminate this drawback by showing how to add support of DHTMLX Scheduler<\/a> for an AngularJS app.<\/p>\n

Download dhtmlxScheduler to add a powerful scheduling calendar to your app<\/a><\/strong>
\n\"Angular
\nYou can check the online demo<\/a> of a ready app or just grab the sources of the app from GitHub<\/a>.<\/p>\n

Adding dhxScheduler Directive<\/h3>\n

In order to build a custom HTML component in AngularJS we need to create a new directive. So let’s start integrating the Scheduler from writing a directive for it. For this purpose we need to create a .js file with the following content:<\/p>\n

app.directive<\/span>(<\/span>'dhxScheduler'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\nreturn<\/span> {<\/span>
\nrestrict:<\/span> 'A'<\/span>,<\/span>
\nscope:<\/span> false<\/span>,<\/span>
\ntransclude:<\/span> true<\/span>,<\/span>
\ntemplate:<\/span>'
\n<div class="dhx_cal_navline"><\/div>
\n<div class="dhx_cal_header"><\/div>
\n<div class="dhx_cal_data"><\/div>
\n'<\/span>,<\/span>
\nlink:<\/span>function<\/span> (<\/span>$scope,<\/span> $element,<\/span> $attrs,<\/span> $controller)<\/span>{<\/span>
\n\/\/adjust size of a scheduler<\/span>
\n$scope.$watch(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>
\nreturn<\/span> $element[<\/span>0<\/span>]<\/span>.offsetWidth<\/span> +<\/span> "."<\/span> +<\/span> $element[<\/span>0<\/span>]<\/span>.offsetHeight<\/span>;<\/span>
\n}<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\nscheduler.setCurrentView<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/styling for dhtmlx scheduler<\/span>
\n$element.addClass<\/span>(<\/span>"dhx_cal_container"<\/span>)<\/span>;<\/span>
\n\/\/init scheduler<\/span>
\nscheduler.init<\/span>(<\/span>$element[<\/span>0<\/span>]<\/span>,<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> "month"<\/span>)<\/span>;<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

The above code may look a bit complicated, but the things the code produces are rather simple:<\/p>\n