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
  3. @{
  4. ViewBag.Title = "Create";
  5. }
  7. <h2>Create</h2>
  9. @using (Html.BeginForm()) {
  10. @Html.AntiForgeryToken()
  11. @Html.ValidationSummary(true)
  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">
  25. @Html.DropDownList("SiteList", null, htmlAttributes: new { @class = "w250p h30p bdrno" })
  26. </div>
  27. </td>
  28. </tr>
  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">
  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>
  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>
  57. </tr>
  58. <tr>
  59. <td>
  60. <div class="editor-label">
  61. @Html.LabelFor(model => model.endDate,"Shift End Time")
  62. </div>
  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">
  89. <input name="getDates" type="button" value="Create Schedule" onclick="get_dates()"/>
  90. </div>
  92. </div>
  95. </td>
  96. </tr>
  98. <tr>
  100. <td colspan="2">
  102. <div>
  103. <div id="wrapper"></div>
  104. </div>
  106. </td>
  108. </tr>
  109. </table>
  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>
  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() {
  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 = '';
  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) {
  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.