{"id":12355,"date":"2024-05-16T13:33:07","date_gmt":"2024-05-16T10:33:07","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12355"},"modified":"2024-07-11T11:59:23","modified_gmt":"2024-07-11T08:59:23","slug":"enhancing-dhtmlx-javascript-scheduler-custom-toolbar","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/enhancing-dhtmlx-javascript-scheduler-custom-toolbar\/","title":{"rendered":"Enhancing DHTMLX JavaScript Scheduler with a Custom Toolbar"},"content":{"rendered":"<p>When using JavaScript UI libraries in a web project, you have to be sure that your tool is customizable enough to meet specific requirements and user preferences. DHTMLX Scheduler is a feature-packed JS component for delivering calendar functionalities with ample customization options. Not to be unfounded, we want to show you how to enhance its interface with a custom toolbar.<\/p>\n<p>This tutorial will guide you through creating a custom toolbar for our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" rel=\"noopener\" target=\"_blank\">JavaScript scheduling calendar<\/a>, including controls for searching events, adding new events, refreshing the event list, filtering by categories, switching between different views, and toggling themes. After following all steps described in this tutorial, that&#8217;s what you should get in the end:<br \/>\n<iframe data-src=\"https:\/\/snippet.dhtmlx.com\/94d9f773?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/94d9f773?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Setting the Stage<\/h5>\n<p>Before diving into the customization process, ensure you have the basic setup of the DHTMLX Scheduler on your page, as outlined in our <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/configuring_the_scheduler.html\" rel=\"noopener\" target=\"_blank\">documentation<\/a>. The foundation of our custom toolbar will build upon the following initial HTML structure:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\"><span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;scheduler_here&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_container&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'width:100%; height:100%;'<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_navline&quot;<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_prev_button&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_next_button&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_today_button&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_date&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_tab&quot;<\/span> data-tab<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;day&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_tab&quot;<\/span> data-tab<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;week&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_tab&quot;<\/span> data-tab<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;month&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_header&quot;<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_data&quot;<\/span>&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/5py89oxk?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Crafting the Custom Toolbar<\/h5>\n<p>Our goal is to replace the default navigation within the <strong>dhx_cal_navline<\/strong> element with a custom toolbar that enhances functionality and aesthetics. Here&#8217;s how you can modify the HTML to include new controls:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;scheduler_here&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_container&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'width:100%; height:100%;'<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_navline&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">input<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text&quot;<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;event_search&quot;<\/span> placeholder<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;Search events&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;add_event&quot;<\/span>&gt;Add Event&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;refresh_events&quot;<\/span>&gt;Refresh&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">select<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;event_filter&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;all&quot;<\/span>&gt;All&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;meetings&quot;<\/span>&gt;Meetings&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;appointments&quot;<\/span>&gt;Appointments&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;personal&quot;<\/span>&gt;Personal&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">select<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">select<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;view_selector&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;day&quot;<\/span>&gt;Day&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;week&quot;<\/span>&gt;Week&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">option<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;month&quot;<\/span>&gt;Month&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">option<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">select<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;toggle_theme&quot;<\/span>&gt;Toggle Theme&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">span<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;current_date&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">span<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;today_button&quot;<\/span>&gt;Today&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;prev_button&quot;<\/span>&gt;Previous&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;<span class=\"kw2\">button<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;next_button&quot;<\/span>&gt;Next&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">button<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_header&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_data&quot;<\/span>&gt;<br \/>\n&nbsp; &nbsp; &lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<br \/>\n&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/c5gv5d5y?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nPay attention to the addition of a <strong>view_selector<\/strong> dropdown for switching between Day, Week, and Month views, and a <strong>current_date<\/strong> span for displaying the currently viewed date.<\/p>\n<h5>Styling the Toolbar<\/h5>\n<p>To ensure our toolbar not only functions well but also looks the part, you add some CSS. These styles aim to create a modern and clean appearance that complements the Scheduler&#8217;s design:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">.dhx_cal_navline button <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; padding: 8px 15px;<br \/>\n&nbsp; &nbsp; <span class=\"kw3\">border<\/span>: none;<br \/>\n&nbsp; &nbsp; border-radius: 4px;<br \/>\n&nbsp; &nbsp; background-<span class=\"kw3\">color<\/span>: #007bff;<br \/>\n&nbsp; &nbsp; <span class=\"kw3\">color<\/span>: white;<br \/>\n&nbsp; &nbsp; cursor: pointer;<br \/>\n&nbsp; &nbsp; font-<span class=\"kw3\">size<\/span>: 14px;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n.dhx_cal_navline button:hover <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; background-<span class=\"kw3\">color<\/span>: #0056b3;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n.dhx_cal_navline input, .dhx_cal_navline select <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; padding: 8px;<br \/>\n&nbsp; &nbsp; <span class=\"kw3\">border<\/span>: 1px solid #ccc;<br \/>\n&nbsp; &nbsp; border-radius: 4px;<br \/>\n&nbsp; &nbsp; font-<span class=\"kw3\">size<\/span>: 14px;<br \/>\n&nbsp; &nbsp; background-<span class=\"kw3\">color<\/span>: white;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n#current_date <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; font-weight: bold;<br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/2v7n8ytu?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Bringing the Toolbar to Life<\/h5>\n<p>With the HTML and CSS in place, the next phase of our tutorial will involve writing JavaScript to integrate the new toolbar controls with the DHTMLX Scheduler&#8217;s functionality. This includes implementing the search functionality, event filtering, view switching, theme toggling, and dynamically updating the displayed date.<\/p>\n<h5>Implementing Event Search Functionality<\/h5>\n<p>To facilitate event searching within the DHTMLX Scheduler, you\u2019ll need to leverage the Scheduler&#8217;s filtering capabilities. This approach allows you to dynamically control which events are displayed based on the user&#8217;s search criteria. Here&#8217;s how to set it up:<\/p>\n<h6>Step 1: Define the Filter Function<\/h6>\n<p>First, you need to define a generic filter function that will be used across multiple views (Day, Week, Month). This function determines whether an event should be displayed based on the current <strong>filterValue<\/strong>.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">let filterValue <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Holds the current search term<\/span><br \/>\n<br \/>\n<span class=\"kw1\">function<\/span> filterFunction<span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Check if the event's text includes the filterValue<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> event.<span class=\"me1\">text<\/span>.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">includes<\/span><span class=\"br0\">&#40;<\/span>filterValue.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>By converting both the event&#8217;s text and <strong>filterValue<\/strong> to lowercase, you ensure that the search is case-insensitive, making it more user-friendly.<\/p>\n<h6>Step 2: Apply the Filter Function to Scheduler Views<\/h6>\n<p>After that, you assign <strong>filterFunction<\/strong> to each of the Scheduler&#8217;s view filters. Thus, the custom filtering logic will be applied consistently across different calendar views.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">scheduler.<span class=\"me1\">filter_day<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">filter_week<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">filter_month<\/span> <span class=\"sy0\">=<\/span> filterFunction<span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 3: Capture User Input for Filtering<\/h6>\n<p>Next, you set up an event listener on the search input to capture user input and update <strong>filterValue<\/strong>. Following the update, you call <strong>scheduler.render()<\/strong> to reapply the filters and update the display.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'event_search'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'input'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; filterValue <span class=\"sy0\">=<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">value<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Rerender the scheduler to apply the filter<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/guaygu5s?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nAs a result, when an end-user types into the search box, the calendar dynamically updates to show only the events that match the search term.<\/p>\n<h6>Full Example<\/h6>\n<p>Combining the above steps, here is how the JavaScript part integrates into the overall solution:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;DOMContentLoaded&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Initialize the scheduler here as per the previous setup<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ scheduler.init('scheduler_here', new Date(), &quot;week&quot;);<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; let filterValue <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Holds the current search term<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"kw1\">function<\/span> filterFunction<span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ If filterValue is empty, don't filter out any events<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"sy0\">!<\/span>filterValue<span class=\"br0\">&#41;<\/span> <span class=\"kw1\">return<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ Otherwise, return true if the event text includes the filterValue<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> event.<span class=\"me1\">text<\/span>.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">includes<\/span><span class=\"br0\">&#40;<\/span>filterValue.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Apply the filter function to all views<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">filter_day<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">filter_week<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">filter_month<\/span> <span class=\"sy0\">=<\/span> filterFunction<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Event listener for the search input<\/span><br \/>\n&nbsp; &nbsp; document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'event_search'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'input'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; filterValue <span class=\"sy0\">=<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">value<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scheduler.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Rerender the scheduler to apply the filter<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'scheduler_here'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2024<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">3<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">20<\/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<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h5>Implementing &#8220;Add Event&#8221; Button<\/h5>\n<p>The &#8220;Add Event&#8221; button enables users to quickly insert a new event into the scheduler. Using the <strong>scheduler.addEventNow()<\/strong> method, you can prompt the user with a form to enter the details of the new event. Here&#8217;s the JavaScript code to achieve this:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'add_event'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">addEventNow<\/span><span class=\"br0\">&#40;<\/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><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/0wgr55cm?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThis code listens for click events on the &#8216;Add Event&#8217; button and calls <strong>scheduler.addEventNow()<\/strong>, which opens the scheduler&#8217;s event creation form.<\/p>\n<h5>Implementing &#8220;Refresh&#8221; Button<\/h5>\n<p>The &#8220;Refresh&#8221; button is designed to clear the current event data from the scheduler and reload it from a specified source. This is particularly useful for fetching the latest event data, ensuring the scheduler displays up-to-date information. You can implement this feature with the following code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'refresh_events'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">clearAll<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">load<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;\/data&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><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/dlg9tkev?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThis code snippet attaches an event listener to the &#8216;Refresh&#8217; button, which clears the scheduler&#8217;s current data using <strong>scheduler.clearAll()<\/strong> and then reloads it by calling <strong>scheduler.load(&#8220;\/data&#8221;)<\/strong>. Replace <strong>&#8220;\/data&#8221;<\/strong> with the actual URL or endpoint where your event data is located.<\/p>\n<h5>Enhancing Event Management with Category Filtering<\/h5>\n<p>To further refine the custom toolbar for the DHTMLX Scheduler, you add a category-based event filtering feature. It will allow end-users to filter events displayed on the scheduler based on predefined categories such as &#8220;Meetings&#8221;, &#8220;Appointments&#8221;, and &#8220;Personal&#8221;. By utilizing the same <strong>filterFunction<\/strong> implemented for the search functionality, you can seamlessly incorporate category filtering. <\/p>\n<p>Here\u2019s a step-by-step instruction on how to do it:<\/p>\n<h6>Step 1: Update Filter Function<\/h6>\n<p>First, you need to modify <strong>filterFunction<\/strong> to account for both the search input and the selected category from the <strong>&#8220;event_filter&#8221;<\/strong> dropdown. You have to introduce an additional variable to hold the selected category value and update the filter logic accordingly:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">let filterValue <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Holds the current search term<\/span><br \/>\nlet filterCategory <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;all&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Holds the selected category for filtering<\/span><br \/>\n<br \/>\n<span class=\"kw1\">function<\/span> filterFunction<span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Check if the event matches the search term<\/span><br \/>\n&nbsp; &nbsp; let matchesSearch <span class=\"sy0\">=<\/span> event.<span class=\"me1\">text<\/span>.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">includes<\/span><span class=\"br0\">&#40;<\/span>filterValue.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ Check if the event matches the selected category (or if 'all' is selected)<\/span><br \/>\n&nbsp; &nbsp; let matchesCategory <span class=\"sy0\">=<\/span> filterCategory <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;all&quot;<\/span> <span class=\"sy0\">||<\/span> event.<span class=\"me1\">category<\/span> <span class=\"sy0\">===<\/span> filterCategory<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> matchesSearch <span class=\"sy0\">&amp;&amp;<\/span> matchesCategory<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>In this updated <strong>filterFunction<\/strong>, check that an event matches both the search term and the selected category to be displayed.<\/p>\n<h6>Step 2: Capture Category Selection Changes<\/h6>\n<p>Next, it is necessary to add an event listener to the &#8220;event_filter&#8221; dropdown to update the <strong>filterCategory<\/strong> variable whenever the user selects a different category. After updating the variable, call <strong>scheduler.render()<\/strong> to reapply the filters and refresh the display:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'event_filter'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'change'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; filterCategory <span class=\"sy0\">=<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">value<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Rerender the scheduler to apply the new filter<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/gbfr4hbb?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Implementing View Selector<\/h5>\n<p>As part of custom toolbar enhancements for the DHTMLX Scheduler, let\u2019s bring the view selector introduced earlier into action. This control allows end-users to easily switch between the Day, Week, and Month views, enhancing the application&#8217;s navigational experience directly from the toolbar. Here&#8217;s how to activate the view selector:<\/p>\n<h6>Activating the View Selector<\/h6>\n<p>To make the view selector operational, you should add an event listener that updates the scheduler&#8217;s current view based on the user&#8217;s selection. This functionality is crucial for providing a seamless user interface that allows for flexible viewing options. The following JavaScript code snippet accomplishes this:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'view_selector'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'change'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; let view <span class=\"sy0\">=<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">value<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">setCurrentView<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"sy0\">,<\/span> view<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ Update the scheduler to the selected view<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/mgkkn4kn?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThis code listens for changes to the view selector and calls <strong>scheduler.setCurrentView(null, view)<\/strong>, effectively updating the scheduler&#8217;s display to the selected view. The <strong>null<\/strong> argument signifies that the scheduler should use the current date when switching views, ensuring a smooth transition for end-users.<\/p>\n<h5>Theme Toggle Button<\/h5>\n<p>It is great to have at your disposal built-in themes to adjust the UI appearance to your preference. To make things more convenient, let us show you how to integrate a theme toggle button in your custom toolbar.<\/p>\n<h6>Toggling Between Light and Dark Themes<\/h6>\n<p>To achieve this, you add an event listener to the &#8220;Toggle Theme&#8221; button. This listener checks the current theme of the scheduler and switches it accordingly:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'toggle_theme'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>scheduler.<span class=\"me1\">skin<\/span> <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;terrace&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scheduler.<span class=\"me1\">setSkin<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;dark&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scheduler.<span class=\"me1\">setSkin<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;terrace&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/i5kfk4ob?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThis feature will enable end-users to switch between the terrace (light) and dark themes on their preference with a single click.<\/p>\n<h5>Implementing Navigation Functionality<\/h5>\n<h6>Today Button<\/h6>\n<p>The &#8220;Today&#8221; button should reset the scheduler&#8217;s view to the current date. This button can be added with the following piece of JavaScript code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'today_button'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">setCurrentView<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">mode<\/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><\/div><\/div>\n<h6>Previous and Next Buttons<\/h6>\n<p>The &#8220;Previous&#8221; and &#8220;Next&#8221; buttons allow end-users to navigate to the adjacent date range based on the current view (Day, Week, Month). Here&#8217;s how to set them up:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ Previous Button<\/span><br \/>\ndocument.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'prev_button'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">setCurrentView<\/span><span class=\"br0\">&#40;<\/span>scheduler.<span class=\"me1\">date<\/span>.<span class=\"me1\">add<\/span><span class=\"br0\">&#40;<\/span>scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">date<\/span><span class=\"sy0\">,<\/span> <span class=\"sy0\">-<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">mode<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">mode<\/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 \/>\n<span class=\"co1\">\/\/ Next Button<\/span><br \/>\ndocument.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'next_button'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">setCurrentView<\/span><span class=\"br0\">&#40;<\/span>scheduler.<span class=\"me1\">date<\/span>.<span class=\"me1\">add<\/span><span class=\"br0\">&#40;<\/span>scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">date<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">mode<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">mode<\/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><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/5etp7m6t?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThese buttons utilize the <strong>scheduler.date.add()<\/strong> method to calculate the date to switch to, ensuring compatibility across different views.<\/p>\n<h5>Updating the Displayed Date<\/h5>\n<p>To keep end-users informed of the current date range or day being viewed, you can dynamically update a span in the toolbar with the current date information. This enhances the scheduler&#8217;s usability by providing context to the displayed events.<\/p>\n<h6>Dynamically Displaying the Current Date<\/h6>\n<p>You need to utilize the Scheduler&#8217;s <strong>onViewChange<\/strong> event to update the <strong>current_date<\/strong> element whenever the view or date range changes:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">scheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onViewChange&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>new_mode<span class=\"sy0\">,<\/span> new_date<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> <span class=\"br0\">&#123;<\/span>min_date<span class=\"sy0\">,<\/span> max_date<span class=\"sy0\">,<\/span> mode<span class=\"br0\">&#125;<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;current_date&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">templates<\/span><span class=\"br0\">&#91;<\/span>`$<span class=\"br0\">&#123;<\/span>new_mode<span class=\"br0\">&#125;<\/span>_date`<span class=\"br0\">&#93;<\/span><span class=\"br0\">&#40;<\/span>min_date<span class=\"sy0\">,<\/span> max_date<span class=\"sy0\">,<\/span> mode<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><\/div><\/div>\n<p>This setup ensures that the displayed date always reflects the current view, whether it&#8217;s a specific day, week, or month, enhancing the overall coherence and functionality of the scheduler interface.<\/p>\n<h5>Conclusion<\/h5>\n<p>Throughout this article, we&#8217;ve explored how to significantly enhance the DHTMLX Scheduler by adding a custom toolbar. This toolbar not only improves the application&#8217;s aesthetics but also introduces powerful features that enhance user interaction and accessibility. By implementing a search functionality, category-based event filtering, dynamic view switching, a theme toggle button, and an automatically updating current date display, we&#8217;ve provided users with a comprehensive toolset to manage and navigate their schedules efficiently.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using JavaScript UI libraries in a web project, you have to be sure that your tool is customizable enough to meet specific requirements and user preferences. DHTMLX Scheduler &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":12360,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,15],"class_list":["post-12355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12355","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\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=12355"}],"version-history":[{"count":17,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12355\/revisions"}],"predecessor-version":[{"id":12357,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12355\/revisions\/12357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/12360"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=12355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=12355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=12355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}