Jquery Full Calender Integrated With ASP.NET

30 Sep
2020

Jquery Full Calender Integrated With ASP.NET

by Shubham Batra

648

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 code of 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 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; }
    }
}

Jquery Full Calender Integrated With ASP.NET

Jquery Full Calender Integrated With ASP.NET

Step 1: Now we will add the following files to the Master Page:

STEP 2: Add the div

Step 3: Add the Script File

Step 4: Add the connection String

Step 5: Add the Class CalendarEvents

Step 6: Add the Web method

STEP 7: Complete code of script

step 8: complete code of BookingCalendar

Final output

Comments