How to render blocked dates from database into calendar

Question

How can I render blocked dates from db into calendar? Currently I do by hardcode. Is there any solution can I use to solve this problem? Here I attached the the code and script.

Thanks

 

 

 The code:

<div class="col-lg-12" id="main">

<form class="form" runat="server">

<div class="form-group">

<label>Start Date (MM/DD/YYYY)</label>

<asp:TextBox ID="txtBox_Start_Date" runat="server" CssClass="form-control datepicker required txtStartDate" autocomplete="off"></asp:TextBox>

</div>

<div class="form-group" id="div_end_date">

<label>End Date (MM/DD/YYYY)</label>

<asp:TextBox ID="txtBox_End_Date" runat="server" CssClass="form-control datepicker required txtEndDate" autocomplete="off"></asp:TextBox>

</div>

<div class="form-group" id="div_Time_Slot_Table" style="display: none">

<asp:Table ID="Default_Timeslot_Table" runat="server" Width="100%" class="table table-striped table-bordered table-hover">

<asp:TableHeaderRow>

<asp:TableHeaderCell Style="text-align: center" Width="50%">Timeslot</asp:TableHeaderCell>

<asp:TableHeaderCell Style="text-align: center" Width="50%">Session</asp:TableHeaderCell>

</asp:TableHeaderRow>

</asp:Table>

</div>

<asp:Button runat="server" ID="btn_submit" Text="Submit" CssClass="btn btn-default butn " OnClick="btn_submit_Click"></asp:Button>

</form>

</div>

 

SCRIPT:

 

$(document).ready(function () {

//Blocked date 

var disableddates = ["2018-02-17","2018-03-21","2018-05-01","2018-03-02","2018-03-22","2018-03-30","2018-03-31","2018-04-20","2018-04-14","2018-04-21","2018-04-05","2018-04-18","2018-04-11","2018-02-21","2018-04-26","2018-04-30","2018-04-27"];

function DisableSpecificDates(date)

{

var y = date.getFullYear();

var m = date.getMonth();

var d = date.getDate();

// First convert the date in to the mm-dd-yyyy format

// Take note that we will increment the month count by 1

var currentdate = y + '-' + (m + 1) + '-' + d ;

// We will now check if the date belongs to disableddates array

for (var i = 0; i < disableddates.length; i++) {

// Now check if the current date is in disabled dates array.

if ($.inArray(currentdate, disableddates) != -1 ) {

return [false];

}

}

// In case the date is not present in disabled array, we will now check if it is a weekend.

// We will use the noWeekends function

var weekenddate = $.datepicker.noWeekends(date);

return weekenddate;

}

$(".form").validate({

submitHandler: function (form) {

form.submit();

}

});

$('.txtStartDate').datepicker({

minDate: 30,

//maxDate: 30,

beforeShowDay: DisableSpecificDates

}).on('change', function () {

var startDate = $('.txtStartDate').val();

var dateStartDate = new Date(startDate);

var currentDate = new Date();

var oneMonthDate = new Date(new Date(currentDate).setMonth(currentDate.getMonth() + 1))

if (dateStartDate <= oneMonthDate) {

alertify.error("You can only select 1 months in advance.");

$('.txtStartDate').val("");

}

});

$('.txtEndDate').datepicker({

minDate: 30,

//maxDate: 30,

beforeShowDay: DisableSpecificDates

}).on('change', function () {

var startDate = $('.txtStartDate').val();

var endDate = $('.txtEndDate').val();

var dateStartDate = new Date(startDate);

var dateEndDate = new Date(endDate);

if (dateStartDate > dateEndDate || startDate == "") {

alertify.error("Invaild End Date");

//$('.txtStartDate').val("");

$('.txtEndDate').val("");

$("#div_end_date").insertBefore($("#div_Time_Slot_Table"));

document.getElementById("div_Time_Slot_Table").style.display = "none";

}