30
Sep
2020
2020
Jquery Full Calender Integrated With ASP.NET
Hello Guys, Welcome to Code2Night! Today, we have an exciting topic to discuss: "Jquery Full Calender Integrated with ASP.NET."
In this post, we will delve into the fascinating world of web development, where we'll explore how to seamlessly integrate the powerful jQuery Full Calendar plugin with the versatile ASP.NET framework.
As we all know, creating a visually appealing and user-friendly calendar is a crucial component of many web applications. With jQuery Full Calendar, we can effortlessly achieve this goal while leveraging the robust capabilities of ASP.NET.
Throughout this post, we'll guide you step-by-step on how to set up and integrate the jQuery Full Calendar plugin with ASP.NET, ensuring that you have a solid understanding of the process.
By the end of this post, you'll be equipped with the knowledge to build dynamic and interactive calendars that meet your specific requirements. We'll cover everything from installation and configuration to handling events and customization options.
So, without further ado, let's dive right in and explore the fascinating world of integrating jQuery Full Calendar with ASP.NET. Get ready to take your web development skills to new heights!
Step 1: Now we will add the following files to the Master Page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet" />
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>STEP 2: Add the div
<section class="content" style="background-color:white">
<div class="row">
<div class="col-xs-12">
<div id="calendar" style="width: 1200px; margin-left: 105px;">
</div>
</div>
</div>
</section>Step 3: Add the Script File
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
InitializeCalendar();
});
function InitializeCalendar() {
debugger;
$.ajax({
type: "POST",
contentType: "application/json",
url: "BookingCalendar.aspx/GetCalendarData",
dataType: "json",
success: function (data) {
debugger;
$('#calendar').empty();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//weekNumbers: true,
height: 600,
width: 100,
allDayText: 'Events',
selectable: true,
overflow: 'auto',
editable: true,
firstDay: 1,
slotEventOverlap: true,
events: $.map(data.d, function (item, i) {
//-- here is the event details to show in calendar view.. the data is retrieved via ajax call will be accessed here
var eventStartDate = new Date(parseInt(item.slotStartTime.substr(6)));
var eventEndDate = new Date(parseInt(item.slotEndTime.substr(6)));
var event = new Object();
event.id = item.slotID;
//event.start = new Date(eventStartDate.getFullYear(), eventStartDate.getMonth(), eventStartDate.getDate(), eventStartDate.getHours(), 0, 0, 0);
//event.end = new Date(eventEndDate.getFullYear(), eventEndDate.getMonth(), eventEndDate.getDate(), eventEndDate.getHours() + 1, 0, 0, 0);
event.start = eventStartDate;
// event.end = eventEndDate;
event.title = formatAMPM(eventStartDate) + "-" + formatAMPM(eventEndDate);
//event.allDay = item.AllDayEvent;
event.backgroundColor = item.color;
event.allDay= true;
return event;
})
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//-- log error
}
});
}
})
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
</script>Step 4: Add the connection String
<connectionStrings>
<add name="connectionString" connectionString="data source=SHUBHAM\SQLEXPRESS; database=CrudMVC; integrated security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>Step 5: Add the Class CalendarEvents
public class CalendarEvents
{
public int slotID { get; set; }
public DateTime slotStartTime { get; set; }
public DateTime slotEndTime { get; set; }
public DateTime slotDate { get; set; }
public string EventDescription { get; set; }
public string Title { get; set; }
public string slotStatus { get; set; }
public int bookingID { get; set; }
public bool AllDayEvent { get; set; }
public string color { get; set; }
}Step 6: Add the Web method
[WebMethod]
public static List<CalendarEvents> GetCalendarData()
{
//-- this is the webmethod that you will require to create to fetch data from database
return GetCalendarDataFromDatabase();
}
private static List<CalendarEvents> GetCalendarDataFromDatabase()
{
List<CalendarEvents> CalendarList = new List<CalendarEvents>();
string constring = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
string strQuery = "Select * FROM SlotMaster where slotStatus='ACTIVE' ";
using (SqlCommand cmd = new SqlCommand(strQuery, con))
{
cmd.CommandType = CommandType.Text;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
// ds = ClsDAL.QueryEngine(strQuery, "SlotMaster");
DataTable dt = new DataTable();
sda.Fill(dt);
//dt = ds.Tables[0];
for (int i = 0; i < dt.Rows.Count; i++)
{
CalendarEvents Calendar = new CalendarEvents();
Calendar.slotID = Convert.ToInt32(dt.Rows[i]["slotID"]);
Calendar.slotDate = Convert.ToDateTime(dt.Rows[i]["slotDate"]);
Calendar.slotStatus = dt.Rows[i]["slotStatus"].ToString();
Calendar.slotStartTime = Convert.ToDateTime(dt.Rows[i]["slotStartTime"]);
Calendar.slotEndTime = Convert.ToDateTime(dt.Rows[i]["slotEndTime"]);
if (Calendar.slotStatus == "ACTIVE")
{
Calendar.color = "green";
}
else
{
// Calendar.color = "white";
}
CalendarList.Add(Calendar);
}
}
}
}
return CalendarList;
}
STEP 7: Complete the code of the script
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BookingCalendar.aspx.cs" Inherits="BookingCalendar" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet" />
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<%-- <script type="text/javascript" src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script type="text/javascript" src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>--%>
<%-- <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>--%>
</head>
<body>
<section class="content" style="background-color:white">
<div class="row">
<div class="col-xs-12">
<div id="calendar" style="width: 1200px; margin-left: 105px;">
</div>
</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
InitializeCalendar();
});
function InitializeCalendar() {
debugger;
$.ajax({
type: "POST",
contentType: "application/json",
url: "BookingCalendar.aspx/GetCalendarData",
dataType: "json",
success: function (data) {
debugger;
$('#calendar').empty();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//weekNumbers: true,
height: 600,
width: 100,
allDayText: 'Events',
selectable: true,
overflow: 'auto',
editable: true,
firstDay: 1,
slotEventOverlap: true,
events: $.map(data.d, function (item, i) {
//-- here is the event details to show in calendar view.. the data is retrieved via ajax call will be accessed here
var eventStartDate = new Date(parseInt(item.slotStartTime.substr(6)));
var eventEndDate = new Date(parseInt(item.slotEndTime.substr(6)));
var event = new Object();
event.id = item.slotID;
//event.start = new Date(eventStartDate.getFullYear(), eventStartDate.getMonth(), eventStartDate.getDate(), eventStartDate.getHours(), 0, 0, 0);
//event.end = new Date(eventEndDate.getFullYear(), eventEndDate.getMonth(), eventEndDate.getDate(), eventEndDate.getHours() + 1, 0, 0, 0);
event.start = eventStartDate;
// event.end = eventEndDate;
event.title = formatAMPM(eventStartDate) + "-" + formatAMPM(eventEndDate);
//event.allDay = item.AllDayEvent;
event.backgroundColor = item.color;
event.allDay= true;
return event;
})
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//-- log error
}
});
}
})
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
</script>
</body>
</html>
step 8: complete the code of BookingCalendar
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class BookingCalendar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<CalendarEvents> GetCalendarData()
{
//-- this is the webmethod that you will require to create to fetch data from database
return GetCalendarDataFromDatabase();
}
private static List<CalendarEvents> GetCalendarDataFromDatabase()
{
List<CalendarEvents> CalendarList = new List<CalendarEvents>();
string constring = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
string strQuery = "Select * FROM SlotMaster ";
using (SqlCommand cmd = new SqlCommand(strQuery, con))
{
cmd.CommandType = CommandType.Text;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
// ds = ClsDAL.QueryEngine(strQuery, "SlotMaster");
DataTable dt = new DataTable();
sda.Fill(dt);
//dt = ds.Tables[0];
for (int i = 0; i < dt.Rows.Count; i++)
{
CalendarEvents Calendar = new CalendarEvents();
Calendar.slotID = Convert.ToInt32(dt.Rows[i]["slotID"]);
Calendar.slotDate = Convert.ToDateTime(dt.Rows[i]["slotDate"]);
Calendar.slotStatus = dt.Rows[i]["slotStatus"].ToString();
Calendar.slotStartTime = Convert.ToDateTime(dt.Rows[i]["slotStartTime"]);
Calendar.slotEndTime = Convert.ToDateTime(dt.Rows[i]["slotEndTime"]);
if (Calendar.slotStatus == "ACTIVE")
{
Calendar.color = "green";
}
else
{
Calendar.color = "grey";
}
CalendarList.Add(Calendar);
}
}
}
}
return CalendarList;
}
public class CalendarEvents
{
public int slotID { get; set; }
public DateTime slotStartTime { get; set; }
public DateTime slotEndTime { get; set; }
public DateTime slotDate { get; set; }
public string EventDescription { get; set; }
public string Title { get; set; }
public string slotStatus { get; set; }
public int bookingID { get; set; }
public bool AllDayEvent { get; set; }
public string color { get; set; }
}
}Final output
