{"id":1291,"date":"2011-08-26T17:10:51","date_gmt":"2011-08-26T13:10:51","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=1291"},"modified":"2026-04-28T16:04:20","modified_gmt":"2026-04-28T13:04:20","slug":"build-meeting-room-booking-system-with-dhtmlxscheduler-for-asp-net-mvc","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/build-meeting-room-booking-system-with-dhtmlxscheduler-for-asp-net-mvc\/","title":{"rendered":"Build Room Booking System with dhtmlxScheduler (for ASP.NET MVC)"},"content":{"rendered":"\n        <div class=\"info-block\">\n            <div class=\"info-icon\">\n                <svg viewBox=\"0 0 14 16\">\n                    <path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"><\/path>\n                <\/svg>\n\n                INFO\n            <\/div>\n\n            <div class=\"info-content\">\n                <p>\n                    For new clients, we recommend using <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" title=\"\">DHTMLX Scheduler<\/a> and \n                    integrating it with .NET by following our official <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/integrations\/dotnet\/howtostart-dotnet-core\/\" title=\"\" target=\"_blank\">guide<\/a>.                    \n                <\/p>\n            <\/div>\n        <\/div>\n    \n<p>In the previous <a href=\"https:\/\/dhtmlx.com\/blog\/dhtmlxscheduler-for-net-mvc\/\">MVC-related tutorial<\/a> we described how to integrate dhtmlxScheduler into an ASP.NET MVC application. After publication, we received plenty of feedback, reflecting that the tutorial was helpful to many of ASP.NET MVC developers. Therefore we decided to continue this series and show you how to extend the calendar functionality to implement a room booking system.<\/p>\n<p>In this tutorial we&#8217;ll go further and add multi-user functionality to the scheduling system, allowing different users to make changes in the calendar simultaneously without impacting each other. As we already said, we&#8217;ll create a meeting room booking system which will look like on the screenshot below.<\/p>\n<p><strong>Download<\/strong>: <a href=\"https:\/\/dhtmlx.com\/\/x\/download\/regular\/tutorials\/scheduler_booking.zip\">the final package of the booking calendar for ASP.NET MVC<\/a><\/p>\n<div id=\"attachment_1293\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1293\" class=\"size-full wp-image-1293\" title=\"Room Booking Calendar with dhtmlxScheduler\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar.png\" alt=\"Room Booking Calendar with dhtmlxScheduler\" width=\"600\" height=\"332\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar-300x166.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1293\" class=\"wp-caption-text\">Room Booking Calendar with dhtmlxScheduler<\/p><\/div>\n<p><!--more--><br \/>\nIn the end of the tutorial we should get a ready-to-use event scheduling application that allows end-users to add, delete, edit, and move events between rooms. Since we&#8217;re going to continue our previous tutorial, it&#8217;s assumed that you have already learned how to integrate the calendar into an ASP.NET MVC application. If not, please read it first: <a href=\"https:\/\/dhtmlx.com\/blog\/dhtmlxscheduler-for-net-mvc\/\">&#8220;Appointment Calendar for ASP.NET MVC with dhtmlxScheduler&#8221;<\/a>.<br \/>\n<strong>Setting Goals<\/strong><\/p>\n<p>Now I will describe how to extend the functionality of our calendar to make it a complete, real-life web application. Here is the list of the features we&#8217;re going to implement:<\/p>\n<ul>\n<li>Events can be created only by authorized users<\/li>\n<li>A user can edit only events that he created<\/li>\n<li>Expired events can&#8217;t be edited<\/li>\n<li>Each event can be assigned only to one room from a list<\/li>\n<li>Users can see events by assigned room (room view)<\/li>\n<li>Users can see all events within a week (week agenda view)<\/li>\n<li>Events created by different users are colored differently<\/li>\n<\/ul>\n<p>The list is not short, and you would spend a lot of time trying to implement such an application from scratch. Fortunately, most of the requirements can be achieved by using dhtmlxScheduler extensions and standard ASP.NET MVC solutions. So I believe we&#8217;ll manage to complete this task within half an hour.<\/p>\n<h5>Step 1 &#8211; Getting Started<\/h5>\n<p>In the previous tutorial we used dhtmlxScheduler 2.6, but recently the new version 3.0 has been released. The update includes lots of small bug-fixes and offers a number of new useful features that we might need.<\/p>\n<p>So at first you need to update the dhtmlxScheduler package (available under GNU GPL). You can grab the most recent version from the <a href=\"https:\/\/dhtmlx.com\/docs\/download\/\">Downloads page<\/a>. After you download the package, copy the content from the folder &#8216;codebase&#8217; to the folder &#8216;Scripts&#8217; of your project, like we made before with the files of dhtmlxScheduler 2.x (new files will overwrite the old ones).<\/p>\n<p>The new features that we will use in our booking application are:<\/p>\n<ul>\n<li><strong>simple event colors<\/strong> (to set different colors for events created by each user)<\/li>\n<li><strong>Week Agenda View<\/strong> (allows end-user to see all events within the current week)<\/li>\n<\/ul>\n<h5>Step 2 &#8211; Database Structure and .NET Membership<\/h5>\n<p>Our database should store information about available rooms and users that have access to the system. So let&#8217;s create a table &#8216;Rooms&#8217; in our database with the following columns:<\/p>\n<ul>\n<li><strong>room_id<\/strong> &#8211; id of the room<\/li>\n<li><strong>title<\/strong> &#8211; name of the room<\/li>\n<\/ul>\n<p>In order not to create user infrastructure manually, we will use the build-in <strong>ASP.NET Membership<\/strong> utility.<\/p>\n<p>All we need to do is:<\/p>\n<p><strong>1.<\/strong> Run ASP.NET SQL Server Registration Tool (Aspnet_regsql.exe). The tool comes with the .NET framework and can be found under:<br \/>\nC:\\WINDOWS\\Microsoft.NET\\Framework\\\\aspnet_regsql.exe.<\/p>\n<p>Run the tool with the following keys:<br \/>\n<strong><\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">aspnet_regsql.exe -E -S -d -A m<\/div><\/div>\n<p><\/strong><\/p>\n<p>It will create several tables (and a database, if it doesn&#8217;t exist yet):<\/p>\n<ul>\n<li>aspnet_Applications<\/li>\n<li>aspnet_Membership<\/li>\n<li>aspnet_SchemaVersions<\/li>\n<li>aspnet_Users<\/li>\n<\/ul>\n<p>All these tables are used by the ASP.NET Membership for providing its functionality. We should edit only the table <strong>aspnet_Users<\/strong> by adding a column &#8216;color&#8217; into it.<\/p>\n<ul>\n<li><strong>color<\/strong> &#8211; the color of user&#8217;s events<\/li>\n<\/ul>\n<p>To simplify things, let&#8217;s rename the mapping table &#8216;aspnet_User&#8217; to &#8216;User&#8217; and leave just the columns we will use, such as:<\/p>\n<ul>\n<li>UserId<\/li>\n<li>UserName<\/li>\n<li>color<\/li>\n<\/ul>\n<p><strong>2.<\/strong> Customize authorization-related controllers and views.<\/p>\n<p>We will use the controllers and views generated by a standard MVC project. So you don&#8217;t need to create any new files, you just need to alter the existing ones a little:<\/p>\n<ul>\n<li>change the redirect path in the &#8216;AccountController.cs&#8217;<\/li>\n<li>remove default css processing<\/li>\n<\/ul>\n<p>To link users and rooms with events, we add two more columns to the table &#8216;Events&#8217;:<\/p>\n<ul>\n<li><strong>room_id<\/strong> &#8211; a foreign key for the &#8216;Rooms&#8217; table<\/li>\n<li><strong>user_id<\/strong> &#8211; a foreign key for the &#8216;aspnet_Users&#8217; table<\/li>\n<\/ul>\n<p>When you finish with this (created all the needed tables and added the missing columns), don&#8217;t forget to refresh MyEvents.dbml.<\/p>\n<p><strong>NOTE:<\/strong> If you don&#8217;t want to edit DB manually you can use db from the package with the sample files. It contains all needed tables and columns.<\/p>\n<div id=\"attachment_1324\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1324\" class=\"size-full wp-image-1324\" title=\"Database Tables\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/2.png\" alt=\"Database Tables\" width=\"600\" height=\"393\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/2.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/2-300x196.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1324\" class=\"wp-caption-text\">Database Tables<\/p><\/div>\n<h5>Step 3 &#8211; Authentication<\/h5>\n<p>Now all required conditions for authentication are provided, so we can add this functionality to our calendar. For that, we will need to make 3 things:<\/p>\n<p><strong>1.<\/strong> Add settings into the <strong>Web.config<\/strong> file:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"sy0\">&lt;<\/span>membership defaultProvider<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;CustomMembershipProvider&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>providers<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>clear<span class=\"sy0\">\/&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>add name<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;CustomMembershipProvider&quot;<\/span> type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;System.Web.Security.SqlMembershipProvider&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;connectionStringName<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;MyCalendarConnectionString&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;enablePasswordRetrieval<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;false&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;enablePasswordReset<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;true&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;requiresQuestionAndAnswer<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;false&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;requiresUniqueEmail<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;false&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;maxInvalidPasswordAttempts<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;5&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;minRequiredPasswordLength<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;1&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;minRequiredNonalphanumericCharacters<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;0&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;passwordAttemptWindow<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;10&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;applicationName<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;\/&quot;<\/span> <span class=\"sy0\">\/&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;\/<\/span>providers<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>membership<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Here &#8216;MyCalendarConnectionString&#8217; is the name of the &#8216;connectionString&#8217; attribute set in the same file. Generated views and controllers don&#8217;t need any corrections.<br \/>\n<strong>2.<\/strong> It&#8217;s not necessary that our app will have free registration, so we can remove the registration link from LogOn.aspx and related &#8216;action&#8217; from the controller.<\/p>\n<p><strong>NOTE:<\/strong> In our sample we use a db that contains 2 test users. You can use the following username\/password pairs to log in:<\/p>\n<ul>\n<li>username &#8211; test, password &#8211; test<\/li>\n<li>username &#8211; user, password &#8211; user<\/li>\n<\/ul>\n<p><strong>3.<\/strong> Add a link to LogOn in the <strong>Index.aspx<\/strong> file. <strong>View\/Calendar\/Index.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\">...<br \/>\n<span class=\"sy0\">&lt;<\/span><span class=\"kw3\">div<\/span> class<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_navline&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span><span class=\"kw3\">div<\/span> class<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;right:420px;height:23px;&quot;<\/span><span class=\"sy0\">&gt;<\/span> <span class=\"sy0\">&lt;%<\/span> Html.<span class=\"me1\">RenderPartial<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;LogOnUserControl&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"sy0\">%&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n...<\/div><\/div>\n<p>After all these steps we&#8217;ll get a working calendar system which contains a user login form.<\/p>\n<div id=\"attachment_1327\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1327\" class=\"size-full wp-image-1327\" title=\"Scheduler - Month View\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/3.png\" alt=\"Scheduler - Month View\" width=\"600\" height=\"347\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/3.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/3-300x173.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1327\" class=\"wp-caption-text\">Scheduler &#8211; Month View<\/p><\/div>\n<p><strong>Step 4 &#8211; User Access Security<\/strong><\/p>\n<p>To provide user access control (according to our requirements), we need to add some checks on both client and server side.<\/p>\n<p>Server-side checks are needed to provide security of the application. Client-side checks do not affect the application security and we could do without them, but it would make our system slow. So, we will define client-side checks to provide better performance and real-time user experience.<\/p>\n<p>Client-side rules &#8211; <strong>Views\/Calendar\/Index.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"sy0\">&lt;<\/span>script type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"sy0\">&gt;<\/span><span class=\"co1\">\/\/ &lt;![CDATA[<\/span><br \/>\n<span class=\"co1\">\/\/stores the name of the user in js var<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;%<\/span> <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>Request.<span class=\"me1\">IsAuthenticated<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span> <span class=\"sy0\">%&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scheduler._user_id <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&lt;%= Model.User.UserId %&gt;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scheduler._color <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&lt;%= Model.User.color %&gt;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;%<\/span><span class=\"br0\">&#125;<\/span> <span class=\"sy0\">%&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/blocks all operations for non-authenticated users<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">readonly<\/span> <span class=\"sy0\">=<\/span> <span class=\"sy0\">&lt;%=<\/span> Request.<span class=\"me1\">IsAuthenticated<\/span> <span class=\"sy0\">?<\/span> <span class=\"st0\">&quot;false&quot;<\/span> <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;true&quot;<\/span> <span class=\"sy0\">%&gt;;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/checks if an event belongs to a certain user and it's not started yet<\/span><br \/>\n&nbsp; &nbsp; var isEditable <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>event_id<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; var ev <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">getEvent<\/span><span class=\"br0\">&#40;<\/span>event_id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span>ev <span class=\"sy0\">&amp;&amp;<\/span> ev.<span class=\"me1\">start_date<\/span> <span class=\"sy0\">&gt;<\/span> new Date<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">&amp;&amp;<\/span> ev.<span class=\"me1\">user_id<\/span> <span class=\"sy0\">==<\/span> scheduler._user_id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/blocks operations for non-owned events<\/span><br \/>\nscheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onBeforeLightbox&quot;<\/span><span class=\"sy0\">,<\/span> isEditable<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onBeforeDrag&quot;<\/span><span class=\"sy0\">,<\/span> isEditable<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onClick&quot;<\/span><span class=\"sy0\">,<\/span> isEditable<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onDblClick&quot;<\/span><span class=\"sy0\">,<\/span>isEditable<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> &nbsp; &nbsp; &nbsp;<br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/each time as a new event is created - it assigns a user, color and room<\/span><br \/>\n&nbsp; &nbsp; scheduler.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onEventCreated&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>event_id<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; var ev <span class=\"sy0\">=<\/span> scheduler.<span class=\"me1\">getEvent<\/span><span class=\"br0\">&#40;<\/span>event_id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>ev.<span class=\"me1\">start_date<\/span> <span class=\"sy0\">&lt;<\/span> new Date<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span> scheduler.<span class=\"me1\">deleteEvent<\/span><span class=\"br0\">&#40;<\/span>event_id<span class=\"sy0\">,<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span> ev.<span class=\"me1\">user_id<\/span> <span class=\"sy0\">=<\/span> scheduler._user_id<span class=\"sy0\">;<\/span> ev.<span class=\"me1\">textColor<\/span> <span class=\"sy0\">=<\/span> scheduler._color<span class=\"sy0\">;<\/span> <span class=\"kw1\">return<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"co1\">\/\/ ]]&gt;&lt;\/script&gt;<\/span><\/div><\/div>\n<p>We will add the same rules to the server-side. If a user is not authorized to edit the events, or a user name doesn&#8217;t match the name of the current user, then changes won&#8217;t be saved and &#8216;error&#8217; will be returned.<\/p>\n<p><strong>Controllers\/CalendarController.cs<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\">public ActionResult Save<span class=\"br0\">&#40;<\/span>Event changedEvent<span class=\"sy0\">,<\/span> FormCollection actionValues<span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n...<br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>Request.<span class=\"me1\">IsAuthenticated<\/span> <span class=\"sy0\">&amp;<\/span>amp<span class=\"sy0\">;&amp;<\/span>amp<span class=\"sy0\">;<\/span> changedEvent.<span class=\"me1\">user_id<\/span> <span class=\"sy0\">==<\/span> <span class=\"br0\">&#40;<\/span>Guid<span class=\"br0\">&#41;<\/span>Membership.<span class=\"me1\">GetUser<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ProviderUserKey<\/span> <span class=\"sy0\">&amp;<\/span>amp<span class=\"sy0\">;&amp;<\/span>amp<span class=\"sy0\">;<\/span> changedEvent.<span class=\"me1\">start_date<\/span> <span class=\"sy0\">&amp;<\/span>gt<span class=\"sy0\">;<\/span> DateTime.<span class=\"me1\">Now<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n...<br \/>\n<span class=\"co1\">\/\/default processing logic<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"kw1\">else<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\naction_type <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;error&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>We have a few last things left at this step. We need to include the information about the event holder to our data feed and pass the needed models from the <strong>Index.aspx<\/strong> controller to the view.<\/p>\n<p><strong>Views\/Calendar\/Data.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;%<\/span> foreach <span class=\"br0\">&#40;<\/span>var myevent in Model<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"sy0\">%&amp;<\/span>gt<span class=\"sy0\">;<\/span><br \/>\n<span class=\"st0\">&quot;&amp;gt;<br \/>\n&lt;![CDATA[&lt;%= String.Format(&quot;<\/span><span class=\"br0\">&#123;<\/span><span class=\"nu0\">0<\/span><span class=\"sy0\">:<\/span>dd<span class=\"sy0\">\/<\/span>MM<span class=\"sy0\">\/<\/span>yyyy HH<span class=\"sy0\">:<\/span>mm<span class=\"br0\">&#125;<\/span><span class=\"st0\">&quot;,myevent.start_date) %&gt;]]&gt;<br \/>\n&lt;![CDATA[&lt;%= String.Format(&quot;<\/span><span class=\"br0\">&#123;<\/span><span class=\"nu0\">0<\/span><span class=\"sy0\">:<\/span>dd<span class=\"sy0\">\/<\/span>MM<span class=\"sy0\">\/<\/span>yyyy HH<span class=\"sy0\">:<\/span>mm<span class=\"br0\">&#125;<\/span><span class=\"st0\">&quot;,myevent.end_date) %&gt;]]&gt;<br \/>\n&lt;![CDATA[&lt;%= Html.Encode(myevent.text)%&gt;]]&gt;<br \/>\n&lt;![CDATA[&lt;%= myevent.room_id %&gt;]]&gt;<br \/>\n&lt;![CDATA[&lt;%= myevent.username %&gt;]]&gt;<br \/>\n<br \/>\n&amp;lt;% } %&amp;gt;<\/span><\/div><\/div>\n<p>Also, we will specify the property &#8216;color&#8217; for events. From this moment on, events created by a each user will be colored into appropriate color. Expired events, which can&#8217;t be edited, will be showed in grey color as disabled.<\/p>\n<p><strong>Views\/Calendar\/Data.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\">public ActionResult Index<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\nMyEventsDataContext context <span class=\"sy0\">=<\/span> new MyEventsDataContext<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\nUser current_user <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>Request.<span class=\"me1\">IsAuthenticated<\/span><span class=\"br0\">&#41;<\/span><br \/>\ncurrent_user <span class=\"sy0\">=<\/span> context.<span class=\"me1\">Users<\/span>.<span class=\"me1\">SingleOrDefault<\/span><span class=\"br0\">&#40;<\/span>user <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> user.<span class=\"me1\">UserId<\/span> <span class=\"sy0\">==<\/span> <span class=\"br0\">&#40;<\/span>Guid<span class=\"br0\">&#41;<\/span>Membership.<span class=\"me1\">GetUser<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ProviderUserKey<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"kw1\">return<\/span> View<span class=\"br0\">&#40;<\/span>new CalendarModel<span class=\"br0\">&#40;<\/span>current_user<span class=\"sy0\">,<\/span> context.<span class=\"me1\">Rooms<\/span>.<span class=\"me1\">ToList<\/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>Here &#8216;CalendarModel&#8217; is a class that contains information about the current user and available rooms (creating a list of available rooms is our next step).<\/p>\n<p>This is how our Scheduler will look like. In Month View we can see the events displayed in different colors by a user who created them. The old events are displayed in grey color and can&#8217;t be edited.<\/p>\n<div id=\"attachment_1331\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1331\" class=\"size-full wp-image-1331\" title=\"Room Booking Calendar - Colored Events\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/4.png\" alt=\"Room Booking Calendar - Colored Events\" width=\"600\" height=\"304\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/4.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/4-300x152.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1331\" class=\"wp-caption-text\">Room Booking Calendar &#8211; Colored Events<\/p><\/div>\n<p>After these changes, we&#8217;ve achieved our main goal and created a multi-user calendar. All users can see all the events, but events can be edited only by a user who created them.<\/p>\n<p><strong>Step 5 &#8211; Agenda View and Unit (Room) View<\/strong><\/p>\n<p>In compliance with the requirements we&#8217;ve set in the beginning, we will add the ability to show events by room and view all events within the current week.<\/p>\n<p>To see the list of events taking place within the current week, we can use Week Agenda View, a new feature available in dhtmlxScheduler 3.0. All we need to do is to add the appropriate script and button to the <strong>Index.aspx<\/strong> file.<\/p>\n<p><strong>Views\/Calendar\/Index.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"sy0\">&lt;<\/span>script src<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;\/Scripts\/ext\/dhtmlxscheduler_week_agenda.js&quot;<\/span> type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp;...<br \/>\n<span class=\"sy0\">&lt;<\/span><span class=\"kw3\">div<\/span> class<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_tab&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;right: 278px;&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>&nbsp;<\/p>\n<p>The image below shows how our booking calendar will look in Week Agenda View. We can see the list of events assigned per each day of the week.<\/p>\n<div id=\"attachment_1333\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1333\" class=\"size-full wp-image-1333\" title=\"Room Booking Calendar - Week Agenda View\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/5.png\" alt=\"Room Booking Calendar - Week Agenda View\" width=\"600\" height=\"312\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/5.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/5-300x156.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1333\" class=\"wp-caption-text\">Room Booking Calendar &#8211; Week Agenda View<\/p><\/div>\n<p>To show events by the assigned room, we will use Unit View of dhtmlxScheduler. Let&#8217;s make the necessary modifications in the <strong>Index.aspx<\/strong> file:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"sy0\">&lt;<\/span>script src<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;\/Scripts\/ext\/dhtmlxscheduler_units.js&quot;<\/span> type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n...<br \/>\n<span class=\"sy0\">&lt;<\/span><span class=\"kw3\">div<\/span> class<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhx_cal_tab&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;right: 214px;&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Also, we should add JavaScript code to configure the new view in the calendar.<br \/>\n<strong>Views\/Calendar\/Index.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\">scheduler.<span class=\"me1\">locale<\/span>.<span class=\"me1\">labels<\/span>.<span class=\"me1\">units_tab<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'Rooms'<\/span><span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">locale<\/span>.<span class=\"me1\">labels<\/span>.<span class=\"me1\">section_room<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;Room:&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"co1\">\/\/a list of rooms<\/span><br \/>\nvar rooms <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;%<\/span> <span class=\"kw1\">for<\/span><span class=\"br0\">&#40;<\/span>var i <span class=\"sy0\">=<\/span><span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span> i <span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;<\/span> Model.<span class=\"me1\">Rooms<\/span>.<span class=\"me1\">Count<\/span><span class=\"sy0\">;<\/span> i<span class=\"sy0\">++<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span> <span class=\"sy0\">%&amp;<\/span>gt<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span>key<span class=\"sy0\">:&amp;<\/span>lt<span class=\"sy0\">;%=<\/span> Model.<span class=\"me1\">Rooms<\/span><span class=\"br0\">&#91;<\/span>i<span class=\"br0\">&#93;<\/span>.<span class=\"me1\">room_id<\/span> <span class=\"sy0\">%&amp;<\/span>gt<span class=\"sy0\">;,<\/span> label<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;&amp;lt;%= Html.Encode(Model.Rooms[i].title) %&amp;gt;&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;%=<\/span> i<br \/>\n<span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;%<\/span> <span class=\"br0\">&#125;<\/span> <span class=\"sy0\">%&amp;<\/span>gt<span class=\"sy0\">;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"co1\">\/\/helper, returns room number by id<\/span><br \/>\n<span class=\"kw2\">function<\/span> getRoom<span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">for<\/span><span class=\"br0\">&#40;<\/span>var i in rooms<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>rooms<span class=\"br0\">&#91;<\/span>i<span class=\"br0\">&#93;<\/span>.<span class=\"me1\">key<\/span> <span class=\"sy0\">==<\/span> id<span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"kw1\">return<\/span> rooms<span class=\"br0\">&#91;<\/span>i<span class=\"br0\">&#93;<\/span>.<span class=\"me1\">label<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n<span class=\"co1\">\/\/units view<\/span><br \/>\nscheduler.<span class=\"me1\">createUnitsView<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"st0\">&quot;name&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;units&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">&quot;list&quot;<\/span><span class=\"sy0\">:<\/span> rooms<span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">&quot;property&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;room_id&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Now we can see events by room number. This view allows users to check the availability of each room and find the best place and time for each event.<\/p>\n<div id=\"attachment_1335\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1335\" class=\"size-full wp-image-1335\" title=\"Room Booking Calendar - Unit View\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/6.png\" alt=\"Room Booking Calendar - Unit View\" width=\"600\" height=\"292\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/6.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/6-300x146.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1335\" class=\"wp-caption-text\">Room Booking Calendar &#8211; Unit View<\/p><\/div>\n<p><strong>Step 6 &#8211; Providing Better User Experience<\/strong><\/p>\n<p>To simplify user interactions with the calendar, we will add the ability to select a room number directly from the event lightbox of the calendar. To achive this, we will define our own configuration for the event details form instead of the default one in the <strong>Index.aspx<\/strong> file:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"co1\">\/\/lightbox configuration<\/span><br \/>\nscheduler.<span class=\"me1\">config<\/span>.<span class=\"me1\">lightbox<\/span>.<span class=\"me1\">sections<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;description&quot;<\/span><span class=\"sy0\">,<\/span>height<span class=\"sy0\">:<\/span><span class=\"nu0\">200<\/span><span class=\"sy0\">,<\/span>map_to<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span>type<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;textarea&quot;<\/span><span class=\"sy0\">,<\/span>focus<span class=\"sy0\">:!<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;room&quot;<\/span><span class=\"sy0\">,<\/span>map_to<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;room_id&quot;<\/span><span class=\"sy0\">,<\/span>type<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;select&quot;<\/span><span class=\"sy0\">,<\/span>options<span class=\"sy0\">:<\/span>rooms<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;time&quot;<\/span><span class=\"sy0\">,<\/span>height<span class=\"sy0\">:<\/span><span class=\"nu0\">72<\/span><span class=\"sy0\">,<\/span>type<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;time&quot;<\/span><span class=\"sy0\">,<\/span>map_to<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;auto&quot;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Our custom event lightbox now has an additional select box with room numbers:<\/p>\n<div id=\"attachment_1336\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1336\" class=\"size-full wp-image-1336\" title=\"Room Booking Calendar - Custom Event Lightbox\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/7.png\" alt=\"Room Booking Calendar - Custom Event Lightbox\" width=\"600\" height=\"329\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/7.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/7-300x164.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1336\" class=\"wp-caption-text\">Room Booking Calendar &#8211; Custom Event Lightbox<\/p><\/div>\n<p>To give users more information about the event, we can add room number to the event description. Add in <strong>Views\/Calendar\/Index.aspx<\/strong>:<\/p>\n<div class=\"codecolorer-container c default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"c codecolorer\"><span class=\"co1\">\/\/custom event text<\/span><br \/>\n<span class=\"kw2\">function<\/span> template<span class=\"br0\">&#40;<\/span>start<span class=\"sy0\">,<\/span>end<span class=\"sy0\">,<\/span>ev<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">return<\/span> getRoom<span class=\"br0\">&#40;<\/span>ev.<span class=\"me1\">room_id<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot; : &quot;<\/span> <span class=\"sy0\">+<\/span> ev.<span class=\"me1\">text<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\nscheduler.<span class=\"me1\">templates<\/span>.<span class=\"me1\">event_text<\/span> <span class=\"sy0\">=<\/span> template<span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">templates<\/span>.<span class=\"me1\">agenda_text<\/span> <span class=\"sy0\">=<\/span> template<span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">templates<\/span>.<span class=\"me1\">event_bar_text<\/span> <span class=\"sy0\">=<\/span> template<span class=\"sy0\">;<\/span><br \/>\nscheduler.<span class=\"me1\">templates<\/span>.<span class=\"me1\">week_agenda_event_text<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>start_date<span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">,<\/span> event<span class=\"sy0\">,<\/span> date<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">return<\/span> scheduler.<span class=\"me1\">templates<\/span>.<span class=\"me1\">event_date<\/span><span class=\"br0\">&#40;<\/span>start_date<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot; &quot;<\/span> <span class=\"sy0\">+<\/span> template<span class=\"br0\">&#40;<\/span>start_date<span class=\"sy0\">,<\/span> end_date<span class=\"sy0\">,<\/span> event<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>And again, here is the final look of our room booking calendar:<\/p>\n<div id=\"attachment_1293-2\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1293-2\" class=\"size-full wp-image-1293\" title=\"Room Booking Calendar with dhtmlxScheduler\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar.png\" alt=\"Room Booking Calendar with dhtmlxScheduler\" width=\"600\" height=\"332\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2011\/08\/1_booking_calendar-300x166.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1293-2\" class=\"wp-caption-text\">Room Booking Calendar with dhtmlxScheduler<\/p><\/div>\n<p>If you have followed these 6 steps of our tutorial, you now have a multi-user calendar that allows end-users to easily book meeting rooms and arrange the events between rooms.<br \/>\nReferring back to the assigned requirements, you can see that each requirement has been fully implemented and it all took us about 30 minutes. The impressive result for such a complex application, huh? :)<\/p>\n<p>You can download the <a href=\"https:\/\/dhtmlx.com\/\/x\/download\/regular\/tutorials\/scheduler_booking.zip\">final Room Booking Calendar package with all files and assets<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous MVC-related tutorial we described how to integrate dhtmlxScheduler into an ASP.NET MVC application. After publication, we received plenty of feedback, reflecting that the tutorial was helpful &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3366,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,37,14,15],"class_list":["post-1291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-asp-net","tag-tips","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1291","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=1291"}],"version-history":[{"count":20,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1291\/revisions"}],"predecessor-version":[{"id":15455,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1291\/revisions\/15455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3366"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=1291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=1291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=1291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}