{"id":4284,"date":"2017-09-26T16:00:06","date_gmt":"2017-09-26T12:00:06","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4284"},"modified":"2026-09-24T18:24:04","modified_gmt":"2026-09-24T15:24:04","slug":"angular-dhtmlxscheduler-tutorial","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/angular-dhtmlxscheduler-tutorial\/","title":{"rendered":"DHTMLX Scheduler Usage with Angular Framework"},"content":{"rendered":"<p>The JavaScript ecosystem is regularly enriched with promising frameworks, but many web developers still prefer to use some time-proven options such as Angular. That\u2019s why our plan for today is to give you a good starting point for using DHTMLX Scheduler with the Angular framework.<\/p>\n<p>Now we\u2019re going to implement an Angular Scheduler component using <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" target=\"_blank\" rel=\"noopener\">DHTMLX Scheduler<\/a>, add it into the small application and bind it to the RESTful API on a backend. We\u2019ll build this demo in TypeScript since it\u2019s a recommended way, although it also can be done in plain JavaScript or in ES6.<\/p>\n<p>Please mind that in this tutorial we won\u2019t cover server-side logic of data saving. Instead, we\u2019ll emulate the backend using the <a href=\"https:\/\/github.com\/angular\/in-memory-web-api\" target=\"_blank\" rel=\"noopener\">Angular in-memory-web-api<\/a> tool.<\/p>\n<p>We also prepared a new video tutorial that visualizes the whole process of building a basic Angular Scheduler app using DHTMLX Scheduler.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/5nGjIvvN_88\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>You can download a <a href=\"https:\/\/github.com\/DHTMLX\/angular-scheduler-demo\" target=\"_blank\" rel=\"noopener\">complete Angular Scheduler demo<\/a> from GitHub.<\/p>\n<h2>Preparing App<\/h2>\n<p>To set up a development environment, you&#8217;ll need angular cli. If you don\u2019t have angular cli you can get it with a package manager (npm install -g @angular\/cli) or check <a href=\"https:\/\/v17.angular.io\/start\" target=\"_blank\" rel=\"noopener\">its documentation<\/a> for more details. To create an app skeleton, run the following command:<\/p>\n<div class=\"codecolorer-container text default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">ng new scheduler-angular<\/div><\/div>\n<p>You\u2019ll be asked to pick a preset (add Angular routing or not, stylesheet type). Select the necessary options to configure the system to your needs.<\/p>\n<p>After the operation finishes, we can go to the app directory and run the application:<\/p>\n<div class=\"codecolorer-container text default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">cd scheduler-angular<br \/>\nng serve<\/div><\/div>\n<p>Now, if we open http:\/\/127.0.0.1:4200 we should see the initial page. The ng serve command will watch the source file and, if necessary, will change and rebuild the app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image1-1.png\" alt=\"Integrating Scheduler with Angular\" width=\"766\" height=\"408\" class=\"alignleft size-full wp-image-15726\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image1-1.png 766w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image1-1-300x160.png 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/p>\n<h2>Creating Scheduler Component<\/h2>\n<p>To be able to embed Scheduler into the app, you should get DHTMLX Scheduler code. A free version of it can be added  from the private registry:<\/p>\n<div class=\"codecolorer-container text default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">npm config set @dhx:registry=https:\/\/npm.dhtmlx.com <br \/>\nnpm install @dhx\/trial-scheduler<\/div><\/div>\n<p>To add DHTMLX Scheduler to the Angular app, you should create a new component. For this, run the following command:<\/p>\n<div class=\"codecolorer-container text default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">ng generate component scheduler --skip-tests<\/div><\/div>\n<p>The newly created &#8220;scheduler.component.html&#8221; file inside the \u201cscheduler\u201d folder, will contain the container of the scheduler. Let\u2019s add the next lines of code:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\"><span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;scheduler_here&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_container&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'width:100%; height:100%;'<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><\/div><\/div>\n<p>You declare scheduler styles in a separate file named \u201cscheduler.component.css\u201d. Default styles can look like the following:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">@import <span class=\"st0\">&quot;@dhx\/trial-scheduler\/codebase\/dhtmlxscheduler.css&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"sy0\">:<\/span>host <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">display<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">block<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">position<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">relative<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">height<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">100%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">width<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">100%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>To make the scheduler container occupy the entire space of the body, you need to add the following styles to the &#8220;<strong>styles.css<\/strong>&#8221; file located in the &#8220;<strong>src<\/strong>&#8221; folder:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">html<span class=\"sy0\">,<\/span><br \/>\nbody <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">height<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">100%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">width<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">100%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">margin<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>To proceed, we need to import the required modules and add the necessary code lines to the &#8220;<strong>scheduler.component.ts<\/strong>&#8221; file:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Scheduler<span class=\"sy0\">,<\/span> SchedulerStatic <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;@dhx\/trial-scheduler&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Component<span class=\"sy0\">,<\/span> ElementRef<span class=\"sy0\">,<\/span> OnInit<span class=\"sy0\">,<\/span> OnDestroy<span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; ViewChild<span class=\"sy0\">,<\/span> ViewEncapsulation <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;@angular\/core&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">@<\/span>Component<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; encapsulation<span class=\"sy0\">:<\/span> ViewEncapsulation.<span class=\"me1\">None<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; selector<span class=\"sy0\">:<\/span> <span class=\"st0\">'app-scheduler'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; standalone<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; styleUrl<span class=\"sy0\">:<\/span> <span class=\"st0\">'.\/scheduler.component.css'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; templateUrl<span class=\"sy0\">:<\/span> <span class=\"st0\">'.\/scheduler.component.html'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> SchedulerComponent <span class=\"kw5\">implements<\/span> OnInit<span class=\"sy0\">,<\/span> OnDestroy <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"sy0\">@<\/span>ViewChild<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;scheduler_here&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"kw1\">static<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> schedulerContainer<span class=\"sy0\">!:<\/span> ElementRef<span class=\"sy0\">;<\/span><br \/>\n&nbsp; private scheduler<span class=\"sy0\">?:<\/span> SchedulerStatic<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; ngOnInit<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; let scheduler <span class=\"sy0\">=<\/span> Scheduler.<span class=\"me1\">getSchedulerInstance<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">schedulerContainer<\/span>.<span class=\"me1\">nativeElement<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2027<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">9<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">7<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;week&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">scheduler<\/span> <span class=\"sy0\">=<\/span> scheduler<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; ngOnDestroy<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">?<\/span>.<span class=\"me1\">destructor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>The <strong>&#8220;ViewEncapsulation&#8221;<\/strong> is needed to correctly apply the styles for the scheduler. By default, Angular encapsulates styles of components by adding unique attributes to their CSS and HTML. As the Scheduler HTML template is created dynamically, using the default technique is impossible. The alternatives are to enable the native Shadow DOM view encapsulation or to disable it at all. Since the <a href=\"https:\/\/blog.thoughtram.io\/angular\/2015\/06\/29\/shadow-dom-strategies-in-angular2.html\" target=\"_blank\" rel=\"noopener\">Shadow DOM isn\u2019t supported everywhere<\/a>, we\u2019ll choose to disable encapsulation.<\/p>\n<p>We utilize the <a href=\"https:\/\/v17.angular.io\/guide\/lifecycle-hooks\" target=\"_blank\" rel=\"noopener\">OnInit interface<\/a> to <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/api__scheduler_init.html\" target=\"_blank\" rel=\"noopener\">initialize DHTMLX Scheduler<\/a> when Angular places the component on the page.<\/p>\n<p>Now that the Scheduler module is created and recognized by Angular, you can add the new component to the page. Open &#8220;<strong>app.html<\/strong>&#8221; (located in src\/app) and insert the scheduler tag in there:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\"><span class=\"sc2\">&lt;app-scheduler&gt;&lt;<span class=\"sy0\">\/<\/span>app-scheduler&gt;<\/span><\/div><\/div>\n<p>Now, if you open the page again, you will see an empty Scheduler on it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image6.png\" alt=\"Integration with Angular\" width=\"1905\" height=\"908\" class=\"alignleft size-full wp-image-15728\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image6.png 1905w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image6-300x143.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image6-768x366.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image6-1024x488.png 1024w\" sizes=\"auto, (max-width: 1905px) 100vw, 1905px\" \/><\/p>\n<h2>Providing Data<\/h2>\n<p>At this stage, an empty Scheduler is good to look at, but I bet you want more than that. Scheduler needs data. To add data loading to the Angular Scheduler, you need to add an event service. But before that, let&#8217;s define the <b>event<\/b> model.<\/p>\n<p>For creating the <strong>event<\/strong> model, run the following command:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">ng generate <span class=\"kw5\">class<\/span> models<span class=\"sy0\">\/<\/span>event <span class=\"sy0\">--<\/span>skip<span class=\"sy0\">-<\/span>tests<\/div><\/div>\n<p>In the newly created &#8220;<strong>event.ts<\/strong>&#8221; file inside the &#8220;<strong>models<\/strong>&#8221; folder, we will add the next lines of code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> Event <span class=\"br0\">&#123;<\/span><br \/>\nid<span class=\"sy0\">!:<\/span> number<span class=\"sy0\">;<\/span><br \/>\nstart_date<span class=\"sy0\">!:<\/span> string<span class=\"sy0\">;<\/span><br \/>\nend_date<span class=\"sy0\">!:<\/span> string<span class=\"sy0\">;<\/span><br \/>\ntext<span class=\"sy0\">!:<\/span> string<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Now, let&#8217;s <a href=\"https:\/\/v17.angular.io\/tutorial\/tour-of-heroes\/toh-pt4\" target=\"_blank\" rel=\"noreferrer noopener\">create an event service<\/a>. A service is a class that will be responsible for creating a specific event. Services in Angular can be injected by using the <em>Dependency Injection<\/em> mechanism. They can include data, functions or some features necessary for the application. You need to create a data service that will be used to provide the scheduler with events.<\/p>\n<p>For creating event service, run the following command:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">ng generate service services<span class=\"sy0\">\/<\/span>event <span class=\"sy0\">--<\/span>flat <span class=\"sy0\">--<\/span>skip<span class=\"sy0\">-<\/span>tests<\/div><\/div>\n<p>In the newly created &#8220;<strong>event.service.ts<\/strong>&#8221; file inside the &#8220;<strong>services<\/strong>&#8221; folder, it is required to add the next lines of code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Injectable <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/core'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Event <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;..\/models\/event&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">@<\/span>Injectable<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> EventService <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>Event<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> Promise.<span class=\"me1\">resolve<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> start_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-06 09:00'<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-06 13:00'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">'Event 1'<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> start_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-08 10:00'<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-08 14:00'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">'Event 2'<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>We\u2019ve added the <strong>@Injectable()<\/strong> decorator to our service. It marks a class as available to an injector for instantiation. We\u2019ll inject it into our component further.<\/p>\n<p>Currently, the <b>get<\/b> method returns a resolved promise with hard-coded data. However, you can load data from the server side and also return a promise. The issue will be discussed a little further below.<\/p>\n<p>The scheduler component is supposed to use <b>EventService<\/b> to get events. To enable this, let\u2019s add <b>EventService<\/b> to the component. First, import the necessary module for the service in <em>scheduler.component.ts<\/em>:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span>EventService<span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;..\/services\/event.service&quot;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You should also specify <b>EventService<\/b> as a <em>provider<\/em> in the <b>@Component<\/b> decorator:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">providers<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span>EventService<span class=\"br0\">&#93;<\/span><\/div><\/div>\n<p>Now every time a new <em>SchedulerComponent<\/em> is initialized, a fresh instance of the service will be created.<\/p>\n<p>The service should be prepared to be injected into the component. For this purpose, add the following constructor to the <b>SchedulerComponent<\/b> class:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">constructor<span class=\"br0\">&#40;<\/span>private eventService<span class=\"sy0\">:<\/span> EventService<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Modify the <b>ngOnInit<\/b> function:<\/p>\n<ul>\n<li>it should set the data format for loading events (XML in this case),<\/li>\n<li>call the services to get the function and then wait for a response to put the data to the scheduler.<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">scheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">date_format<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;%Y-%m-%d %H:%i&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">schedulerContainer<\/span>.<span class=\"me1\">nativeElement<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2027<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">9<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">7<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; .<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scheduler.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><b>scheduler.parse<\/b> accepts a <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/data_formats.html#json\" target=\"_blank\" rel=\"noreferrer noopener\">data object in JSON format<\/a>.<\/p>\n<p>You can check the complete code for the <b>scheduler.components.ts<\/b> file.<\/p>\n<p>Now, if you reopen the app page, you should see a scheduler with events.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image2-1.png\" alt=\"Integration with Angular - providing data\" width=\"1907\" height=\"905\" class=\"alignleft size-full wp-image-15729\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image2-1.png 1907w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image2-1-300x142.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image2-1-768x364.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2017\/09\/image2-1-1024x486.png 1024w\" sizes=\"auto, (max-width: 1907px) 100vw, 1907px\" \/><\/p>\n<h2>Saving Data<\/h2>\n<p>Creating an actual database and writing a backend is beyond the issues in this tutorial. Instead, the Scheduler component will send all user-made changes to a service, and that service will emulate the communication with the backend. It is done with the help of the <a href=\"https:\/\/github.com\/angular\/in-memory-web-api\" target=\"_blank\" rel=\"noopener\">angular-in-memory-web-api<\/a> library. If you&#8217;re building an app intended for real use, you can skip the step where we configure angular-in-memory-web-api and proceed to &#8220;Step 3. Services for CRUD operations&#8221;.<\/p>\n<h3>1. Install angular-in-memory-web-api<\/h3>\n<p>First, you should install <b>angular-in-memory-web-api<\/b>. Run the following command:<\/p>\n<div class=\"codecolorer-container text default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">npm install angular-in-memory-web-api --save --force<\/div><\/div>\n<p>To define the mock database initialization, open <em>app.config.ts<\/em> and add <b>InMemoryWebApiModule<\/b>. The necessary class will be defined in the next step. For now, make the following changes to <em>app.config.ts<\/em>:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> ApplicationConfig<span class=\"sy0\">,<\/span> importProvidersFrom<span class=\"sy0\">,<\/span> provideZoneChangeDetection <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/core'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> provideHttpClient<span class=\"sy0\">,<\/span> withInterceptorsFromDi <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/common\/http'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> InMemoryWebApiModule <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'angular-in-memory-web-api'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> InMemoryDataService <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'.\/services\/in-memory-data.service'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">const<\/span> appConfig<span class=\"sy0\">:<\/span> ApplicationConfig <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; providers<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; provideZoneChangeDetection<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> eventCoalescing<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; provideHttpClient<span class=\"br0\">&#40;<\/span>withInterceptorsFromDi<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; importProvidersFrom<span class=\"br0\">&#40;<\/span>InMemoryWebApiModule.<span class=\"me1\">forRoot<\/span><span class=\"br0\">&#40;<\/span>InMemoryDataService<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>For creating the <strong>in-memory-data<\/strong> service, run the following command:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">ng generate service services\/in-memory-data --flat --skip-tests<\/div><\/div>\n<p>In the newly created &#8220;<strong>in-memory-data.service.ts<\/strong>&#8221; file inside the &#8220;<strong>services<\/strong>&#8221; folder, we will add the next lines of code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> InMemoryDbService <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'angular-in-memory-web-api'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Event <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'..\/models\/event'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> InMemoryDataService <span class=\"kw5\">implements<\/span> InMemoryDbService <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; createDb<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span> events<span class=\"sy0\">:<\/span> Event<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"br0\">&#125;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> events<span class=\"sy0\">:<\/span> Event<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> start_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-06 06:00'<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-06 13:00'<\/span><span class=\"sy0\">,<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">'Event 1'<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> start_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-08 07:00'<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">'2027-10-08 12:00'<\/span><span class=\"sy0\">,<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">'Event 2'<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"br0\">&#123;<\/span> events <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<h3>2. Services for CRUD Operations<\/h3>\n<p>The services should handle adding, updating, and deleting items in the scheduler. Open event.service.ts and replace the initial code with the following:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Injectable <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/core'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Event <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;..\/models\/event&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span>HttpClient<span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;@angular\/common\/http&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span>HandleError<span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;.\/service-helper&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> firstValueFrom <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'rxjs'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Next, add a constructor to the <b>EventService<\/b> class:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">@<\/span>Injectable<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> EventService <span class=\"br0\">&#123;<\/span><br \/>\nprivate eventUrl <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;api\/events&quot;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>constructor(private http: HttpClient) {}<\/p>\n<p>\/\/get and other methods here<br \/>\n}<\/p>\n<p>Update the <b>get<\/b> method so that it got the data from the server:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;<\/span>Event<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">&amp;<\/span>gt<span class=\"sy0\">;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">return<\/span> firstValueFrom<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">http<\/span>.<span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">eventUrl<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n.<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span>HandleError<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><b>eventUrl<\/b> is a private element of the service. It contains the URL to the REST API. In order to send HTTP requests, an HTTP class has been injected into the service.<\/p>\n<p>Finally, add the <b>insert<\/b>, <b>update<\/b> and <b>remove<\/b> methods for operations with events in the scheduler. To insert a new item, you need to send a <b>POST<\/b> request to the URL with the new event in its body:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> HttpClient <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/common\/http'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Injectable <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/core'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> firstValueFrom <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'rxjs'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> SchedulerEvent <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'..\/models\/scheduler-event'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">@<\/span>Injectable<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; providedIn<span class=\"sy0\">:<\/span> <span class=\"st0\">'root'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> EventService <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; private readonly eventUrl <span class=\"sy0\">=<\/span> <span class=\"st0\">'api\/events'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; constructor<span class=\"br0\">&#40;<\/span>private readonly http<span class=\"sy0\">:<\/span> HttpClient<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>SchedulerEvent<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> firstValueFrom<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">http<\/span>.<span class=\"me1\">get<\/span><span class=\"sy0\">&lt;<\/span>SchedulerEvent<span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">&gt;<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">eventUrl<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; .<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">handleError<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; insert<span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>SchedulerEvent<span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> firstValueFrom<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">http<\/span>.<span class=\"me1\">post<\/span><span class=\"sy0\">&lt;<\/span>SchedulerEvent<span class=\"sy0\">&gt;<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">eventUrl<\/span><span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; .<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">handleError<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; update<span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>void<span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> firstValueFrom<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">http<\/span>.<span class=\"me1\">put<\/span><span class=\"sy0\">&lt;<\/span>void<span class=\"sy0\">&gt;<\/span><span class=\"br0\">&#40;<\/span>`$<span class=\"br0\">&#123;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">eventUrl<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">\/<\/span>$<span class=\"br0\">&#123;<\/span>event.<span class=\"me1\">id<\/span><span class=\"br0\">&#125;<\/span>`<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; .<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">handleError<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; remove<span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">:<\/span> number<span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>void<span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> firstValueFrom<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">http<\/span>.<span class=\"me1\">delete<\/span><span class=\"sy0\">&lt;<\/span>void<span class=\"sy0\">&gt;<\/span><span class=\"br0\">&#40;<\/span>`$<span class=\"br0\">&#123;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">eventUrl<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">\/<\/span>$<span class=\"br0\">&#123;<\/span>id<span class=\"br0\">&#125;<\/span>`<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; .<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">handleError<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; private handleError<span class=\"br0\">&#40;<\/span>error<span class=\"sy0\">:<\/span> unknown<span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> Promise<span class=\"sy0\">&lt;<\/span>never<span class=\"sy0\">&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; console.<span class=\"me1\">error<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> Promise.<span class=\"me1\">reject<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Feel free to check out the <a href=\"https:\/\/github.com\/DHTMLX\/angular-scheduler-demo\/blob\/master\/src\/app\/services\/event.service.ts\" target=\"_blank\" rel=\"noopener noreferrer\">complete code of <em>event.service.ts<\/em><\/a> on GitHub.<\/p>\n<p>In the &#8220;scheduler.component.ts&#8221; file, you need to add events editing logic. Since you import the scheduler object from the module to avoid unexpected behavior, you should create a data processor.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">scheduler.<span class=\"me1\">createDataProcessor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; event<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; create<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">insert<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; update<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">update<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">delete<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">:<\/span> number<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">remove<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>If using the Commercial\/Enterprise\/Ultimate licenses of DHTMLX Scheduler, you can create a new scheduler object (const scheduler = Scheduler.getSchedulerInstance()) and configure it when starting the component (<strong>ngOnInit<\/strong>), and destroy the created scheduler (<strong>scheduler.destructor()<\/strong>) when exiting the component (<strong>ngOnDestroy<\/strong>). This way, each launch of the component will start with a clean scheduler, and the check will not be needed.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; Component<span class=\"sy0\">,<\/span><br \/>\n&nbsp; ElementRef<span class=\"sy0\">,<\/span><br \/>\n&nbsp; OnDestroy<span class=\"sy0\">,<\/span><br \/>\n&nbsp; OnInit<span class=\"sy0\">,<\/span><br \/>\n&nbsp; ViewChild<span class=\"sy0\">,<\/span><br \/>\n&nbsp; ViewEncapsulation<span class=\"sy0\">,<\/span><br \/>\n&nbsp; inject<span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@angular\/core'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Scheduler<span class=\"sy0\">,<\/span> SchedulerStatic <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'@dhx\/trial-scheduler'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> SchedulerEvent <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'..\/..\/models\/scheduler-event'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> EventService <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'..\/..\/services\/event.service'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">@<\/span>Component<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; encapsulation<span class=\"sy0\">:<\/span> ViewEncapsulation.<span class=\"me1\">None<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; selector<span class=\"sy0\">:<\/span> <span class=\"st0\">'app-scheduler'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; standalone<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; styleUrl<span class=\"sy0\">:<\/span> <span class=\"st0\">'.\/scheduler.component.css'<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; templateUrl<span class=\"sy0\">:<\/span> <span class=\"st0\">'.\/scheduler.component.html'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw5\">class<\/span> SchedulerComponent <span class=\"kw5\">implements<\/span> OnInit<span class=\"sy0\">,<\/span> OnDestroy <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"sy0\">@<\/span>ViewChild<span class=\"br0\">&#40;<\/span><span class=\"st0\">'schedulerContainer'<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"kw1\">static<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; private readonly schedulerContainer<span class=\"sy0\">!:<\/span> ElementRef<span class=\"sy0\">&lt;<\/span>HTMLElement<span class=\"sy0\">&gt;;<\/span><br \/>\n<br \/>\n&nbsp; private readonly eventService <span class=\"sy0\">=<\/span> inject<span class=\"br0\">&#40;<\/span>EventService<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; private scheduler<span class=\"sy0\">?:<\/span> SchedulerStatic<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; ngOnInit<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> <span class=\"kw1\">void<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> scheduler <span class=\"sy0\">=<\/span> Scheduler.<span class=\"me1\">getSchedulerInstance<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">date_format<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'%Y-%m-%d %H:%i'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">schedulerContainer<\/span>.<span class=\"me1\">nativeElement<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2027<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">9<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">7<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">createDataProcessor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; event<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; create<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">insert<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; update<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">:<\/span> SchedulerEvent<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">update<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">delete<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">:<\/span> number<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"me1\">remove<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">eventService<\/span>.<span class=\"kw1\">get<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; .<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span>events<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> scheduler.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>events<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">scheduler<\/span> <span class=\"sy0\">=<\/span> scheduler<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; ngOnDestroy<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> <span class=\"kw1\">void<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">?<\/span>.<span class=\"me1\">destructor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Here you\u2019ve defined a <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/server_integration.html#:~:text=Creating%20DataProcessor\" target=\"_blank\" rel=\"noopener\">dataProcessor<\/a> handler that will capture changes made in scheduler by the user and will transfer them to data services.<\/p>\n<p>The handler can be declared either as a function or a router object, you\u2019ve used the latter approach here.<\/p>\n<p>Scheduler accepts a Promise response from the handler, so the scheduler will correctly process the completion of an action.<\/p>\n<p>If your service changes the event id after creating a new record (which it usually does), make sure that your Promise returns an object with {id: databaseId} or {tid: databaseId} as a result, so the Scheduler could apply the new database id to the record.<\/p>\n<p>Well, Angular Scheduler is ready. You are welcome to check out <a href=\"https:\/\/github.com\/DHTMLX\/angular-scheduler-demo\" target=\"_blank\" rel=\"noreferrer noopener\">the source code<\/a>. The app can use RESTful API for CRUD operations. Keep in mind that in this demo angular-in-memory-api library was used to emulate the data storage.<\/p>\n<p>However, in real-life apps, you&#8217;ll probably want to save changes to a real database. There are two solutions. First, you can remove <em>in-memory-web-api<\/em> from the app (in case you&#8217;ve skipped that step, you don\u2019t need to do this). Second, you can configure it to <a href=\"https:\/\/github.com\/angular\/in-memory-web-api#passthru\" target=\"_blank\" rel=\"noreferrer noopener\"><em>pass requests through to the real backend<\/em><\/a> and thus implement data storage. Feel free to send us feedback in the comments and stay tuned for new tutorials.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The JavaScript ecosystem is regularly enriched with promising frameworks, but many web developers still prefer to use some time-proven options such as Angular. That\u2019s why our plan for today &#8230;<\/p>\n","protected":false},"author":101011,"featured_media":4328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,59,14,15],"class_list":["post-4284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-angular","tag-tips","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101011"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=4284"}],"version-history":[{"count":32,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4284\/revisions"}],"predecessor-version":[{"id":15747,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4284\/revisions\/15747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/4328"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=4284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=4284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=4284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}