{"id":7099,"date":"2020-01-31T14:45:28","date_gmt":"2020-01-31T11:45:28","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7099"},"modified":"2026-06-24T18:31:44","modified_gmt":"2026-06-24T15:31:44","slug":"use-dhtmlx-scheduler-vue-js-framework-demo","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlx-scheduler-vue-js-framework-demo\/","title":{"rendered":"How to Use DHTMLX Scheduler with Vue.js Framework [Demo]"},"content":{"rendered":"<p>Great news for Vue.js lovers! Our dev team prepared a thorough guide on how to integrate our high-performing <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" target=\"_blank\" rel=\"noopener\">DHTMLX JS Scheduler<\/a> with the progressive JavaScript framework <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener\">Vue.js<\/a>.<\/p>\n<p>So, below is a step-by-step tutorial for creating a Vue Scheduler component with code snippets and illustrations. You can also kick-start the development process with a complete <a href=\"https:\/\/github.com\/DHTMLX\/vue-scheduler-demo\" target=\"_blank\" rel=\"noopener\">demo on GitHub<\/a>.<\/p>\n<p><strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" target=\"_blank\" rel=\"noopener\">New to DHTMLX Scheduler? Learn more about the library now &gt;<\/a><\/strong><\/p>\n<h2>1. How to Start<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/wUoxu8smflM\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\nFirstly, you need to create an app skeleton. For this purpose, use <strong>vue-cli<\/strong>. If you don&#8217;t have one, you can easily install it with the node package manager using command (<em>npm install -g @vue\/cli<\/em>). Check <a href=\"https:\/\/vuejs.org\/guide\/quick-start.html\" target=\"_blank\" rel=\"noopener\">this article &gt;<\/a><\/p>\n<p>In order to use yarn in a project, it must be installed globally in the system (<em>npm install -g yarn<\/em>).<\/p>\n<p>So, let&#8217;s run the next command to create an app:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">vue create scheduler<span class=\"sy0\">-<\/span>vue<\/div><\/div>\n<p>It will request you to provide project information. You can choose to leave the default answers and press Enter for each question or select functions manually.<\/p>\n<p>The next step is to go to the app directory, install dependencies and run your Vue.js app:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cd scheduler<span class=\"sy0\">-<\/span>vue<\/div><\/div>\n<p>For using yarn call:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">yarn<br \/>\nyarn dev<\/div><\/div>\n<p>For using npm call:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">npm install<br \/>\nnpm run dev<\/div><\/div>\n<p>Here we go &#8211; your app now runs on: http:\/\/localhost:5173<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image3.png\" alt=\"Integrating JS Scheduler with Vue\" width=\"692\" height=\"495\" class=\"alignleft size-full wp-image-15732\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image3.png 692w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image3-300x215.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/p>\n<h2>2. Moving to Scheduler Part<\/h2>\n<p>At this point, we need to get the code of DHTMLX Scheduler \u2013 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<\/div><\/div>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">yarn add <span class=\"sy0\">@<\/span>dhx<span class=\"sy0\">\/<\/span>trial<span class=\"sy0\">-<\/span>scheduler <span class=\"sy0\">--<\/span>save <span class=\"br0\">&#40;<\/span><span class=\"kw1\">for<\/span> yarn<span class=\"br0\">&#41;<\/span><br \/>\nnpm install <span class=\"sy0\">@<\/span>dhx<span class=\"sy0\">\/<\/span>trial<span class=\"sy0\">-<\/span>scheduler <span class=\"sy0\">--<\/span>save <span class=\"br0\">&#40;<\/span><span class=\"kw1\">for<\/span> npm<span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>As you need to add DHTMLX Scheduler to the Angular app, you have to create a component. Start from creating a folder for the app components &#8211; open the <em>src<\/em> folder and create the <em>components<\/em> folder in it. After that, create the <em>SchedulerComponent.vue<\/em> file in the components folder and add the next lines of code into it:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span>src<span class=\"sy0\">\/<\/span>components<span class=\"sy0\">\/<\/span>SchedulerComponent.<span class=\"me1\">vue<\/span><span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><\/div><\/div>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>script setup<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> onMounted<span class=\"sy0\">,<\/span> onUnmounted<span class=\"sy0\">,<\/span> ref <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;vue&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Scheduler <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;@dhx\/trial-scheduler&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> schedulerContainer <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">const<\/span> schedulerInstance <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\nonMounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&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; schedulerInstance.<span class=\"me1\">value<\/span> <span class=\"sy0\">=<\/span> scheduler<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; scheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">header<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;day&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;week&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;month&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;prev&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;today&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;next&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; scheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span>schedulerContainer.<span class=\"me1\">value<\/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\">5<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">10<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;week&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\nonUnmounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; schedulerInstance.<span class=\"me1\">value<\/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; schedulerInstance.<span class=\"me1\">value<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>schedulerContainer.<span class=\"me1\">value<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; schedulerContainer.<span class=\"me1\">value<\/span>.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>div ref<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;schedulerContainer&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">@<\/span><span class=\"kw5\">import<\/span> <span class=\"st0\">&quot;@dhx\/trial-scheduler\/codebase\/dhtmlxscheduler.css&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; .<span class=\"me1\">dhx_cal_container<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> 100vh<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Congrats! You&#8217;re done with the Scheduler component. When the element is added to the page, it will initialize the Scheduler under <strong>&#8220;schedulerComponent&#8221;<\/strong> ref. Afterward, the Scheduler will load data from the <strong>events<\/strong> property.<\/p>\n<p>Right now, you need to finally add the component to the Vue.js application. Open <em>App.vue<\/em> and replace the code you&#8217;ve already had there with the next lines:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span> src<span class=\"sy0\">\/<\/span>App.<span class=\"me1\">vue<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>script setup<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"kw5\">import<\/span> Scheduler from <span class=\"st0\">&quot;.\/Scheduler.vue&quot;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>Scheduler<span class=\"sy0\">\/&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>style<span class=\"sy0\">&gt;<\/span><br \/>\nbody<span class=\"sy0\">,<\/span> #app <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; margin<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; padding<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Once you are done, you will see DHTMLX Scheduler with predefined events on the page looking like that:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image1.png\" alt=\"Integrating the Scheduler component into Vue app\" width=\"1905\" height=\"908\" class=\"alignleft size-full wp-image-15733\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image1.png 1905w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image1-300x143.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image1-768x366.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image1-1024x488.png 1024w\" sizes=\"auto, (max-width: 1905px) 100vw, 1905px\" \/><\/p>\n<h2>3. Listening to changes and handling events<\/h2>\n<p>Suppose you need to track and process changes made by users in our Scheduler \u2013 for example, show details of selected events in a separate form, update the data model of the parent component or send these changes to the backend. Simply put, you need the app to be aware of what&#8217;s going on inside Scheduler.<\/p>\n<p>For that purpose, you can capture <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/api__refs__scheduler_events.html\" target=\"_blank\" rel=\"noopener\">API events<\/a> of DHTMLX Scheduler and <a href=\"https:\/\/vuejs.org\/guide\/essentials\/component-basics.html\" target=\"_blank\" rel=\"noopener\">$emit<\/a> them to the parent component.<\/p>\n<p>To make it clearer, let&#8217;s see how to create a simple changelog noting down all the changes made in Scheduler in a neat list on the right side of the page.<\/p>\n<p>At first, you should go into the Scheduler component and add the code that will trace and emit Scheduler changes, like follows:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>script setup<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> onMounted<span class=\"sy0\">,<\/span> onUnmounted<span class=\"sy0\">,<\/span> ref <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;vue&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> Scheduler <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;@dhx\/trial-scheduler&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> props <span class=\"sy0\">=<\/span> defineProps<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; events<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"kw4\">Array<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">default<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/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><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> emit <span class=\"sy0\">=<\/span> defineEmits<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;event-updated&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> schedulerContainer <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">const<\/span> schedulerInstance <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\nonMounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&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; schedulerInstance.<span class=\"me1\">value<\/span> <span class=\"sy0\">=<\/span> scheduler<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; scheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">header<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;day&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;week&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;month&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;prev&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;today&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;next&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; scheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span>schedulerContainer.<span class=\"me1\">value<\/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\">5<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">10<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;week&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; scheduler.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>props.<span class=\"me1\">events<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; scheduler.<span class=\"me1\">createDataProcessor<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span>entity<span class=\"sy0\">,<\/span> action<span class=\"sy0\">,<\/span> data<span class=\"sy0\">,<\/span> id<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>entity <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;event&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; emit<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;event-updated&quot;<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> action<span class=\"sy0\">,<\/span> data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\nonUnmounted<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; schedulerInstance.<span class=\"me1\">value<\/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; schedulerInstance.<span class=\"me1\">value<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>schedulerContainer.<span class=\"me1\">value<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; schedulerContainer.<span class=\"me1\">value<\/span>.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>div ref<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;schedulerContainer&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">@<\/span><span class=\"kw5\">import<\/span> <span class=\"st0\">&quot;@dhx\/trial-scheduler\/codebase\/dhtmlxscheduler.css&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>What this code does is add handlers to the <strong>create\/update\/delete<\/strong> events of DHTMLX Scheduler. If some particular handler is called, it will trigger the Vue event on our component with parameters.<\/p>\n<p>Secondly, you need to attach event listeners to the app component and write a log of actions in another <em>div<\/em>. Let&#8217;s do it this way:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span> src<span class=\"sy0\">\/<\/span>App.<span class=\"me1\">vue<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>script setup<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> ref <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">&quot;vue&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> SchedulerComponent from <span class=\"st0\">&quot;.\/components\/SchedulerComponent.vue&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> events <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&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\">&quot;2027-06-10 6:00&quot;<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2027-06-10 8:00&quot;<\/span><span class=\"sy0\">,<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Event 1&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&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\">&quot;2027-06-13 10:00&quot;<\/span><span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2027-06-13 18:00&quot;<\/span><span class=\"sy0\">,<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Event 2&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> messages <span class=\"sy0\">=<\/span> ref<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nlet nextMessageId <span class=\"sy0\">=<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">function<\/span> addMessage<span class=\"br0\">&#40;<\/span>text<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; messages.<span class=\"me1\">value<\/span>.<span class=\"me1\">unshift<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> nextMessageId<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; text<span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; nextMessageId <span class=\"sy0\">+=<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>messages.<span class=\"me1\">value<\/span>.<span class=\"me1\">length<\/span> <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">40<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; messages.<span class=\"me1\">value<\/span>.<span class=\"me1\">pop<\/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><br \/>\n<br \/>\n<span class=\"kw1\">function<\/span> logEventUpdate<span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> mode<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"kw1\">const<\/span> eventText <span class=\"sy0\">=<\/span> event<span class=\"sy0\">?<\/span>.<span class=\"me1\">text<\/span> <span class=\"sy0\">?<\/span> ` <span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#123;<\/span>event.<span class=\"me1\">text<\/span><span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>` <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; addMessage<span class=\"br0\">&#40;<\/span>`Event $<span class=\"br0\">&#123;<\/span>mode<span class=\"br0\">&#125;<\/span><span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>id<span class=\"br0\">&#125;<\/span> $<span class=\"br0\">&#123;<\/span>eventText<span class=\"br0\">&#125;<\/span>`<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>div <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;container&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>SchedulerComponent <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;left-container&quot;<\/span> <span class=\"sy0\">:<\/span>events<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;events&quot;<\/span> <span class=\"sy0\">@<\/span>event<span class=\"sy0\">-<\/span>updated<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;logEventUpdate&quot;<\/span> <span class=\"sy0\">\/&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>div <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;right-container&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>ul <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;scheduler-messages&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>li <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;scheduler-message&quot;<\/span> <span class=\"sy0\">:<\/span>key<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;message.id&quot;<\/span> v<span class=\"sy0\">-<\/span><span class=\"kw1\">for<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;message in messages&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span> message.<span class=\"me1\">text<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>li<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>ul<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>template<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n<span class=\"sy0\">&lt;<\/span>style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; html<span class=\"sy0\">,<\/span> body <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; margin<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; padding<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; .<span class=\"me1\">container<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; display<span class=\"sy0\">:<\/span> flex<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; .<span class=\"me1\">left<\/span><span class=\"sy0\">-<\/span>container <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; overflow<span class=\"sy0\">:<\/span> hidden<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; position<span class=\"sy0\">:<\/span> relative<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> 100vh<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> 80vw<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; .<span class=\"me1\">right<\/span><span class=\"sy0\">-<\/span>container <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; border<span class=\"sy0\">-<\/span>right<span class=\"sy0\">:<\/span> 1px solid #cecece<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw5\">float<\/span><span class=\"sy0\">:<\/span> right<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> 340px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; box<span class=\"sy0\">-<\/span>shadow<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span> <span class=\"nu0\">0<\/span> 5px 2px #aaa<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; position<span class=\"sy0\">:<\/span> relative<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; z<span class=\"sy0\">-<\/span>index<span class=\"sy0\">:<\/span><span class=\"nu0\">2<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>messages <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; list<span class=\"sy0\">-<\/span>style<span class=\"sy0\">-<\/span>type<span class=\"sy0\">:<\/span> none<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">50<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; margin<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; overflow<span class=\"sy0\">-<\/span>x<span class=\"sy0\">:<\/span> hidden<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; overflow<span class=\"sy0\">-<\/span>y<span class=\"sy0\">:<\/span> auto<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; padding<span class=\"sy0\">-<\/span>left<span class=\"sy0\">:<\/span> 5px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; .<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>messages <span class=\"sy0\">&gt;<\/span> .<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>message <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; background<span class=\"sy0\">-<\/span>color<span class=\"sy0\">:<\/span> #f4f4f4<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; box<span class=\"sy0\">-<\/span>shadow<span class=\"sy0\">:<\/span>inset 5px <span class=\"nu0\">0<\/span> #d69000<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; font<span class=\"sy0\">-<\/span>family<span class=\"sy0\">:<\/span> Geneva<span class=\"sy0\">,<\/span> Arial<span class=\"sy0\">,<\/span> Helvetica<span class=\"sy0\">,<\/span> sans<span class=\"sy0\">-<\/span>serif<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; font<span class=\"sy0\">-<\/span>size<span class=\"sy0\">:<\/span> 14px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; margin<span class=\"sy0\">:<\/span> 5px <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; padding<span class=\"sy0\">:<\/span> 8px <span class=\"nu0\">0<\/span> 8px 10px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>With this code, you equip the app component with:<\/p>\n<ul>\n<li>the <strong>array<\/strong> property for storing log entries;<\/li>\n<li>method for adding a new message on top of our array so that new entries can be displayed first in our log;<\/li>\n<li>method for creating log messages for the actions performed with tasks and links and for adding them to the message stack.<\/li>\n<\/ul>\n<p>As a result, here you&#8217;ve created a simple two-column layout of DHTMLX Scheduler, attached log handlers to the Scheduler events emitted from the Scheduler module, added a container for log messages and bound them to our log messages stack.<\/p>\n<p>Just to check everything works fine, try to make some changes to DHTMLX Scheduler &#8211; messages should be displayed on the right side:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image2.png\" alt=\"Scheduler View in Vue app\" width=\"1919\" height=\"873\" class=\"alignleft size-full wp-image-15734\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image2.png 1919w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image2-300x136.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image2-768x349.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/01\/image2-1024x466.png 1024w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/p>\n<p>These were three steps for creating a simple scheduling Calendar in Vue with DHTMLX. <strong>The demo application <a href=\"https:\/\/github.com\/DHTMLX\/vue-scheduler-demo\" target=\"_blank\" rel=\"noopener\">can be found in our GitHub repository<\/a>.<\/strong><\/p>\n<p>If you follow the instructions above and face any difficulties, share them with us!<\/p>\n<h5>What Else You Can Do:<\/h5>\n<ul>\n<li>Try out all Scheduler&#8217;s PRO features in a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/download.shtml\" target=\"_blank\" rel=\"noopener\">free trial version<\/a><\/li>\n<li>Scrutinize DHTMLX <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/\" target=\"_blank\" rel=\"noopener\">Scheduler documentation<\/a><\/li>\n<li>Play around with <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/samples\/index.html\" target=\"_blank\" rel=\"noopener\">Scheduler live examples<\/a><\/li>\n<li>Participate in our small online survey <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSee5YV4WBfZ17RJ-H1TpkBYYcXsZTr0xqNpOrhGrCLiaQeOJQ\/viewform\" target=\"_blank\" rel=\"noopener\">&#8220;What matters in Scheduler components&#8221;<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Great news for Vue.js lovers! Our dev team prepared a thorough guide on how to integrate our high-performing DHTMLX JS Scheduler with the progressive JavaScript framework Vue.js. So, below &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":7124,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,14,15,55],"class_list":["post-7099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-tips","tag-dhtmlxscheduler","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7099","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\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=7099"}],"version-history":[{"count":17,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7099\/revisions"}],"predecessor-version":[{"id":15736,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7099\/revisions\/15736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7124"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}