Integrate Bootstrap Year Calendar with data from database using jQuery Ajax in ASP.Net

Hi Kibock,

Refer below sample code.

HTML

<div id="calendar"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="css/bootstrap-year-calendar.min.css" rel="stylesheet" />
<script src="js/bootstrap-year-calendar.js"></script>
<script>
    $(function () {
        function ConvertJsonDateToDateTime(date) {
            var parsedDate = new Date(parseInt(date.substr(6)));
            var newDate = new Date(parsedDate);
            return newDate;
        }
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetDetails",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                for (var i = 0; i < r.d.length; i++) {
                    r.d[i].startDate = ConvertJsonDateToDateTime(r.d[i].startDate);
                    r.d[i].endDate = ConvertJsonDateToDateTime(r.d[i].endDate);
                }
                $('#calendar').calendar({
                    enableContextMenu: true,
                    enableRangeSelection: true,
                    contextMenuItems: [
                        {
                            text: 'Update',
                            click: editEvent
                        },
                        {
                            text: 'Delete',
                            click: deleteEvent
                        }
                    ],
                    selectRange: function (e) {

                    },
                    mouseOnDay: function (e) {
                        if (e.events.length > 0) {
                            var content = '';

                            for (var i in e.events) {
                                content += '<div class="event-tooltip-content">'
                                    + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                    + '<div class="event-location">' + e.events[i].location + '</div>'
                                    + '</div>';
                            }

                            $(e.element).popover({
                                trigger: 'manual',
                                container: 'body',
                                html: true,
                                content: content
                            });

                            $(e.element).popover('show');
                        }
                    },
                    mouseOutDay: function (e) {
                        if (e.events.length > 0) {
                            $(e.element).popover('hide');
                        }
                    },
                    dayContextMenu: function (e) {
                        $(e.element).popover('hide');
                    },
                    dataSource: r.d
                });
            }
        });

        function editEvent(event) {
            $('#event-modal input[name="event-index"]').val(event ? event.id : '');
            $('#event-modal input[name="event-name"]').val(event ? event.name : '');
            $('#event-modal input[name="event-location"]').val(event ? event.location : '');
            $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
            $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
            $('#event-modal').modal();
        }

        function deleteEvent(event) {
            var dataSource = $('#calendar').data('calendar').getDataSource();

            for (var i in dataSource) {
                if (dataSource[i].id == event.id) {
                    dataSource.splice(i, 1);
                    break;
                }
            }

            $('#calendar').data('calendar').setDataSource(dataSource);
        }
    });
</script>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<Event> GetDetails()
{
    List<Event> events = new List<Event>();
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Events";
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        cmd.Connection = con;
        con.Open();
        using (SqlDataReader sdr = cmd.ExecuteReader())
        {
            while (sdr.Read())
            {
                events.Add(new Event
                {
                    id = Convert.ToInt32(sdr["Id"]),
                    name = sdr["Name"].ToString(),
                    location = sdr["Location"].ToString(),
                    startDate = Convert.ToDateTime(sdr["StartDate"]),
                    endDate = Convert.ToDateTime(sdr["EndDate"]),
                });
            }
        }
        con.Close();
    }

    return events;
}

public class Event
{
    public int id { get; set; }
    public string name { get; set; }
    public string location { get; set; }
    public DateTime startDate { get; set; }
    public DateTime endDate { get; set; }
}

VB.Net

<WebMethod>
Public Shared Function GetDetails() As List(Of [Event])
    Dim events As List(Of [Event]) = New List(Of [Event])()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM Events"
    Dim cmd As SqlCommand = New SqlCommand(query)

    Using con As SqlConnection = New SqlConnection(conString)
        cmd.Connection = con
        con.Open()
        Using sdr As SqlDataReader = cmd.ExecuteReader()
            While sdr.Read()
                events.Add(New [Event] With {
                    .id = Convert.ToInt32(sdr("Id")),
                    .name = sdr("Name").ToString(),
                    .location = sdr("Location").ToString(),
                    .startDate = Convert.ToDateTime(sdr("StartDate")),
                    .endDate = Convert.ToDateTime(sdr("EndDate"))
                })
            End While
        End Using

        con.Close()
    End Using

    Return events
End Function

Public Class [Event]
    Public Property id As Integer
    Public Property name As String
    Public Property location As String
    Public Property startDate As DateTime
    Public Property endDate As DateTime
End Class