Highlight Dates in Bootstrap Calendar based on database Dates using jQuery Ajax in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hello,

thanks for this but how can i make ajax call to bind data to calender

please advice

Highlight specific Dates in Bootstrap Calendar based on specified Dates using jQuery

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi nauna,

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

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="FullCalendar.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" />
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetDates",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var datesList = [];
                for (var i = 0; i < r.d.length; i++) {
                    datesList.push(new Date(r.d[i]));
                }
                var calendar = $('#calendar').fullCalendar({
                    dayRender: function (daysOfWeek, cell) {
                        for (var i = 0; i < datesList.length; i++) {
                            var reqDate = datesList[i];
                            if (reqDate.toDateString() == daysOfWeek.toDateString()) {
                                $(cell).addClass('fc-state-highlight');
                            }
                        }
                    }
                });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (response) {
                alert(r.d);
            }
        });
    });
</script>
<div id='calendar' style="height: 400px; width: 400px;">
</div>

Code

C#

[System.Web.Services.WebMethod]
public static List<string> GetDates()
{
    // Get this date array from database.
    string[] dateList = new string[] { "16 July 2019", "17 July 2019", "20 July 2019", "25 Jun 2019", "10 Aug 2019" };
    List<string> dates = new List<string>();
    for (int i = 0; i < dateList.Length; i++)
    {
        dates.Add(Convert.ToDateTime(dateList[i]).ToString("yyyy/MM/dd"));
    }
    return dates;
}

VB.Net

<Services.WebMethod()>
Public Shared Function GetDates() As List(Of String)
    ' Get this date array from database.
    Dim dateList As String() = New String() {"16 July 2019", "17 July 2019", "20 July 2019", "25 Jun 2019", "10 Aug 2019"}
    Dim dates As List(Of String) = New List(Of String)()
    For i As Integer = 0 To dateList.Length - 1
        dates.Add(Convert.ToDateTime(dateList(i)).ToString("yyyy/MM/dd"))
    Next
    Return dates
End Function

Screenshot