{"id":3040,"date":"2015-11-12T15:42:34","date_gmt":"2015-11-12T11:42:34","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=3040"},"modified":"2026-04-28T16:29:50","modified_gmt":"2026-04-28T13:29:50","slug":"exploring-different-views-dhtmlxscheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/exploring-different-views-dhtmlxscheduler\/","title":{"rendered":"Exploring Different Views of dhtmlxScheduler"},"content":{"rendered":"\n
\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n For new clients, we recommend using DHTMLX Scheduler<\/a> and \n integrating it with .NET by following our official guide<\/a>. \n <\/p>\n <\/div>\n <\/div>\n \n

Our dhtmlxScheduler<\/a> provides you with the different types of data visualization. Besides the popular options, such as different time scales like day or week, our scheduler gives you some additional possibilities. For example, you can combine your schedule with the map that can be pretty helpful in case you want to plan your business trip or vacations.<\/p>\n

If you’re working with ASP.NET, you may look at DHTMLX Scheduler.NET, a Scheduler control that works both in ASP.NET MVC and Web Forms. It has the similar range of views that are described below.<\/p><\/blockquote>\n

\"calendar_basic_views\"<\/p>\n

Usually, there are only three required steps that allow you to use the view you want:<\/p>\n

1. Include the required files to your project
\n2. Add the proper tab to your page, so you can switch to the view you want
\n3. Configure the view<\/p>\n

To understand how the views work, let’s start with the default ones.
\n<\/p>\n

Default Views: Day, Week, and Month<\/b><\/h3>\n

This Getting Started Guide<\/a> can help you build the basic scheduler.<\/p>\n

As we mentioned before, you should add the proper files firstly:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/dhtmlxscheduler.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

And here’s a bunch of DIV containers you should use to make your application work:<\/p>\n

<div<\/span> id<\/span>=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style<\/span>=<\/span>"width: 100%; height: 100%;"<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_navline"<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_prev_button"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_next_button"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_today_button"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_date"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 204px;"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 140px;"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 76px;"<\/span>><\/<\/span>div<\/span>>
\n<\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_header"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_data"<\/span>><\/<\/span>div<\/span>>
\n<\/<\/span>div<\/span>><\/div><\/div>\n

This code creates Next and Previous navigation buttons, shows you the current period, etc.<\/p>\n

Particularly, we’re interested in these three DIV’s:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 204px;"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 140px;"<\/span>><\/<\/span>div<\/span>>
\n<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 76px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

We’ve created three tabs that can be used to switch between the Day<\/strong>, Week<\/strong>, and Month<\/strong> views.<\/p>\n

During the initialization you can set the default options: an HTML container your calendar will be initialized in, the initial date of the scheduler, and the name of the initial view:<\/p>\n

 scheduler.init<\/span>(<\/span>'scheduler_here'<\/span>,<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>,<\/span> 'month'<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here’s how the typical basic scheduler looks like:<\/p>\n

\"Basic<\/p>\n

As you can see, there are some previously created events rendered.<\/p>\n

You can use tabs to switch between the available views. Here’s the Week view:<\/p>\n

\"Week<\/p>\n

And here’s how the Day View looks like:<\/p>\n

\"Day<\/p>\n

You can double-click an empty cell to create a new event or drag the existing event through the calendar grid to change the date.<\/p>\n

Extending the Period. The Year View<\/b><\/h3>\n

If one month is not long enough to plan your schedule, there’s always a possibility to use the Year View<\/strong>.<\/p>\n

First of all, you should include the required JavaScript file:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_year_view.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

Then, add the proper tab to your page:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

And finally, set the label for the tab:<\/p>\n

scheduler.locale<\/span>.labels<\/span>.year_tab<\/span> =<\/span>"Year"<\/span>;<\/span><\/div><\/div>\n

That’s it. Now you can use the Year View:<\/p>\n

\"Year<\/p>\n

The tooltip you can see at the screenshot above allows you to edit the event. Just click the “Details” icon and the edit window will appear on the screen.<\/p>\n

Learn more:<\/strong> Year View Documentation Page<\/a>.<\/p>\n

All at Once. Agenda, Week Agenda, and Grid<\/b><\/h3>\n

Now, let’s talk about the views that allow you to see all available events in the form of different types of lists.<\/p>\n

The Agenda<\/strong> view displays a list of all upcoming events. To enable this view you should add the proper JavaScript to your project:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_agenda_view.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

The next step is to add the tab to your page:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

As a result, you’ll get a list that contains all your tasks:<\/p>\n

\"Agenda\"<\/p>\n

You can double-click on an empty self of this list to create a new event or click the “Details” button to edit the existing ones.<\/p>\n

Learn more:<\/strong> Agenda View Documentation Page<\/a><\/p>\n

The Week Agenda<\/strong> view is a combination of two views: Week and Agenda. This view shows you a list of upcoming events within a week.<\/p>\n

Here’s the required JavaScript file:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_week_agenda.js"<\/span>><\/<\/span>script<\/span>><\/div><\/div>\n

And here’s the code that adds the proper tab:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

The result is shown below:<\/p>\n

\"Week<\/p>\n

As you can see, this view shows you the whole week at once. You can double-click the empty cell to create a new event. Double-clicking the existing event will open the edit window. Another handy feature is events highlighting. You can click the event to select it. After you select the long term event, all related records will be highlighted.<\/p>\n

Here’s how it looks like:<\/p>\n

\"Highlighted<\/p>\n

Learn more:<\/strong> Week Agenda View Documentation Page<\/a><\/p>\n

The Grid View<\/strong> looks similar to the Agenda view. But in this case, you can choose the data you want to display.<\/p>\n

Imagine that you wish to add some comments to your calendar. Here’s how the possible array of events will look like:<\/p>\n

var<\/span> events =<\/span> [<\/span>
\n{<\/span>id:<\/span>1<\/span>,<\/span> text:<\/span>"Meeting"<\/span>,<\/span> start_date:<\/span>"2015-10-13 14:00"<\/span>,<\/span>
\nend_date:<\/span>"2015-10-13 17:00"<\/span>,<\/span> comment:<\/span>"Project release issues"<\/span>}<\/span>,<\/span>
\n{<\/span>id:<\/span>3<\/span>,<\/span> text:<\/span>"Interview"<\/span>,<\/span> start_date:<\/span>"2015-10-24 09:00"<\/span>,<\/span>
\nend_date:<\/span>"2015-10-24 10:00"<\/span>,<\/span> comment:<\/span>"Remember to smile!"<\/span>}<\/span>,<\/span>
\n{<\/span>\/* some more events *\/<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Let’s add the Grid view to our application. First of all, the required file:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_grid_view.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

Now you should add the Grid tab:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 300px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

Configure the date format and change the tab label if you want to:<\/p>\n

 scheduler.config<\/span>.xml_date<\/span> =<\/span> "%Y-%m-%d %H:%i"<\/span>;<\/span>
\n scheduler.locale<\/span>.labels<\/span>.grid_tab<\/span> =<\/span> "My Grid"<\/span>;<\/span><\/div><\/div>\n

Now, the most important part. We must configure the grid. You should call the createGridView method to do so:<\/p>\n

 scheduler.createGridView<\/span>(<\/span>{<\/span>
\n name:<\/span>"grid"<\/span>,<\/span>
\n fields:<\/span>[<\/span> \/* defines columns of the grid *\/<\/span>
\n {<\/span>id:<\/span>"id"<\/span>,<\/span> label:<\/span>"ID"<\/span>,<\/span> sort:<\/span>"int"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span>"date"<\/span>,<\/span> label:<\/span>"Date"<\/span>,<\/span> sort:<\/span>"date"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span>"text"<\/span>,<\/span> label:<\/span>"Event"<\/span>,<\/span> sort:<\/span>"str"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span>"comment"<\/span>,<\/span> label:<\/span>"Comment"<\/span>,<\/span> sort:<\/span>"str"<\/span>}<\/span>
\n ]<\/span>,<\/span>
\n }<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here’s an explanation of what we’ve done. This code will create new grid with name grid that will contain a bunch of columns that the fields property contains. In this case, we have used the id property to choose what data we you want to display. It can be the ID of the event, its beginning date, or even a comment that you’ve added. The second property in our example is label. It defines the label for the column. The last property, sort, specifies the type of content that will be displayed in this column. It specifies the way of sorting. Possible values are ind, date, and str.<\/p>\n

The result is shown below:<\/p>\n

\"Grid<\/p>\n

Besides this minimal amount of properties, many others can help you configure your application the way you want. You can set the with of a column, choose the date range, use custom sorting functions, etc.<\/p>\n

Learn more:<\/strong> Grid View Documentation Page<\/a><\/p>\n

Timeline View and Units View<\/b><\/h3>\n

These views allow you to visualize events horizontally with separate timelines arranged from left to right (Timeline View) or vertically<\/p>\n

Let’s start from the Timeline View<\/strong>.<\/p>\n

Add the proper JavaScript file:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_timeline.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

Then add the tab to your page:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

and set its label:<\/p>\n

scheduler.locale<\/span>.labels<\/span>.timeline_tab<\/span> =<\/span>"Timeline"<\/span>;<\/span><\/div><\/div>\n

Now you can call the createTimelineView method to configure the view<\/p>\n

scheduler.createTimelineView<\/span>(<\/span>{<\/span>
\nname:<\/span>"timeline"<\/span>,<\/span>
\nx_unit:<\/span>"minute"<\/span>,<\/span>\/\/measuring unit of the X-Axis.<\/span>
\nx_date:<\/span>"%H:%i"<\/span>,<\/span> \/\/date format of the X-Axis<\/span>
\nx_step:<\/span>30<\/span>,<\/span> \/\/X-Axis step in 'x_unit's<\/span>
\nx_size:<\/span>24<\/span>,<\/span> \/\/X-Axis length specified as the total number of 'x_step's<\/span>
\nx_start:<\/span>16<\/span>,<\/span> \/\/X-Axis offset in 'x_unit's<\/span>
\nx_length:<\/span>48<\/span>,<\/span> \/\/number of 'x_step's that will be scrolled at a time<\/span>
\ny_unit:<\/span> \/\/sections of the view (titles of Y-Axis)<\/span>
\n[<\/span>{<\/span>key:<\/span>1<\/span>,<\/span> label:<\/span>"Section A"<\/span>}<\/span>,<\/span>
\n{<\/span>key:<\/span>2<\/span>,<\/span> label:<\/span>"Section B"<\/span>}<\/span>,<\/span>
\n{<\/span>key:<\/span>3<\/span>,<\/span> label:<\/span>"Section C"<\/span>}<\/span>,<\/span>
\n{<\/span>key:<\/span>4<\/span>,<\/span> label:<\/span>"Section D"<\/span>}<\/span>]<\/span>,<\/span>
\ny_property:<\/span>"section_id"<\/span>,<\/span> \/\/mapped data property<\/span>
\nrender:<\/span>"bar"<\/span> \/\/view mode<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

It’s big enough but have no fear. Check the comments. To help you better understand what’s going on here’s little explanation. Besides the X-Axis configuration, you should also define the x-unit property that defines how many areas your calendar will consist of. In this example above we’ve created four areas with labels Section A, Section B, etc. The render property defines the view mode. There are Bar, Cell, Tree, and Days options available. The y_property property will help you attach an event to a proper timeline area. For example, if you want to add an event to Section A you should add the following property: y_property: “1”.<\/p>\n

\"Timeline<\/p>\n

Learn more:<\/strong> Timeline View Documentation Page<\/a><\/p>\n

The Units View<\/strong> looks pretty much the same. The main difference, in this case, is that you can configure the X-Axis.<\/p>\n

By tradition, add the JavaScript file:<\/p>\n

<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_units.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

and add the tab to your page:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

You can use this code to set the label fir the tab:<\/p>\n

 scheduler.locale<\/span>.labels<\/span>.unit_tab<\/span> =<\/span> "Unit"<\/span><\/div><\/div>\n

To configure how the X-Axis will look like, you should use the createUnitsView method:<\/p>\n

 scheduler.createUnitsView<\/span>(<\/span>{<\/span>
\n name:<\/span>"unit"<\/span>,<\/span>
\n property:<\/span>"unit_id"<\/span>,<\/span> \/\/the mapped data property<\/span>
\n list:<\/span>[<\/span> \/\/defines the units of the view<\/span>
\n {<\/span>key:<\/span>1<\/span>,<\/span> label:<\/span>"Section A"<\/span>}<\/span>,<\/span>
\n {<\/span>key:<\/span>2<\/span>,<\/span> label:<\/span>"Section B"<\/span>}<\/span>,<\/span>
\n {<\/span>key:<\/span>3<\/span>,<\/span> label:<\/span>"Section C"<\/span>}<\/span>
\n ]<\/span>
\n }<\/span>)<\/span>;<\/span><\/div><\/div>\n

This code will create a new view with name units. property defines the property name that can be used to define which unit will contain the proper event. The list array contains the key property that you should use to attach the event to the unit, and the label property that defines unit’s label.<\/p>\n

That’s all you need to do for the basic configuration. The final step is to change the way you define your event. All you need to do is to add new property that will define which unit this event belongs. For example:<\/p>\n

 var<\/span> events =<\/span> [<\/span>
\n {<\/span>id:<\/span>1<\/span>,<\/span> text:<\/span>"Meeting"<\/span>,<\/span> start_date:<\/span>"2015-10-13 14:00"<\/span>,<\/span>
\n end_date:<\/span>"2015-10-13 17:00"<\/span>,<\/span> unit_id:<\/span> "1"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span>2<\/span>,<\/span> text:<\/span>"Interview"<\/span>,<\/span> start_date:<\/span>"2015-10-24 09:00"<\/span>,<\/span>
\n end_date:<\/span>"2015-10-24 10:00"<\/span>,<\/span> unit_id:<\/span>"2"<\/span>}<\/span>,<\/span>
\n {<\/span> \/* more events *\/<\/span> }<\/span>
\n ]<\/span>;<\/span><\/div><\/div>\n

In this case, unit_id: “1” means that the first event will be placed within the unit with the key: 1 property.<\/p>\n

Here’s how this view looks like:<\/p>\n

\"Unit<\/p>\n

Besides this very basic functionality, Units View allows you to assign events to several units, or, for example, display units for multiple days. Better check the documentation page to learn how you can configure it.<\/p>\n

Learn more:<\/strong> Units View Documentation Page<\/a><\/p>\n

Map View<\/b><\/h3>\n

If you travel a lot, this view will be pretty helpful, since it provides you with possibility to combine the event description wit the marker on the map. This view uses Google Maps, so this time besides the Map View JavaScript file, we should include the required Google Maps file:<\/p>\n

<script<\/span> src<\/span>=<\/span>"https:\/\/maps.google.com\/maps\/api\/js?sensor=false"<\/span>><\/<\/span>script<\/span>><\/span>
\n<script<\/span> src<\/span>=<\/span>".\/codebase\/ext\/dhtmlxscheduler_map_view.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/div>\n

Don’t forget to add the Map view tab to your page:<\/p>\n

<div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> style<\/span>=<\/span>"right: 280px;"<\/span>><\/<\/span>div<\/span>><\/div><\/div>\n

And remember that it’s alway possible to rename it:<\/p>\n

scheduler.locale<\/span>.labels<\/span>.map_tab<\/span> =<\/span> "My Map"<\/span>;<\/span><\/div><\/div>\n

The next step is Lightbox configuration. Lightbox is an edit form used to alter the event’s details. Here’s how it looks like by default:<\/p>\n

\"Lightbox\"<\/p>\n

As you can see, there’s no possibility to specify the location. Let’s fix it:<\/p>\n

scheduler.config<\/span>.lightbox<\/span>.sections<\/span>=<\/span>[<\/span>
\n{<\/span>name:<\/span>"description"<\/span>,<\/span> height:<\/span>50<\/span>,<\/span>map_to:<\/span>"text"<\/span>,<\/span> type:<\/span>"textarea"<\/span>,<\/span> focus:<\/span>true<\/span>}<\/span>,<\/span>
\n\/* adding new textarea *\/<\/span>
\n{<\/span>name:<\/span>"location"<\/span>,<\/span> height:<\/span>43<\/span>,<\/span> map_to:<\/span>"event_location"<\/span>,<\/span> type:<\/span>"textarea"<\/span>}<\/span>,<\/span>
\n{<\/span>name:<\/span>"time"<\/span>,<\/span> height:<\/span>72<\/span>,<\/span> type:<\/span>"time"<\/span>,<\/span> map_to:<\/span>"auto"<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Done. Now you able to add the location information to your events.<\/p>\n

Here’s how the Map view works:<\/p>\n

\"Map<\/p>\n

There are two areas: a list of upcoming events and Google Map that shows the event\u2019s location. To create a new event, you can double click on an empty cell of the list or the desired location on the map:<\/p>\n

\"Lightbox<\/p>\n

After you create the event, it will appear on the list, and a new marker will be added to the map. You can click on the ‘details’ icon on the left side of the event’s description to edit or delete it. To overview the event, click the marker:<\/p>\n

\"Marker<\/p>\n

Learn more:<\/strong> Map View Documentation Page<\/a><\/p>\n

dhtmlxScheduler is a JavaScript Schedule Calendar<\/a> that gives you the ability to develop Google-like calendar in your application. Using dhtmlxScheduler, you may build agenda, appointment, week calendars, and more others. Get learn about our JavaScript scheduler control in its documentation<\/a> and start using it now<\/a>.<\/p><\/blockquote>\n

\"download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Our dhtmlxScheduler provides you with the different types of data visualization. Besides the popular options, such as different time scales like day or week, our scheduler gives you some …<\/p>\n","protected":false},"author":2,"featured_media":3389,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,15],"class_list":["post-3040","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-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3040","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3040"}],"version-history":[{"count":7,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3040\/revisions"}],"predecessor-version":[{"id":15468,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3040\/revisions\/15468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3389"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Learn more:<\/strong> Day View<\/a>, Week View<\/a>, Month View<\/a>.<\/p>\n