Weekly Scheduling Calendar In MVC

To make a weekdays calender in MVC, firstly, we need to enter a few fields such as dates ,starting time, end time and duration between slots.

form

Let's start doing coding part for this design. I am making this form in mvc with entity Framework.

Here I am showing Code of Create.cshtml Page,

  1. @model RecruitingOutboundScheduler.Domain.recr_recruiterShift  
  2.   
  3. @{  
  4.     ViewBag.Title = "Create";  
  5. }  
  6.   
  7. <h2>Create</h2>  
  8.   
  9. @using (Html.BeginForm()) {  
  10.     @Html.AntiForgeryToken()  
  11.     @Html.ValidationSummary(true)  
  12.   
  13.     <fieldset>  
  14.         <legend>Recruiter Schedular</legend>  
  15.         <table align="center" >  
  16.             <tr>  
  17.                 <td>  
  18.                     <div class="form-group">  
  19.                         @Html.Label("Site Name: ", htmlAttributes: new { @class = "control-label col-md-2" })  
  20.                     </div>  
  21.                 </td>  
  22.                 <td>  
  23.                     <div class="col-md-10">  
  24.                       
  25.                         @Html.DropDownList("SiteList", null, htmlAttributes: new { @class = "w250p h30p bdrno" })  
  26.                      </div>  
  27.                 </td>  
  28.             </tr>  
  29.   
  30.             <tr>  
  31.                 <td>  
  32.                     <div class="form-group">  
  33.                         @Html.LabelFor(model => model.recruiterID, "Recruiter Name: ", htmlAttributes: new { @class = "w250p h30p bdrno" })  
  34.                     </div>  
  35.                 </td>  
  36.                 <td>  
  37.                     <div class="col-md-10">  
  38.                           
  39.                       @Html.DropDownList("recruiterID", (IEnumerable<SelectListItem>)ViewBag.recruiterID, "--Select Recruiter--", new { @class = "w250p h30p bdrno" })  
  40.                         @Html.ValidationMessageFor(model => model.recruiterID)  
  41.                      </div>  
  42.                 </td>  
  43.             </tr>  
  44.             <tr>  
  45.                 <td>  
  46.                     <div class="editor-label">  
  47.                         @Html.LabelFor(model => model.startDate,"Shift Start Time")  
  48.                     </div>  
  49.                 </td>  
  50.                  
  51.                      
  52.                        <td>  
  53.                         @Html.DropDownList("startHoursList", (IEnumerable<SelectListItem>)ViewBag.startHoursList, "HH", new { @class = "w50p h30p bdrno" })                      
  54.                         @Html.DropDownList("startMinutesList", (IEnumerable<SelectListItem>)ViewBag.startMinutesList, "MM", new { @class = "w50p h30p bdrno" })  
  55.                        </td>  
  56.                      
  57.             </tr>  
  58.             <tr>  
  59.                 <td>  
  60.                     <div class="editor-label">  
  61.                         @Html.LabelFor(model => model.endDate,"Shift End Time")  
  62.                     </div>  
  63.   
  64.                 </td>  
  65.                     <td>  
  66.                         @Html.DropDownList("endHoursList", (IEnumerable<SelectListItem>)ViewBag.endHoursList, "HH", new { @class = "w50p h30p bdrno" })                      
  67.                         @Html.DropDownList("endMinutesList", (IEnumerable<SelectListItem>)ViewBag.endMinutesList, "MM", new { @class = "w50p h30p bdrno" })  
  68.                        </td>  
  69.                 </tr>  
  70.              <tr>  
  71.                 <td>@Html.LabelFor(model => model.recurrencePattern,"Pattern")</td>  
  72.                 <td>  
  73.                     @Html.DropDownList("recurrencePattern", (IEnumerable<SelectListItem>)ViewBag.Pattern, "--Select Pattern--", new { @class = "w250p h30p bdrno" })  
  74.                     @Html.ValidationMessageFor(model => model.recurrencePattern)  
  75.                 </td>  
  76.             </tr>  
  77.             <tr>  
  78.                 <td>  
  79.                     <div class="editor-label">  
  80.                         @Html.Label("Selected Dates")  
  81.                     </div>  
  82.                 </td>  
  83.                 <td>  
  84.                      <div id="celenderForMultiple" class="celender">  
  85.                          <div data-role="calendar" data-week-start="1" data-multi-select="true" id="c1"></div>  
  86.                         <br />  
  87.                         <div class="align-center">  
  88.                               
  89.                         <input name="getDates" type="button" value="Create Schedule" onclick="get_dates()"/>  
  90.                               </div>  
  91.                         
  92.                     </div>  
  93.                           
  94.                     
  95.                 </td>  
  96.             </tr>  
  97.   
  98.         <tr>  
  99.             
  100.             <td colspan="2">  
  101.                   
  102.                 <div>  
  103.                   <div id="wrapper"></div>  
  104.                 </div>  
  105.   
  106.             </td>  
  107.   
  108.         </tr>  
  109.         </table>  
  110.        
  111.   
  112.         <p>  
  113.             @*<input type="hidden" id="setdateTime" value="" />*@  
  114.             @Html.Hidden("setStartDateTime")  
  115.             @Html.Hidden("setEndDateTime")  
  116.                @Html.Hidden("shiftStartTime")  
  117.             @Html.Hidden("shiftEndTime")    
  118.           <input type="button" value="Clear Schedule" onclick="cleardateTimeValue();" />  
  119.            <input type="submit" value="Save Schedule" onclick="setdateTimeValue();" />  
  120.         </p>  
  121.           
  122.     </fieldset>  
Here I am hiding my model name for some security purposes.

Output Layout When you Run Page

(let's say my model name is home and action name is Shift)

Output

In this I am taking dropdown for time (HH:MM) and selecting Slots as 30 minutes, 60 minutes etc.Then for date I am using Datepicker of MetroUi. Create Schedule is a Button on which I am calling javascript function to make Weekly table based on time.

Let's say starting time is 9:00 and End time is 3:00. And I need slots of 1 hour to make my schedule for selected dates.
Select Value and see output of Generated Weekly schedule.Total slots I want i.e, 18
From 9-10,10-11,……………………………………….1-2.

And I select day on which I want to show my calendar i.e, 27-may,28-may……..…10-may.

select day

Here based on selected Value weekly schedule is drawn by very simple Javascript logic.

On create Schedule Button I call simple javascript function i.e, createTable()

Code
  1. function createTable() {  
  2.   
  3.           var num_rows = row;  
  4.           var num_cols = time.length;// result.length   
  5.           var theader = '<table id="tableID"  style="border:1px solid black;">\n';  
  6.           var thead = '';  
  7.           var tbody = '';  
  8.             
  9.             
  10.           for (var h = 0; h < 1; h++) {  
  11.               thead += '<tr style="border:2px solid black;">';  
  12.               for (var j = 0; j < num_cols; j++) {  
  13.                   if (j == 0) {  
  14.                       thead += '<td class="head" style="border:1px solid black;">';  
  15.                       thead += "";  
  16.                       thead += '</td>'  
  17.                   }  
  18.                   else {  
  19.                       thead += '<td class="head" style="border:1px solid black;">';  
  20.                       thead += time[j - 1];  
  21.                       thead += '</td>'  
  22.                   }  
  23.               }  
  24.               thead += '</tr>\n';  
  25.           }  
  26.           for (var i = 0; i < num_rows; i++) {  
  27.               tbody += '<tr style="border:2px solid black;">';  
  28.               for (var j = 0; j < num_cols; j++) {  
  29.                   if (j == 0) {  
  30.   
  31.                       tbody += '<td class="head" style="border:1px solid black;">';  
  32.                       tbody += date[i];  
  33.                       tbody += '</td>'  
  34.                   }  
  35.                   else {  
  36.                       tbody += '<td  class="rid" style="border:1px solid black;color:white;"> ';  
  37.                       tbody +=  i +","+ j;  
  38.                       tbody += '</td>'  
  39.                   }  
  40.               }  
  41.               tbody += '</tr>\n';  
  42.           }  
  43.           var tfooter = '</table>';  
  44.           document.getElementById('wrapper').innerHTML = theader + thead + tbody + tfooter;  
  45.       }  
Output

Output

Next work is to select slots which I want to, for this on $(document).on('click', '.rid', function () simple apply a code for mouse click.

Code
  1. $(document).on('click''.rid', function () {  
  2.          var a = ($(this).html());  
  3.          var res = a.split(',');  
  4.          $(this).val("Booked");  
  5.          $(this).css('backgroundColor''#00FF00');  
  6.          $(this).css('color''#00FF00');  
  7.                 var sDt = date[parseInt(res[0])] + " " + time[parseInt(res[1]) - 1];  
  8.          var eDt = date[parseInt(res[0])] + " " + time[parseInt(res[1])];  
  9.          selectedStartDateTime.push(sDt);  
  10.          selectedEndDateTime.push(eDt);  
  11.      });  
Output

Output

Clear Schedule button is use to Deselect Reserve Slot.