{"id":7176,"date":"2020-03-05T14:14:36","date_gmt":"2020-03-05T11:14:36","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7176"},"modified":"2026-09-24T18:23:40","modified_gmt":"2026-09-24T15:23:40","slug":"use-dhtmlx-scheduler-component-react-js-library-demo","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlx-scheduler-component-react-js-library-demo\/","title":{"rendered":"How to Use DHTMLX Scheduler Component with React JS Library (2026)"},"content":{"rendered":"<p><em><strong>Note: <\/strong>Please keep in mind that the current tutorial follows a legacy approach to embedding DHTMLX JS Scheduler into React apps using class components. While this method still works, class components are no longer recommended for new projects. There is a much simpler way to achieve the main goal of this tutorial &#8211; our new <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/react.html\" target=\"_blank\" rel=\"noopener\">DHTMLX React Scheduler<\/a>. Those who still want to use the JS Scheduler in React, check the <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_react.html\" target=\"_blank\" rel=\"noopener\">DHTMLX Scheduler in React<\/a> tutorial based on the modern pattern of React function components.<\/em><\/p>\n<p>We continue a series of tutorials devoted to the integration of our web app components with different client-side frameworks. Meet our new step-by-step guide on using DHTMLX Scheduler with the popular React JS component-based library.<\/p>\n<p>Here you will learn how to:<\/p>\n<ul>\n<li>create a basic React Scheduling application<\/li>\n<li>extend the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" target=\"_blank\" rel=\"noopener\">DHTMLX Scheduler<\/a> functionality with custom features<\/li>\n<li>make it listen and react to user actions in real time<\/li>\n<\/ul>\n<p>Before diving deeper into the subject, we invite you to check a complete demo on our <strong><a href=\"https:\/\/github.com\/DHTMLX\/react-scheduler-demo\" target=\"_blank\" rel=\"noopener\">React Scheduler GitHub<\/a><\/strong> repository.<\/p>\n<p>You can also watch our video guide covering all the steps of adding and configuring DHTMLX Scheduler in a React-based app.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/UdmAB5Hoqxg\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h5>How to Start<\/h5>\n<p>Our first step is to initialize the application structure. For this, we will use the Create React app tool. You can find additional information about it <a href=\"https:\/\/react.dev\/learn\/creating-a-react-app\" target=\"_blank\" rel=\"noopener\">in this article<\/a>.<\/p>\n<p>To create an app run the following command:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">npx create<span class=\"sy0\">-<\/span>react<span class=\"sy0\">-<\/span>app scheduler<span class=\"sy0\">-<\/span>react<\/div><\/div>\n<p>Then we go to the app folder and run the application with the following command:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cd scheduler<span class=\"sy0\">-<\/span>react<br \/>\nyarn start <span class=\"br0\">&#40;<\/span><span class=\"kw1\">if<\/span> you use yarn<span class=\"br0\">&#41;<\/span><br \/>\nnpm start <span class=\"br0\">&#40;<\/span><span class=\"kw1\">if<\/span> you use npm<span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>Now our application should start on http:\/\/localhost:3000\/<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7180\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/react-app.png\" alt=\"React app\" width=\"512\" height=\"250\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/react-app.png 512w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/react-app-300x146.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<h5>Adding DHTMLX Scheduler to React App<\/h5>\n<p>Let&#8217;s start with our Scheduler component.<br \/>\nThe first thing you need is to add the DHTMLX Scheduler package to your project.<br \/>\nA free version of it can be added via npm or yarn:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">yarn add dhtmlx<span class=\"sy0\">-<\/span>scheduler <span class=\"br0\">&#40;<\/span><span class=\"kw1\">for<\/span> yarn<span class=\"br0\">&#41;<\/span><br \/>\nor<br \/>\nnpm install dhtmlx<span class=\"sy0\">-<\/span>scheduler <span class=\"br0\">&#40;<\/span><span class=\"kw1\">for<\/span> npm<span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>Then, create the <em>src\/components\/Scheduler<\/em> folder. Here we&#8217;ll add a React Component wrapper for DHTMLX Scheduler.<br \/>\nCreate the <em>Scheduler.js<\/em> file and open 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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> React<span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> Component <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'react'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'dhtmlx-scheduler'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'dhtmlx-scheduler\/codebase\/dhtmlxscheduler.css'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>const scheduler = window.scheduler;<\/p>\n<p>export default class Scheduler extends Component {<br \/>\ncomponentDidMount() {<br \/>\nscheduler.skin = &#8216;material&#8217;;<br \/>\nscheduler.config.header = [<br \/>\n&#8216;day&#8217;,<br \/>\n&#8216;week&#8217;,<br \/>\n&#8216;month&#8217;,<br \/>\n&#8216;date&#8217;,<br \/>\n&#8216;prev&#8217;,<br \/>\n&#8216;today&#8217;,<br \/>\n&#8216;next&#8217;<br \/>\n];<\/p>\n<p>const { events } = this.props;<br \/>\nscheduler.init(this.schedulerContainer, new Date(2020, 5, 10));<br \/>\nscheduler.clearAll();<br \/>\nscheduler.parse(events);<br \/>\n}<\/p>\n<p>render() {<br \/>\nreturn (<\/p>\n<div>{ this.schedulerContainer = input } }<br \/>\nstyle={ { width: &#8216;100%&#8217;, height: &#8216;100%&#8217; } }<br \/>\n&gt;<\/div>\n<p>);<br \/>\n}<br \/>\n}<\/p>\n<p>Now create the <em>Scheduler.css<\/em> file and add styles for the <em>scheduler-container<\/em>:<\/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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">css<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>container <span class=\"br0\">&#123;<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> 100vh<span class=\"sy0\">;<\/span><br \/>\nwidth<span class=\"sy0\">:<\/span> 100vw<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>And finally, create the <em>index.js<\/em> file with the following content:<\/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>Scheduler<span class=\"sy0\">\/<\/span>index.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> Scheduler from <span class=\"st0\">'.\/Scheduler'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'.\/Scheduler.css'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> Scheduler<span class=\"sy0\">;<\/span><\/div><\/div>\n<p>As DHTMLX Scheduler is a regular JS library that lives outside of the ReactJS world, we created a wrapper component. Once our component is mounted, we initialize DHTMLX Scheduler and attach it to DOM. We can also populate it with the data passed via <em>props<\/em>.<\/p>\n<p>Note that since a free version of DHTMLX Scheduler has no <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/multiple_per_page.html\" target=\"_blank\" rel=\"noopener\">destructor<\/a>, we do not define the <strong>componentWillUnmount<\/strong>. That also means that if we remove a component from React at some point, the instance of DHTMLX Scheduler will stay in memory and will be reused the next time when the component is mounted again.<\/p>\n<p>Now let&#8217;s add Scheduler to our App component. Note that we use hard-coded data for this sample:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> React<span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> Component <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'react'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> Scheduler from <span class=\"st0\">'.\/components\/Scheduler'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'.\/App.css'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>const data = [<br \/>\n{ start_date:&#8217;2020-06-10 6:00&#8242;, end_date:&#8217;2020-06-10 8:00&#8242;, text:&#8217;Event 1&#8242;, id: 1 },<br \/>\n{ start_date:&#8217;2020-06-13 10:00&#8242;, end_date:&#8217;2020-06-13 18:00&#8242;, text:&#8217;Event 2&#8242;, id: 2 }<br \/>\n];<\/p>\n<p>class App extends Component {<br \/>\nrender() {<br \/>\nreturn (<\/p>\n<div><\/div>\n<p>);<br \/>\n}<br \/>\n}<br \/>\nexport default App;<\/p>\n<p>If we run the app now, we should see a simple scheduling calendar with initial events on a page:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">yarn start<br \/>\nor<br \/>\nnpm start<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7184\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/Basic-React-Scheduler-1.png\" alt=\"Basic React Scheduler\" width=\"1602\" height=\"781\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/Basic-React-Scheduler-1.png 1602w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/Basic-React-Scheduler-1-300x146.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/Basic-React-Scheduler-1-768x374.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/Basic-React-Scheduler-1-1024x499.png 1024w\" sizes=\"auto, (max-width: 1602px) 100vw, 1602px\" \/><\/p>\n<h5>Configuring React Scheduler Component<\/h5>\n<p>Let&#8217;s add some custom functionality to our React js scheduler. Suppose we need to add a toolbar with a checkbox that will be responsible for switching the time format on the hour scale.<\/p>\n<p>We can change the time format using the <strong>hour_date<\/strong> config and the <strong>hour_scale<\/strong> template. After that, we need to redraw the view with a new format using a render. Let&#8217;s try to implement it in React. Firstly, let&#8217;s go to the Scheduler component and implement a couple of presets for the view configuration.<\/p>\n<p>Open <em>Scheduler.js<\/em> to add the following code to 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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\ncomponentDidMount<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\nscheduler.<span class=\"me1\">skin<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'material'<\/span><span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">header<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"st0\">'day'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'week'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'month'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'date'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'prev'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'today'<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">'next'<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">hour_date<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'%g:%i %A'<\/span><span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">xy<\/span>.<span class=\"me1\">scale_width<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">70<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>const { events } = this.props;<br \/>\nscheduler.init(this.schedulerContainer, new Date(2020, 5, 10));<br \/>\nscheduler.clearAll();<br \/>\nscheduler.parse(events);<br \/>\n}<br \/>\nshouldComponentUpdate(nextProps) {<br \/>\nreturn this.props.timeFormatState !== nextProps.timeFormatState;<br \/>\n}<\/p>\n<p>componentDidUpdate() {<br \/>\nscheduler.render();<br \/>\n}<\/p>\n<p>setTimeFormat(state) {<br \/>\nscheduler.config.hour_date = state ? &#8216;%H:%i&#8217; : &#8216;%g:%i %A&#8217;;<br \/>\nscheduler.templates.hour_scale = scheduler.date.date_to_str(scheduler.config.hour_date);<br \/>\n}<\/p>\n<p>Here we added the <strong>componentDidUpdate<\/strong> handler, which will repaint the view on updates, and the <strong>shouldComponentUpdate<\/strong> handler, where we will determine if we need to update the view.<br \/>\nAnd add a call to the <strong>setTimeFormat<\/strong> function at the beginning of the<strong> render<\/strong> method:<\/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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\nrender<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">const<\/span> <span class=\"br0\">&#123;<\/span> timeFormatState <span class=\"br0\">&#125;<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">props<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">this<\/span>.<span class=\"me1\">setTimeFormat<\/span><span class=\"br0\">&#40;<\/span>timeFormatState<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><\/div><\/div>\n<div>{ this.schedulerContainer = input } }<br \/>\nstyle={ { width: &#8216;100%&#8217;, height: &#8216;100%&#8217; } }<br \/>\n&gt;<\/div>\n<p>);<br \/>\n}<\/p>\n<p>Now Scheduler displays the time in the 24 hour format. When the <strong>hour_date<\/strong> property and the <strong>hour_scale<\/strong> template change, we need to invoke the update of the view.<\/p>\n<p>Let&#8217;s add UI for changing the time format. We&#8217;ll do with a simple toolbar and switcher.<br \/>\nCreate the Toolbar component:<\/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>Toolbar<span class=\"sy0\">\/<\/span>index.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> Toolbar from <span class=\"st0\">'.\/Toolbar'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'.\/Toolbar.css'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> Toolbar<span class=\"sy0\">;<\/span><\/div><\/div>\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>Toolbar<span class=\"sy0\">\/<\/span>Toolbar.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> React<span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> Component <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'react'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"kw5\">class<\/span> Toolbar <span class=\"kw5\">extends<\/span> Component <span class=\"br0\">&#123;<\/span><br \/>\nhandleTimeFormatStateChange <span class=\"sy0\">=<\/span> <span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">props<\/span>.<span class=\"me1\">onTimeFormatStateChange<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">this<\/span>.<span class=\"me1\">props<\/span>.<span class=\"me1\">onTimeFormatStateChange<\/span><span class=\"br0\">&#40;<\/span>e.<span class=\"me1\">target<\/span>.<span class=\"me1\">checked<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\nrender<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><\/div><\/div>\n<div><label><label><br \/>\nTime format:<br \/>\n<input checked=\"checked\" type=\"checkbox\" \/><\/label><\/label><\/p>\n<div><\/div>\n<\/div>\n<p>);<br \/>\n}<br \/>\n}<\/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>Toolbar<span class=\"sy0\">\/<\/span>Toolbar.<span class=\"me1\">css<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n.<span class=\"me1\">tool<\/span><span class=\"sy0\">-<\/span>bar <span class=\"br0\">&#123;<\/span><br \/>\nbackground<span class=\"sy0\">:<\/span> #ededed<span class=\"sy0\">;<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> 40px<span class=\"sy0\">;<\/span><br \/>\nline<span class=\"sy0\">-<\/span>height<span class=\"sy0\">:<\/span> 14px<span class=\"sy0\">;<\/span><br \/>\npadding<span class=\"sy0\">:<\/span> 5px 10px<span class=\"sy0\">;<\/span><br \/>\ntext<span class=\"sy0\">-<\/span>align<span class=\"sy0\">:<\/span> center<span class=\"sy0\">;<\/span><br \/>\npadding<span class=\"sy0\">-<\/span>left<span class=\"sy0\">:<\/span> 60px<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>.time-format-chkbx {<br \/>\ndisplay: inline-flex;<br \/>\npadding-top: 10px;<br \/>\nfont-family: Roboto,Arial;<br \/>\nuser-select: none;<br \/>\nfont-weight: 500;<br \/>\nfont-size: 20px;<br \/>\ncolor: rgba(0,0,0,.75);<br \/>\n}<\/p>\n<p>.time-format-chkbx input {<br \/>\nposition: absolute;<br \/>\nz-index: -1;<br \/>\nopacity: 0;<br \/>\nmargin: 10px 0 0 20px;<br \/>\n}<br \/>\n.chkbx-text {<br \/>\nposition: relative;<br \/>\ncursor: pointer;<br \/>\nuser-select: none;<br \/>\nfont-weight: 800;<br \/>\nfont-size: 20px;<br \/>\nline-height: 30px;<br \/>\nfont-family: Roboto,Arial;<br \/>\nmargin-left: 10px;<br \/>\n}<br \/>\n.chkbx-text:before {<br \/>\ncontent: &#8217;12h&#8217;;<br \/>\ntext-align: right;<br \/>\npadding: 0 10px;<br \/>\nposition: absolute;<br \/>\ntop: -8px;<br \/>\nleft: 0;<br \/>\nwidth: 60px;<br \/>\nheight: 30px;<br \/>\nborder-radius: 15px;<br \/>\nbackground: #CDD1DA;<br \/>\nbox-shadow: inset 0 2px 3px rgba(0,0,0,.2);<br \/>\ntransition: .2s;<br \/>\n}<br \/>\n.chkbx-text:after {<br \/>\ncontent: &#8221;;<br \/>\nposition: absolute;<br \/>\ntop: -6px;<br \/>\nleft: 2px;<br \/>\nwidth: 25px;<br \/>\nheight: 25px;<br \/>\nborder-radius: 15px;<br \/>\nbackground: #FFF;<br \/>\nbox-shadow: 0 2px 5px rgba(0,0,0,.3);<br \/>\ntransition: .2s;<br \/>\n}<br \/>\n.time-format-chkbx input:checked + .chkbx-text:before {<br \/>\ncontent: &#8217;24h&#8217;;<br \/>\ncolor: white;<br \/>\ntext-align: left;<br \/>\nbackground: #0288d1;<br \/>\n}<br \/>\n.time-format-chkbx input:checked + .chkbx-text:after {<br \/>\nleft: 53px;<br \/>\n}<br \/>\n.time-format-chkbx input:focus + .chkbx-text:before {<br \/>\nbox-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(2,136,209,.7);<br \/>\n}<\/p>\n<p>And update the height of the scheduler-container:<\/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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">css<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>container <span class=\"br0\">&#123;<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> calc<span class=\"br0\">&#40;<\/span>100vh <span class=\"sy0\">-<\/span> 50px<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nwidth<span class=\"sy0\">:<\/span> 100vw<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Here we add the checkbox for changing the time format and provide the <strong>onTimeFormatStateChange<\/strong> handler for a parent component. Now you need to add the toolbar to the App component:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> Toolbar from <span class=\"st0\">'.\/components\/Toolbar'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>and a handler for changing the event:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\nstate <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\ncurrentTimeFormatState<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>handleTimeFormatStateChange = (state) =&gt; {<br \/>\nthis.setState({<br \/>\ncurrentTimeFormatState: state<br \/>\n});<br \/>\n}<\/p>\n<p>JSX:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\nrender<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">const<\/span> <span class=\"br0\">&#123;<\/span> currentTimeFormatState <span class=\"br0\">&#125;<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><\/div><\/div>\n<div><\/div>\n<p>);<br \/>\n}<\/p>\n<p>So, as a result, we get the opportunity to pass the updated state to our React Scheduler every time the user changes the time format:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7188\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-with-Toolbar-1.png\" alt=\"React Scheduler with Toolbar\" width=\"1602\" height=\"780\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-with-Toolbar-1.png 1602w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-with-Toolbar-1-300x146.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-with-Toolbar-1-768x374.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-with-Toolbar-1-1024x499.png 1024w\" sizes=\"auto, (max-width: 1602px) 100vw, 1602px\" \/><\/p>\n<h5>Processing Changes Made in DHTMLX React Scheduler<\/h5>\n<p>Now we&#8217;ll show how to capture calendar view changes and then pass them somewhere in the app.<br \/>\nWe&#8217;ll capture Scheduler changes using the dhtmlxScheduler events.<br \/>\nLet&#8217;s see how this is done in practice. Open <em>src\/components\/Scheduler\/Scheduler.js<\/em> and add the following method:<\/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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\ninitSchedulerEvents<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>scheduler._$initialized<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>const onDataUpdated = this.props.onDataUpdated;<\/p>\n<p>scheduler.attachEvent(&#8216;onEventAdded&#8217;, (id, ev) =&gt; {<br \/>\nif (onDataUpdated) {<br \/>\nonDataUpdated(&#8216;create&#8217;, ev, id);<br \/>\n}<br \/>\n});<\/p>\n<p>scheduler.attachEvent(&#8216;onEventChanged&#8217;, (id, ev) =&gt; {<br \/>\nif (onDataUpdated) {<br \/>\nonDataUpdated(&#8216;update&#8217;, ev, id);<br \/>\n}<br \/>\n});<\/p>\n<p>scheduler.attachEvent(&#8216;onEventDeleted&#8217;, (id, ev) =&gt; {<br \/>\nif (onDataUpdated) {<br \/>\nonDataUpdated(&#8216;delete&#8217;, ev, id);<br \/>\n}<br \/>\n});<br \/>\nscheduler._$initialized = true;<br \/>\n}<br \/>\ncomponentDidMount() {<br \/>\nscheduler.skin = &#8216;material&#8217;;<br \/>\nscheduler.config.header = [<br \/>\n&#8216;day&#8217;,<br \/>\n&#8216;week&#8217;,<br \/>\n&#8216;month&#8217;,<br \/>\n&#8216;date&#8217;,<br \/>\n&#8216;prev&#8217;,<br \/>\n&#8216;today&#8217;,<br \/>\n&#8216;next&#8217;<br \/>\n];<br \/>\nscheduler.config.hour_date = &#8216;%g:%i %A&#8217;;<br \/>\nscheduler.xy.scale_width = 70;<\/p>\n<p>this.initSchedulerEvents();<\/p>\n<p>const { events } = this.props;<br \/>\nscheduler.init(this.schedulerContainer, new Date(2020, 5, 10));<br \/>\nscheduler.clearAll();<br \/>\nscheduler.parse(events);<br \/>\n}<\/p>\n<p>We use a global instance of the scheduler, and since it can be mounted multiple times we need to make sure that we add event listeners only once.<\/p>\n<p>In order to do so, we use a custom <em>`scheduler._$initialized`<\/em> flag. When the scheduler is initialized for the first time, this flag is not defined and we add event listeners and set this flag to <em>`true`<\/em>. This way we make sure we won&#8217;t attach event listeners to the same Scheduler instance again.<\/p>\n<p>That&#8217;s how we can capture all changes made in Scheduler and send them to the parent component.<\/p>\n<p>And we need to catch events, create messages for them and put those messages into the local state. To do this, update the App component:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\nstate <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\ncurrentTimeFormatState<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\nmessages<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\naddMessage<span class=\"br0\">&#40;<\/span>message<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">const<\/span> maxLogLength <span class=\"sy0\">=<\/span> <span class=\"nu0\">5<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">const<\/span> newMessage <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span> message <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">const<\/span> messages <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\nnewMessage<span class=\"sy0\">,<\/span><br \/>\n...<span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">messages<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>if (messages.length &gt; maxLogLength) {<br \/>\nmessages.length = maxLogLength;<br \/>\n}<br \/>\nthis.setState({ messages });<br \/>\n}<\/p>\n<p>logDataUpdate = (action, ev, id) =&gt; {<br \/>\nconst text = ev &amp;&amp; ev.text ? ` (${ev.text})` : &#8221;;<br \/>\nconst message = `event ${action}: ${id} ${text}`;<br \/>\nthis.addMessage(message);<br \/>\n}<\/p>\n<p>After that, create a component that will display these messages on the page:<\/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>MessageArea<span class=\"sy0\">\/<\/span>MessageArea.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> React<span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> Component <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'react'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>export default class MessageArea extends Component {<br \/>\nrender() {<br \/>\nconst messages = this.props.messages.map(({ message }) =&gt; {<br \/>\nreturn<\/p>\n<ul>\n<li>{message}<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>});<\/p>\n<p>return (<\/p>\n<div>\n<h3>Messages:<\/h3>\n<ul>{ messages }<\/ul>\n<\/div>\n<p>);<br \/>\n}<br \/>\n}<\/p>\n<p>MessageArea.defaultProps = {<br \/>\nmessages: []<br \/>\n};<\/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>MessageArea<span class=\"sy0\">\/<\/span>index.<span class=\"me1\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> MessageArea from <span class=\"st0\">'.\/MessageArea'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"st0\">'.\/MessageArea.css'<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> MessageArea<span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Add styles:<\/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>MessageArea<span class=\"sy0\">\/<\/span>MessageArea.<span class=\"me1\">css<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n.<span class=\"me1\">message<\/span><span class=\"sy0\">-<\/span>area <span class=\"br0\">&#123;<\/span><br \/>\nbackground<span class=\"sy0\">:<\/span> #ebebeb<span class=\"sy0\">;<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> 200px<span class=\"sy0\">;<\/span><br \/>\noverflow<span class=\"sy0\">:<\/span> auto<span class=\"sy0\">;<\/span><br \/>\npadding<span class=\"sy0\">:<\/span> 10px<span class=\"sy0\">;<\/span><br \/>\nbox<span class=\"sy0\">-<\/span>sizing<span class=\"sy0\">:<\/span>border<span class=\"sy0\">-<\/span>box<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>.message-area ul{<br \/>\nmargin: 0;<br \/>\npadding: 0;<br \/>\nlist-style: none;<br \/>\n}<\/p>\n<p>.message-area li:before {<br \/>\ncontent: &#8220;\\003e&#8221;;<br \/>\npadding-right: 10px;<br \/>\n}<\/p>\n<p>And update the height of the scheduler-container:<\/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>Scheduler<span class=\"sy0\">\/<\/span>Scheduler.<span class=\"me1\">css<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n.<span class=\"me1\">scheduler<\/span><span class=\"sy0\">-<\/span>container <span class=\"br0\">&#123;<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> calc<span class=\"br0\">&#40;<\/span>100vh <span class=\"sy0\">-<\/span> 50px <span class=\"sy0\">-<\/span> 200px<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nwidth<span class=\"sy0\">:<\/span> 100vw<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>And finally, connect this component to the App:<br \/>\nimports:<\/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\">js<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw5\">import<\/span> MessageArea from <span class=\"st0\">'.\/components\/MessageArea'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>JSX:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">render<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">const<\/span> <span class=\"br0\">&#123;<\/span> currentTimeFormatState<span class=\"sy0\">,<\/span> messages <span class=\"br0\">&#125;<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><\/div><\/div>\n<div><\/div>\n<p>);<br \/>\n}<\/p>\n<p>Thus, now every time a user changes calendar events, handlers call in the App component and update the <strong>MessageArea<\/strong>, which prints information about user actions on the page.<\/p>\n<p>If we run the application, we will see the following result:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7190\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-1.png\" alt=\"React Scheduler with Messages\" width=\"1602\" height=\"781\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-1.png 1602w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-1-300x146.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-1-768x374.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/03\/React-Scheduler-1-1024x499.png 1024w\" sizes=\"auto, (max-width: 1602px) 100vw, 1602px\" \/><\/p>\n<p>We hope that our tutorial will come in useful in your projects. Feel free to send us your questions in the comments below if you face any difficulties.<\/p>\n<p>We also invite you to download a ready-made demo of our React Scheduler component <a href=\"https:\/\/github.com\/DHTMLX\/react-scheduler-demo\" target=\"_blank\" rel=\"noopener\">from GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: Please keep in mind that the current tutorial follows a legacy approach to embedding DHTMLX JS Scheduler into React apps using class components. While this method still works, &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":7192,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,14,56,15],"class_list":["post-7176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-tips","tag-react","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7176","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=7176"}],"version-history":[{"count":32,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7176\/revisions"}],"predecessor-version":[{"id":15040,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7176\/revisions\/15040"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7192"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}