Weekly Scheduling Calendar In MVC

Sonu Chaudhary
8y
8.2k
0
1

Article

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,

@model RecruitingOutboundScheduler.Domain.recr_recruiterShift
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Recruiter Schedular</legend>
<table align="center" >
<tr>
<td>
<div class="form-group">
@Html.Label("Site Name: ", htmlAttributes: new { @class = "control-label col-md-2" })
</div>
</td>
<td>
<div class="col-md-10">
@Html.DropDownList("SiteList", null, htmlAttributes: new { @class = "w250p h30p bdrno" })
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
@Html.LabelFor(model => model.recruiterID, "Recruiter Name: ", htmlAttributes: new { @class = "w250p h30p bdrno" })
</div>
</td>
<td>
<div class="col-md-10">
@Html.DropDownList("recruiterID", (IEnumerable<SelectListItem>)ViewBag.recruiterID, "--Select Recruiter--", new { @class = "w250p h30p bdrno" })
@Html.ValidationMessageFor(model => model.recruiterID)
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
@Html.LabelFor(model => model.startDate,"Shift Start Time")
</div>
</td>
<td>
@Html.DropDownList("startHoursList", (IEnumerable<SelectListItem>)ViewBag.startHoursList, "HH", new { @class = "w50p h30p bdrno" })
@Html.DropDownList("startMinutesList", (IEnumerable<SelectListItem>)ViewBag.startMinutesList, "MM", new { @class = "w50p h30p bdrno" })
</td>
</tr>
<tr>
<td>
<div class="editor-label">
@Html.LabelFor(model => model.endDate,"Shift End Time")
</div>
</td>
<td>
@Html.DropDownList("endHoursList", (IEnumerable<SelectListItem>)ViewBag.endHoursList, "HH", new { @class = "w50p h30p bdrno" })
@Html.DropDownList("endMinutesList", (IEnumerable<SelectListItem>)ViewBag.endMinutesList, "MM", new { @class = "w50p h30p bdrno" })
</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.recurrencePattern,"Pattern")</td>
<td>
@Html.DropDownList("recurrencePattern", (IEnumerable<SelectListItem>)ViewBag.Pattern, "--Select Pattern--", new { @class = "w250p h30p bdrno" })
@Html.ValidationMessageFor(model => model.recurrencePattern)
</td>
</tr>
<tr>
<td>
<div class="editor-label">
@Html.Label("Selected Dates")
</div>
</td>
<td>
<div id="celenderForMultiple" class="celender">
<div data-role="calendar" data-week-start="1" data-multi-select="true" id="c1"></div>
<br />
<div class="align-center">
<input name="getDates" type="button" value="Create Schedule" onclick="get_dates()"/>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>
<div id="wrapper"></div>
</div>
</td>
</tr>
</table>
<p>
@*<input type="hidden" id="setdateTime" value="" />*@
@Html.Hidden("setStartDateTime")
@Html.Hidden("setEndDateTime")
@Html.Hidden("shiftStartTime")
@Html.Hidden("shiftEndTime")
<input type="button" value="Clear Schedule" onclick="cleardateTimeValue();" />
<input type="submit" value="Save Schedule" onclick="setdateTimeValue();" />
</p>
</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.

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

function createTable() {
var num_rows = row;
var num_cols = time.length;// result.length
var theader = '<table id="tableID" style="border:1px solid black;">\n';
var thead = '';
var tbody = '';
for (var h = 0; h < 1; h++) {
thead += '<tr style="border:2px solid black;">';
for (var j = 0; j < num_cols; j++) {
if (j == 0) {
thead += '<td class="head" style="border:1px solid black;">';
thead += "";
thead += '</td>'
}
else {
thead += '<td class="head" style="border:1px solid black;">';
thead += time[j - 1];
thead += '</td>'
}
}
thead += '</tr>\n';
}
for (var i = 0; i < num_rows; i++) {
tbody += '<tr style="border:2px solid black;">';
for (var j = 0; j < num_cols; j++) {
if (j == 0) {
tbody += '<td class="head" style="border:1px solid black;">';
tbody += date[i];
tbody += '</td>'
}
else {
tbody += '<td class="rid" style="border:1px solid black;color:white;"> ';
tbody += i +","+ j;
tbody += '</td>'
}
}
tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('wrapper').innerHTML = theader + thead + tbody + tfooter;
}