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

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