Highlight a day with an icon or color in DateTimePicker. (MVC and Bootstrap) - twitter-bootstrap-3

Question

I have a table like the picture below.
I would like the value in the Date column to be highlight with a circle in the
DateTimePicker (or in specific color).
Is it possible ? The best way ? Any examples ?
Thank you
P.s. I use MVC and Bootstrap 3

Answer 1

Copy this in Controller
public ActionResult GetArrayofDates()
{
DateTime[] d = new DateTime[]
{
new DateTime(2019,9,27),
new DateTime(2019,9,25),
new DateTime(2015,7,27),
new DateTime(2019,5,5)
};
return View(d);
}
And This is The View
#{
ViewBag.Title = "GetArrayofDates";
}
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<style>
.highlight {
background-color: #ff0000 !important;
color: #ffffff !important;
}
.nothighlight{
background-color:#fff7f7;
color:#000000;
}
</style>
<h2>GetArrayofDates</h2>
#{
for (int i = 0; i < Model.Length; i++)
{
<h3>#Model[i]</h3>
}
}
<div id="calandar">
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script>
var dates = []
#foreach (var item in Model)
{
//#: allow you to write javascritp/hhtml code inside c# code which you specific using # which allow write c# inside javascrpit/html
#:dates.push('#item.ToString("yyyy-M-dd")');
}
console.log(dates);
console.log(dates["0"])
$("#calandar").datepicker({
todayHighlight: true,
changeYear: true,
changeMonth: true,
minDate: new Date(2010,1,1),
beforeShowDay: function (date) {
var calender_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + ('0' + date.getDate()).slice(-2);
console.log(calender_date)
var search_index = $.inArray(calender_date, dates);
if (search_index > -1) {
return [true,'highlight','Employee Worked on this day.' ];
} else {
return [true, 'nothighlight', 'Employee did not Work on this day.'];
}
}
});
</script>
This full working example makes sure to match the format of the Date sent from the server and put into array as I did and everything will be okay.
and Download Jquery UI, and use UI CSS, I suppose you know that