ASP.Net: Populate (Bind) events from Database in jQuery fullCalendar using Entity Framework and AJAX

Vadivel892
 
on Jun 01, 2022 05:58 AM
Sample_789613.zip
1049 Views

Dear All,

Kindly suggest me fullcalendar event display from database (entity framework) in ASP.Net webpage.

CREATE TABLE [dbo].[OrderData]
(
    [OrderID] [int] IDENTITY(1,1) NOT NULL,
    [OrderNo] [nvarchar](255) NOT NULL,
    [DeliveryDate] [datetime] NOT NULL
)

 

<div id="calendar"></div>

<script src="Js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    var events = [];
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: "Calendar.aspx/GetOrderData",
        success: function (data) {
            $.each(data, function (i, v) {
                events.push({
                    title: v.OrderNo,
                    start: moment(v.DeliveryDate),
                });
            })
            GenerateCalendar(events);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
        }               
    })
 
    function GenerateCalendar(events) {
        $('#calendar').fullCalendar('destroy');
        $('#calendar').fullCalendar({
            defaultDate: new Date(),
            timeFormat: 'h(:mm)a',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek'
            },
            eventLimit: true,
            eventColor: '#378006',
            events: events
        })
    }            
});       
</script>

 

public static string GetOrderData()
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
    string _data = "";
    con.Open();
    SqlCommand cmd = new SqlCommand("SELECT * FROM OrderData", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    con.Close();
    //Here convert Table data to json and store in String type Variable.
    if (ds.Tables[0].Rows.Count > 0)
    {
        _data = JsonConvert.SerializeObject(ds.Tables[0]);
    }
    return _data;
}

Thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 08, 2022 07:04 AM

Hi Vadivel892,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div id="calendar"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: {},
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $.each(JSON.parse(data.d), function (i, v) {
                    events.push({
                        title: "\nName: " + v.FirstName,
                        start: moment(v.BirthDate),
                    });
                });
                GenerateCalendar(events);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus);
                alert("Error: " + XMLHttpRequest.responseText);
            }
        })

        function GenerateCalendar(events) {
            $('#calendar').fullCalendar('destroy');
            $('#calendar').fullCalendar({
                defaultDate: new Date(),
                timeFormat: 'h(:mm)a',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: events
            })
        }
    });
</script>

Code

C#

[System.Web.Services.WebMethod]
public static string GetData()
{
    using (NorthwindEntities entities = new NorthwindEntities())
    {
        var employees = entities.Employees.Select(x => new EmployeeModel { FirstName = x.FirstName, BirthDate = x.BirthDate }).ToList();
        return Newtonsoft.Json.JsonConvert.SerializeObject(employees);
    }
}

public class EmployeeModel
{
    public string FirstName { get; set; }
    public DateTime? BirthDate { get; set; }
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function GetData() As String
    Using entities As NorthwindEntities = New NorthwindEntities()
        Dim employees = entities.Employees.[Select](Function(x) New EmployeeModel With {
            .FirstName = x.FirstName,
            .BirthDate = x.BirthDate
        }).ToList()
        Return Newtonsoft.Json.JsonConvert.SerializeObject(employees)
    End Using
End Function

Public Class EmployeeModel
    Public Property FirstName As String
    Public Property BirthDate As DateTime?
End Class

Screenshot