Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
30 Sep
2020

Jquery Full Calender Integrated With ASP.NET

by Shubham Batra

7910

Download Attachment

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; } } }
Final output 


  • |
  • Jquery Full Calender Integrated With ASPNET , Full Calendar , Jquery Calendar

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier