mvc Create Custom Calender Using C# and Jquery

Introduction : Here Create Calendar using Custom event with help of C# and Jquery Source code with previous and Next Month.

View : Index.cshtml

@model Mvc_CustomCalender.Models.WeekForMonth

@{
Layout = null;
}

<title>My Calendar</title>

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/Calendar/Index.js"></script>

@using (Html.BeginForm() )
{
<div style="width:300px;">
<div id="component-header">
<a id="@Model.prevMonth" class="month" style="float:left;margin-left:10px;padding-right:50px;">Prev</a> @DateTime.Now.ToString("MMM") @DateTime.Now.Year <a id="@Model.nextMonth" class="month" style="float:right;margin-right:10px;">Next</a>
</div>

<div>
<table id="component-table">
<thead>
<tr>
<th>
Sun
</th>
<th>
Mon
</th>
<th>
Tue
</th>
<th>
Wed
</th>
<th>
Thurs
</th>
<th>
Fri
</th>
<th>
Sat
</th>
</tr>
</thead>
<tbody>
<tr id="week1">
@foreach (var item in Model.Week1)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
</tr>
<tr id="week2">
@foreach (var item in Model.Week2)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
</tr>
<tr id="week3">
@foreach (var item in Model.Week3)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
</tr>
<tr id="week4">
@foreach (var item in Model.Week4)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
</tr>
<tr id="week5">
@foreach (var item in Model.Week5)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
</tr>
<tr id="week6">
@if (Model.Week6 != null)
{
foreach (var item in Model.Week6)
{
if (item != null)
{
if (item.daycolumn == 0 || item.daycolumn == 6)
{
<td class="weekend"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
else if (item.Date != DateTime.Today)
{
<td><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3></a></td>
}
else
{
<td class="selected"><a id="@item.dateStr" class="dt"><h3>@item.dtDay</h3> </a></td>
}
}
else
{
<td></td>
}
}
}
</tr>
</tbody>
</table>
</div>
</div>
}

Class: CalendarManager.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Mvc_CustomCalender.Models;
using System.Globalization;

namespace Mvc_CustomCalender
{
public class CalendarManager
{
public WeekForMonth getCalender(int month, int year)
{
WeekForMonth weeks = new WeekForMonth();
weeks.Week1 = new List<Day>();
weeks.Week2 = new List<Day>();
weeks.Week3 = new List<Day>();
weeks.Week4 = new List<Day>();
weeks.Week5 = new List<Day>();
weeks.Week6 = new List<Day>();

List<DateTime> dt = new List<DateTime>();
dt = GetDates(year, month);

foreach (DateTime day in dt)
{
switch (GetWeekOfMonth(day))
{
case 1:
Day dy1 = new Day();

dy1.Date = day;
dy1._Date = day.ToShortDateString();
dy1.dateStr = day.ToString("MM/dd/yyyy");
dy1.dtDay = day.Day;
dy1.daycolumn = GetDateInfo(dy1.Date);
weeks.Week1.Add(dy1);
break;
case 2:
Day dy2 = new Day();
dy2.Date = day;
dy2._Date = day.ToShortDateString();
dy2.dateStr = day.ToString("MM/dd/yyyy");
dy2.dtDay = day.Day;
dy2.daycolumn = GetDateInfo(dy2.Date);
weeks.Week2.Add(dy2);
break;
case 3:
Day dy3 = new Day();
dy3.Date = day;
dy3._Date = day.ToShortDateString();
dy3.dateStr = day.ToString("MM/dd/yyyy");
dy3.dtDay = day.Day;
dy3.daycolumn = GetDateInfo(dy3.Date);
weeks.Week3.Add(dy3);
break;
case 4:
Day dy4 = new Day();
dy4.Date = day;
dy4._Date = day.ToShortDateString();
dy4.dateStr = day.ToString("MM/dd/yyyy");
dy4.dtDay = day.Day;
dy4.daycolumn = GetDateInfo(dy4.Date);
weeks.Week4.Add(dy4);
break;
case 5:
Day dy5 = new Day();
dy5.Date = day;
dy5._Date = day.ToShortDateString();
dy5.dateStr = day.ToString("MM/dd/yyyy");
dy5.dtDay = day.Day;
dy5.daycolumn = GetDateInfo(dy5.Date);
weeks.Week5.Add(dy5);
break;
case 6:
Day dy6 = new Day();
dy6.Date = day;
dy6._Date = day.ToShortDateString();
dy6.dateStr = day.ToString("MM/dd/yyyy");
dy6.dtDay = day.Day;
dy6.daycolumn = GetDateInfo(dy6.Date);
weeks.Week6.Add(dy6);
break;
};
}

while (weeks.Week1.Count < 7) // not starting from sunday
{
Day dy = null;
weeks.Week1.Insert(0, dy);
}

if (month == 12)
{
weeks.nextMonth = (01).ToString() + "/" + (year + 1).ToString();
weeks.prevMonth = (month - 1).ToString() + "/" + (year).ToString();
}
else if (month == 1)
{
weeks.nextMonth = (month + 1).ToString() + "/" + (year).ToString();
weeks.prevMonth = (12).ToString() + "/" + (year - 1).ToString();
}
else
{
weeks.nextMonth = (month + 1).ToString() + "/" + (year).ToString();
weeks.prevMonth = (month - 1).ToString() + "/" + (year).ToString();
}

return weeks;
}

public static List<DateTime> GetDates(int year, int month)
{
return Enumerable.Range(1, DateTime.DaysInMonth(year, month)) // Days: 1, 2 ... 31 etc.
.Select(day => new DateTime(year, month, day)) // Map each day to a date
.ToList();
}

public static int GetWeekOfMonth(DateTime date)
{
DateTime beginningOfMonth = new DateTime(date.Year, date.Month, 1);
while (date.Date.AddDays(1).DayOfWeek != DayOfWeek.Sunday)//CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek)
date = date.AddDays(1);
return (int)Math.Truncate((double)date.Subtract(beginningOfMonth).TotalDays / 7f) + 1;
}
public int GetDateInfo(DateTime now)
{
int dayNumber = 0;
DateTime dt = now.Date;
string dayStr = Convert.ToString(dt.DayOfWeek);

if (dayStr.ToLower() == "sunday")
{
dayNumber = 0;
}
else if (dayStr.ToLower() == "monday")
{
dayNumber = 1;
}
else if (dayStr.ToLower() == "tuesday")
{
dayNumber = 2;
}
else if (dayStr.ToLower() == "wednesday")
{
dayNumber = 3;
}
else if (dayStr.ToLower() == "thursday")
{
dayNumber = 4;
}
else if (dayStr.ToLower() == "friday")
{
dayNumber = 5;
}
else if (dayStr.ToLower() == "saturday")
{
dayNumber = 6;
}
return dayNumber;
}

}
}

Class Modal: CalendarModel.cs

public class CalendarModel
{

}
public class WeekForMonth
{
public List<Day> Week1 { get; set; }
public List<Day> Week2 { get; set; }
public List<Day> Week3 { get; set; }
public List<Day> Week4 { get; set; }
public List<Day> Week5 { get; set; }
public List<Day> Week6 { get; set; }
public string nextMonth { get; set; }
public string prevMonth { get; set; }
}

public class Day
{
public DateTime Date { get; set; }
public string _Date { get; set; }
public string dateStr { get; set; }
public int dtDay { get; set; }
public int? daycolumn { get; set; }

}

public class PopulateMonth
{
public int month { get; set; }
public int totaldayformonth { get; set; }
public int year { get; set; }
}

HomeController :

private CalendarManager _calendar = new CalendarManager();

public ActionResult Index()
{
var model = _calendar.getCalender(DateTime.Now.Month, DateTime.Now.Year);
return View(model);
}

public ActionResult AsyncUpdateCalender(int month, int year)
{
if (HttpContext.Request.IsAjaxRequest())
{
var model = _calendar.getCalender(month, year);
return Json(model, JsonRequestBehavior.AllowGet);
}
else
{
return View();
}
}

Jquery :

$(document).ready(function () {
//highlight selected field

$('td').live('mouseover', function () {

if ($(this).css("background-color") == "rgb(255, 255, 255)") {
$(this).css("background-color", "#FFDFCC");
}
});

$('td').live('mouseleave', function () {

if ($(this).css("background-color") == "rgb(255, 223, 204)") {
$(this).css("background-color", "rgb(255, 255, 255)");
}
});

$(".month").live('click', function () {
var object = $(this).attr("id");
var str = object.split('/');

$.ajax
({
url: '../Home/AsyncUpdateCalender',
type: 'GET',
traditional: true,
contentType: 'application/json',
data: { month: str[0], year: str[1] },
success: function (result) {
if (!jQuery.isEmptyObject(result)) {
var week1 = $("#week1");
week1.empty();
var week2 = $("#week2");
week2.empty();
var week3 = $("#week3");
week3.empty();
var week4 = $("#week4");
week4.empty();
var week5 = $("#week5");
week5.empty();
var week6 = $("#week6");
week6.empty();
var newHeader = $('<a id=' + result.prevMonth + ' class="month" style="float:left;padding-right:50px;">Prev</a>' + getMonth(str[0]) + ' ' + str[1] + '<a id=' + result.nextMonth + ' class="month" style="float:right">Next</a>');
$("#component-header").empty();
$("#component-header").append(newHeader);
$.each(result.Week1, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week1.append(htmlStr);
} else {
if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3></a>');
}

else if (item._Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3></a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3></a>');
}

week1.append(htmlStr);

}

});
$.each(result.Week2, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week2.append(htmlStr);
} else {

if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
else if (item.Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
week2.append(htmlStr);
}
});
$.each(result.Week3, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week3.append(htmlStr);
} else {
if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
else if (item.Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
week3.append(htmlStr);
}
});
$.each(result.Week4, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week4.append(htmlStr);
} else {
if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
else if (item.Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
week4.append(htmlStr);
}
});
$.each(result.Week5, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week5.append(htmlStr);
} else {
if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
else if (item.Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
week5.append(htmlStr);
}
});
$.each(result.Week6, function (i, item) {
var htmlStr = null;
if (jQuery.isEmptyObject(item)) {
htmlStr = $('<td></td>');
week6.append(htmlStr);
} else {
if (item.daycolumn == 0 || item.daycolumn == 6) {
htmlStr = $('<td class="weekend"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
else if (item.Date != getTodayDate()) {
htmlStr = $('<td></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
} else {
htmlStr = $('<td class="selected"></td>');
htmlStr.append('<a id=' + item.dateStr + ' class="dt"><h3>' + item.dtDay + '</h3> </a>');
}
week6.append(htmlStr);
}
});

$("#component-table").trigger("update");
} else {
alertMsg('Oops, errors occur in retrieving calender');
}
}
});
});
});

function getTodayDate() {
var localdate = new Date;
var localday = localdate.getDate();
var localmonth = localdate.getMonth() + 1;
var localyear = localdate.getFullYear();

var local = localmonth + "/" + localday + "/" + localyear;
return local;
}

function getMonth(m) {
var month;
switch (m) {
case "1":
month = "Jan";
return month;
break;
case "2":
month = "Feb";
return month;
break;
case "3":
month = "Mar";
return month;
break;
case "4":
month = "Apr";
return month;
break;
case "5":
month = "May";
return month;
break;
case "6":
month = "Jun";
return month;
break;
case "7":
month = "Jul";
return month;
break;
case "8":
month = "Aug";
return month;
break;
case "9":
month = "Sep";
return month;
break;
case "10":
month = "Oct";
return month;
break;
case "11":
month = "Nov";
return month;
break;
case "12":
month = "Dec";
return month;
break;
default:
month = "non";
return month;
break;
}
}

codelearne

mvc Create Custom Calender Using C# and Jquery

mvc Create Custom Calender Using C# and Jquery