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

Last Reply 3 months ago By dharmendr

Posted 3 months 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

Posted 3 months 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