{"id":2028,"date":"2019-01-04T12:29:19","date_gmt":"2019-01-04T12:29:19","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2028"},"modified":"2021-01-23T16:09:16","modified_gmt":"2021-01-23T16:09:16","slug":"interactive-event-timetable-in-javascript","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/interactive-event-timetable-in-javascript\/","title":{"rendered":"Interactive Event Timetable in JavaScript"},"content":{"rendered":"<p>This blog post describes the main steps on how to create a schedule table, which shows the allocation of college rooms to different courses. Users can filter the courses by lecturer(s).<br \/>\n<a title=\"JavaScript Scheduler: Resource View\" href=\"https:\/\/mindfusion.dev\/samples\/javascript\/scheduler\/ResourceViewSample\/ResourceView.html\"><img decoding=\"async\" src=\"https:\/\/mindfusion.dev\/samples\/javascript\/scheduler\/resource_view.png\" \/><\/a><\/p>\n<p><strong>I. Initial Setup<\/strong><\/p>\n<p>We start by copying the JavaScript scheduler files that we&#8217;ll use in the directory of our project. These are:<\/p>\n<ul>\n<li>MindFusion.Scheduling.js &#8211; represents the Js Scheduler library<\/li>\n<li>MindFusion.Scheduling-vsdoc.js &#8211; provides Intellisense support<br \/>\nstandard.css &#8211; in a subdirectory &#8220;themes&#8221;, this is the CSS theme styling of the resource table<\/li>\n<li>planner_lic.txt &#8211; paste your license key here to disable the trial version label.<\/li>\n<\/ul>\n<p>We create then 2 more files specifically for our application:<\/p>\n<ul>\n<li>ResourceView.html &#8211; the web page of the application<\/li>\n<li>ResourceView.js &#8211; the JavaScript code that implements the dynamic features of our application.<\/li>\n<\/ul>\n<p><strong>II. The HTML Page<\/strong><\/p>\n<p>In the head section of our web page we first create a reference to the theme file:<\/p>\n<pre id=\"line1\">&lt;<span class=\"start-tag\">link<\/span> <span class=\"attribute-name\">rel<\/span>=\"<a class=\"attribute-value\">stylesheet<\/a>\" <span class=\"attribute-name\">type<\/span>=\"<a class=\"attribute-value\">text\/css<\/a>\" <span class=\"attribute-name\">href<\/span>=\"<a class=\"attribute-value\" href=\"view-source:https:\/\/mindfusion.dev\/blog\/interactive-event-timetable-in-javascript\/themes\/standard.css\">themes\/standard.css<\/a>\"&gt;<\/pre>\n<p>At the end of the web page, just before the closing &lt;\/body&gt; tag we add a reference to the Scheduling.js file that contains the scheduling features and the ResourceView.js files that we&#8217;ll write for the application:<\/p>\n<pre>&lt;script src=\"MindFusion.Scheduling.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"ResourceView.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\n<p>The calendar library requires an HTML &lt;div&gt; element, which is used to render it. We add one:<\/p>\n<pre>&lt;div id=\"calendar\" style=\"height: 100%; width: 100%;\"&gt;&amp;nbsp;&lt;\/div&gt;<\/pre>\n<p>It is important that you add an id to this &lt;div&gt; because we need to reference it in the JS code behind file.<\/p>\n<p><strong>III. Basic JavaScript Settings<\/strong><\/p>\n<p>At the top of the JavaScript code-behind file we add a reference to the Intellisense file. We also create a mapping to MindFusion.Scheduling namespace:<\/p>\n<pre>\/\/\/ \nvar p = MindFusion.Scheduling\n<\/pre>\n<p>Then we create the calendar object. We need a reference to the &lt;div&gt; element that will render it:<\/p>\n<pre>\/\/ create a new instance of the calendar\ncalendar = new p.Calendar(document.getElementById(\"calendar\"));\n<\/pre>\n<p>For this sample we will use the <a title=\"JavaScript Scheduler API Reference: ResourceView\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_ResourceViewSettings_Members_0.htm\">ResourceView<\/a> The <a title=\"JavaScript Scheduler API Reference: currentView\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Calendar_currentView_0.htm\">currentView<\/a> property specifies that. In addition, we set the count of visible cells in the calendar to 7. That is done through the <a title=\"JavaScript Scheduler API Reference: resourceViewSettings\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Calendar_resourceViewSettings_0_0.htm\">resourceViewSettings<\/a> property of the <a title=\"JavaScript Scheduler API Reference: calendar\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?E_MindFusion_Scheduling_Calendar_calendarLoad.htm\">calendar<\/a><\/p>\n<pre>\/\/ set the view to ResourceView, which displays the distribution of resources over a period of time\ncalendar.currentView = p.CalendarView.ResourceView;\n\n\/\/ set the number of visible cells to 7\ncalendar.resourceViewSettings.visibleCells = 7;\n<\/pre>\n<p>The <a title=\"JavaScript Schduler API Reference: itemSettings\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Calendar_itemSettings_0.htm\">itemSettings<\/a> proeprty lets us customize the items in the <a title=\"JavaScript Schduler API Reference: schedule\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Calendar_schedule_0.htm\">schedule<\/a> We use <a title=\"JavaScript Scheduler API Reference: titleFormat\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_ItemSettings_titleFormat_0.htm\">titleFormat<\/a> and tooltipFormat to specify how the title and tooltip of each item will be rendered. Both properties use special format strings:<\/p>\n<ul>\n<li>%s &#8211; the start date will be rendered<\/li>\n<li>%e &#8211; the end date of the item will be rendered<\/li>\n<li>%d &#8211; the details of the item will be rendered.<\/li>\n<\/ul>\n<p>You can specify the way dates and time are formatted by adding the desired format in brackets:<\/p>\n<pre>\/\/ show hours on items\ncalendar.itemSettings.titleFormat = \"%s[HH:mm] - %e[HH:mm] %h\";\ncalendar.itemSettings.tooltipFormat = \"%d\";\n<\/pre>\n<p>Then we set the theme of the calendar to standard, whose css file we referenced in the web page:<\/p>\n<pre>calendar.theme = \"standard\";<\/pre>\n<p>and we make one more adjustment &#8211; the name of contacts will be taken from the last name of the person. Possible valies are &#8220;F&#8221;, &#8220;M&#8221; and &#8220;L&#8221; &#8211; for first, middle and last name.<\/p>\n<pre>calendar.contactNameFormat = \"L\";<\/pre>\n<p><strong>IV. Resources<\/strong><\/p>\n<p>When the calendar initially loads there are several contacts and locations available. The objects that represent them are instances of the <a title=\"JavaScript Scheduler API Reference: Contact\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Contact_Members_1.htm\">Contact<\/a> and <a title=\"JavaScript Scheduler API Reference: Location\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Location_Members_1.htm\">Location<\/a> classes. After we create them we add them to the <a title=\"JavaScript Scheduler API Reference: contacts\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_contacts_0_1.htm\">contacts<\/a> and <a title=\"JavaScript Scheduler API Reference: locations\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_locations_0_1.htm\">locations<\/a> collections of the calendar schedule.<\/p>\n<pre>var resource;\n\n\/\/ Add professor names to the schedule.contacts collection.\nresource = new p.Contact();\nresource.firstName = \"Prof. William\";\nresource.lastName = \"Dyer\";\ncalendar.schedule.contacts.add(resource);\n\nresource = new p.Location();\nresource.name = \"Room D\";\ncalendar.schedule.locations.add(resource);\n<\/pre>\n<p>Now, when the user creates a new course they will see the <a title=\"JavaScript Scheduler API Reference: Contact\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Contact_1.htm\">Contact<\/a> and <a title=\"JavaScript Scheduler API Reference: Location\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Location_1.htm\">Location<\/a> in the Options pane of the &#8220;Create Item&#8221; form:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mindfusion.dev\/samples\/javascript\/scheduler\/resource_view_options.png\" \/><\/p>\n<p><strong>V. Items<\/strong><\/p>\n<p>The items are instances of the <a title=\"JavaScript Scheduler API Reference: Item\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Item_1.htm\">Item<\/a> class. They represent the classes of the different lecturers. We use the <a title=\"JavaScript Scheduler API Reference: startTime\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_startTime_0_1.htm\">startTime<\/a> and <a title=\"JavaScript Scheduler API Reference: endTime\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_endTime_0_1.htm\">endTime<\/a> properties of <a title=\"JavaScript Scheduler API Reference: Item\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Item_1.htm\">Item<\/a> to specify when the class takes place. The <a title=\"JavaScript Scheduler API Reference: subject\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_subject_0_0.htm\">subject<\/a> property gives the name of the class:<\/p>\n<pre>\/\/always start with the current date\nvar date = p.DateTime.today();\n\nitem = new p.Item();\nitem.startTime = p.DateTime.addHours(date.addDays(1), 14);\nitem.endTime = p.DateTime.addHours(item.startTime, 1);\nitem.subject = \"Classical Mechanics\";\n<\/pre>\n<p>We use the <a title=\"JavaScript Schduler API Reference: location\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_location_0_1.htm\">location<\/a> and <a title=\"JavaScript Scheduler API Reference: contacts\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_contacts_0_1.htm\">contacts<\/a> properties to set where the lecture takes place and who teaches it. Note that the <a title=\"JavaScript Scheduler API Reference: contacts\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_contacts_0_1.htm\">contacts<\/a> property is of type collection and we can assign several lecturers to one class:<\/p>\n<pre>item.location = calendar.schedule.locations.items()[0];\nitem.contacts.add(calendar.schedule.contacts.items()[0]);\n<\/pre>\n<p>We get the location and the contact from the schedule&#8217;s lists with <a title=\"JavaScript Scheduler API Reference: locations\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_locations_0_1.htm\">locations<\/a> and <a title=\"JavaScript Scheduler API Reference: contacts\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_contacts_0_1.htm\">contacts<\/a> We must also set the <a title=\"JavaScript Scheduler API Reference: details\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Item_details_0_0.htm\">details<\/a> of the item &#8211; they will be rendered as a tooltip, if you remember. We want the tooltip to show the two names of the lecturer and the location. Here is how we must define it:<\/p>\n<pre>item.details = item.contacts.items()[0].firstName + \" \" +\nitem.contacts.items()[0].lastName + \" - \" + item.location.name;\n<\/pre>\n<p>We must add the <a title=\"JavaScript Scheduler API Reference: item\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_items_0_1.htm\">item<\/a> to the <a title=\"JavaScript Scheduler API Reference: items\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_items_0_1.htm\">items<\/a> collection of the <a title=\"JavaScript Scheduler API Reference: schedule\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Calendar_schedule_0.htm\">schedule<\/a> we <a title=\"JavaScript Scheduler API Reference: render\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?M_MindFusion_Scheduling_Calendar_render_0.htm\">render<\/a> the <a title=\"JavaScript Scheduler API Reference: calendar\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?E_MindFusion_Scheduling_Calendar_calendarLoad.htm\">calendar<\/a> render the calendar<\/p>\n<pre>calendar.render();\n<\/pre>\n<p><strong>VI. Events<\/strong><\/p>\n<p>When users create new items we must set their details to tell the name and the location of the new class. We handle the <a title=\"JavaScript Scheduler API Reference: itemCreating\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?E_MindFusion_Scheduling_Calendar_itemCreating.htm\">itemCreating<\/a> event to do this:<\/p>\n<pre>\/\/ attach handler - creating an item\ncalendar.itemCreating.addEventListener(handleItemCreating); \n\nfunction handleItemCreating(sender, args) {\n    handleItemModified(sender, args);\n    if (args.item.contacts.count() &gt; 0) {\n        \/\/the details field is used by the tooltip\n        args.item.details = args.item.contacts.items()[0].firstName + \" \" +\n                args.item.contacts.items()[0].lastName;\n\n        if (args.item.location != null)\n            args.item.details += \" - \" + args.item.location.name;\n    }\n\n}\n<\/pre>\n<p>The <a title=\"JavaScript Scheduler API Reference: itemCreating\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?E_MindFusion_Scheduling_Calendar_itemCreating.htm\">itemCreating<\/a> event provides an instance of the <a title=\"JavaScript Schduler API Reference: ItemModifyingEventArgs\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_ItemModifyingEventArgs.htm\">ItemModifyingEventArgs<\/a> class as a second argument to the handler method. There we use the <a title=\"JavaScript Scheduler API Reference: item\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?E_MindFusion_Scheduling_Calendar_itemClick.htm\">item<\/a> property that tells us which item is being modified. We then take the desired <a title=\"JavaScript Scheduler API Reference: contact\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_contacts_0_1.htm\">contact<\/a> and <a title=\"JavaScript Scheduler API Reference: Location\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?T_MindFusion_Scheduling_Location_1.htm\">Location<\/a> information from the <a title=\"JavaScript Scheduler API Reference: contacts\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_contacts_0_1.htm\">contacts<\/a> and <a title=\"JavaScript Scheduler API Reference: location\" href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/scheduler.javascript\/index.htm?P_MindFusion_Scheduling_Schedule_locations_0_1.htm\">location<\/a> properties of the item.<\/p>\n<p>When a new course item is dragged to another location we must change its color accordingly. We do this by handling the itemModified event.<\/p>\n<pre>\/\/ attach handler - modifying an item\ncalendar.itemModified.addEventListener(handleItemModified);\n<\/pre>\n<p>The diferent background color of the items is achieved by custom CSS classes. We use the cssClass property of the Item class. The CSS styles are defined in the &lt;HEAD&gt; section of the web page:<\/p>\n<pre> .mfp-planner.standard .itemClass1 .mfp-item {\n            background-color: \t#0c71af;\n        }\n\n.mfp-planner.standard .itemClass2 .mfp-item {\n            background-color: #f81e1e;\n        }\n...........\n<\/pre>\n<p>The handler method checks the new location and assigns the appropriate CSS style:<\/p>\n<pre>function handleItemModified(sender, args)\n{\n    \/\/ you don't have to check any other conditions like dragging to another room, \n    \/\/ as it will stay the same color if you make other changes (other than dragging to a different room)\n    if (args.item != null){\n        switch (args.item.location.name) {\n            case \"Room A\":  \/\/we can also implement it with for\n                args.item.cssClass = 'itemClass1';\n                console.log(\"a\");\n                break;\n            case \"Room B\":\n                args.item.cssClass = 'itemClass2';\n                break;\n            case \"Room C\":\n                args.item.cssClass = 'itemClass3';\n                break;\n            case \"Room D\":\n                args.item.cssClass = 'itemClass1';\n                break;\n            case \"Room E\":\n                args.item.cssClass = 'itemClass2';\n                break;\n            case \"Room F\":\n                args.item.cssClass = 'itemClass3';\n                break;\n            default:\n                args.item.cssClass = 'itemClass1';\n        }\n    }\n}\n<\/pre>\n<p>The item property of the args parameter of the handler method provides access to the item that was modified.<\/p>\n<p><strong>VII. Filtering Professors<\/strong><\/p>\n<p>We want to add one last feature to our application. We want the user to be able to render courses only by a given professor.<\/p>\n<p>We first add checkboxes with the names of the lecturers. Each checkbox has the same handler method for the click event:<\/p>\n<pre id=\"line1\">&lt;<span class=\"start-tag\">input<\/span> <span class=\"attribute-name\">id<\/span>=\"<a class=\"attribute-value\">dyer<\/a>\" <span class=\"attribute-name\">checked<\/span>=\"<a class=\"attribute-value\">checked<\/a>\" <span class=\"attribute-name\">name<\/span>=\"<a class=\"attribute-value\">subscribe<\/a>\" <span class=\"attribute-name\">type<\/span>=\"<a class=\"attribute-value\">checkbox<\/a>\" <span class=\"attribute-name\">value<\/span>=\"<a class=\"attribute-value\">Dyer&gt;\n<span id=\"line481\"><\/span>&lt;label for=<\/a>\"&gt;Prof. William Dyer\n<span id=\"line482\"><\/span>\n<span id=\"line483\"><\/span>&lt;<span class=\"start-tag\">input<\/span> <span class=\"attribute-name\">id<\/span>=\"<a class=\"attribute-value\">fletcher<\/a>\" <span class=\"attribute-name\">checked<\/span>=\"<a class=\"attribute-value\">checked<\/a>\" <span class=\"attribute-name\">name<\/span>=\"<a class=\"attribute-value\">subscribe<\/a>\" <span class=\"attribute-name\">type<\/span>=\"<a class=\"attribute-value\">checkbox<\/a>\" <span class=\"attribute-name\">value<\/span>=\"<a class=\"attribute-value\">Fletcher<\/a>\"&gt;\n<span id=\"line484\"><\/span>&lt;<span class=\"start-tag\">label<\/span> <span class=\"attribute-name\">for<\/span>=\"<a class=\"attribute-value\">fletcher<\/a>\"&gt;Prof. Ann Fletcher&lt;\/<span class=\"end-tag\">label<\/span>&gt;\n<span id=\"line485\"><\/span>...........................<\/pre>\n<p>The handler method needs to look at two cases. The first case is when the class is taught by a single professor. In this case we cycle through all items and make the item visible or not depending on whether the check box with the name of the professor is checked:<\/p>\n<pre>\/\/ if there is at least one present professor from the lecture professors, the lecture will not disappear\nfunction handleClick(cb) {\nfor (var i = 0; i &lt; calendar.schedule.items.count(); i++) {\n        var item = calendar.schedule.items.items()[i]; \/\/we iterate through every element\n        if (item.contacts.count() == 1) {\n            if (item.contacts.items()[0].lastName == cb.value)\n                item.visible = cb.checked;\n        }\n      }\n.......................\n}\n<\/pre>\n<p>In the second case we look at courses that are taught by more than one lecturer. In this case we show the item if the checkbox with the name of at least one of the lecturers is selected:<\/p>\n<pre>else if (item.contacts.count() &gt; 1) {\nfor (var j = 0; j &lt; item.contacts.count() ; j++) {\n                if (item.contacts.items()[j].lastName == cb.value) { \/\/ the checked\/unchecked professor is in the contacts of this item\n                    if (cb.checked == true) item.visible = true; \/\/ if there is a check, the item must be visible\n                    else { \/\/ if there is no check, we see if there is at least one professor in the list of contacts of the item\n                        item.visible = professorPresent(item);\n                    }\n\n                }\n            }\n        }\n<\/pre>\n<p>Finally we repaint the calendar:<\/p>\n<pre>\/\/ repaint the calendar\nthis.calendar.repaint(true);\n<\/pre>\n<p>Here the professorPresent method checks if at least one of the check boxes with professors that are present as lecturers in the item that we provide as argument are selected:<\/p>\n<pre>\/\/ return true if even 1 professor from the item's contacts is present, false otherwise\nfunction professorPresent(item) {\n    console.log(item.contacts.count());\n    for (var j = 0; j &lt; item.contacts.count() ; j++) {\n        var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();\n        var checkBox = document.getElementById(checkBoxId);\n        if (checkBox!= null &amp;&amp; checkBox.checked == true) {\n            return true;\n        }\n    }\n    return false;\n}\n<\/pre>\n<p>And that&#8217;s the end of this blog post. Here is a link to download the complete source code of this application:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/samples\/javascript\/scheduler\/ResourceViewSample.zip\">Download The Sample Resource View Application<\/a><\/p>\n<p><em>About MindFusion JavaScript Scheduler:<\/em> MindFusion Js Scheduler is the complete solution for all applications that need to render interactive timetables, event schedules or appointment calendars. Fully responsive, highly customizable and easy to integrate, you can quickly program the JavaScript scheduling library according to your needs. Find out more at <a href=\"https:\/\/mindfusion.dev\/javascript-scheduler.html\">https:\/\/mindfusion.dev\/javascript-scheduler.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog post describes the main steps on how to create a schedule table, which shows the allocation of college rooms to different courses. Users can filter the courses by lecturer(s). I. Initial Setup We start by copying the JavaScript &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/interactive-event-timetable-in-javascript\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[513,74,104],"tags":[534,532,530,531,533],"class_list":["post-2028","post","type-post","status-publish","format-standard","hentry","category-javascript","category-sample-code","category-scheduling-2","tag-interactive-event-timetable","tag-javascript-event-scheduler","tag-javascript-event-timetable","tag-javascript-timetable","tag-js-calendar"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-wI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2028"}],"version-history":[{"count":39,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2028\/revisions"}],"predecessor-version":[{"id":2628,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2028\/revisions\/2628"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}