Hi friends,
In my previous post I described some features of Jquery datepicker. Now In this post I am going to write how can we highlight the dates on the basis of condition in datepicker.
So let's start:-
Suppose we are developing flight booking site and we need to show the seat Availability in calendar with some details in tool tip.
We are going to show Seat Availability status as
1. Available
2.Not Available
3.No Flight(on the day)
So your final output will be like :-
Jquery datepicker with highlighted color:-
To get the above output lets start coding:
Add the jquery references on your page:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Take div to bind the datepicker as
<div class="ui-widget-header" style="width:100%; height:25px;">Seat
Availability</div>
<div style="width: 100%">
<div id="dvBookingcalendar"> </div>/* div to bind the calendar*.
</div>
/* for legend * /
<br />
Available <span style="background-color:Green;"> </span>
Not
Available <span
style="background-color:red;"> </span>
No Flight <span style="background-color:blue;"> </span>
Now copy paste the below code into script block :
<<script type="text/javascript">
var arraydate = [];/*dates
which we are fetching from database */
var arraycss = []; /*Css
according to the status */
var arrayStatus = []; /*Statuses
of seat Availability */
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{'month':'" + 7 + "','year':'" + 2014 + "'}",
url: "calendarColoring.aspx/returnFlightstatus",
dataType: "json",
success: function (data) {
for (var
i = 0; i < data.d.length; i++) {
/*push the data in arrays so that at the
time of binding dates we no need to call server methods*/
arraydate.push(data.d[i].date);
arraycss.push(data.d[i].css);
arrayStatus.push(data.d[i].status);
}
$("#dvBookingcalendar").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
showOtherMonths: false,
beforeShowDay:
marksStatus/*This method will highlight the dates
*/
});
},
error: function (XMLHttpRequest,
textStatus, errorThrown) {
debugger;
}
});
var tooltips = "";
function marksStatus(date) {
/*function addZero will convert the dates in required
format*/
/*our dates are in yyyy-MM-dd format*/
function addZero(no) {
if (no < 10) {
return
"0" + no;
} else {
return
no;
}
}
var date_str = [addZero(date.getFullYear()),
addZero(date.getMonth() + 1), addZero(date.getDate())].join('-');
/*date_str :whatever calendar dates is going to print
we store in the date_str*/
for (var
i = 0; i < arraydate.length; i++) {
/* run loop on the dates which is in our
array and match with date_str if matched then set the css else nothing */
if (date_str == arraydate[i].toString())
{
tooltips = "Status - " + arrayStatus[i].toString();
return
[true, arraycss[i].toString(), tooltips];
break;
}
}
return [true,
'', ''];
}
});
</script>
[WebMethod]
public static List<Members>
returnFlightstatus(string month, string year)
{
/* here I am taking only few dates dates can be
filter out on the basis of month and year */
List<Members>
seatAvailability = new List<Members>();
try
{
seatAvailability.Add(new
Members { status = "Available",
date = "2014-07-23", css ="A"});
seatAvailability.Add(new
Members { status = "Not
Available",date = "2014-07-24",css =“NA" });
seatAvailability.Add(new Members { status = "Not
Available",date = "2014-07-25",css="NA" });
seatAvailability.Add(new Members { status = "No
Flight", date = "2014-07-26",css = "NOF" });
seatAvailability.Add(new Members { status = "Not
Available",date = "2014-07-27",css ="NA" });
seatAvailability.Add(new Members { status = "Available",
date = "2014-07-28", css = "A" });
seatAvailability.Add(new Members { status = "Available",
date = "2014-07-29", css = "A" });
seatAvailability.Add(new Members {
status = "Available", date = "2014-07-30", css = "A" });
seatAvailability.Add(new Members { status = "Available",
date = "2014-07-31", css = "A" });
}
catch
{
}
return seatAvailability;
}
Oh,Don't forget to create css as below:
<style>
.ui-datepicker
{
width: 50%;
}
.A a
{
background-color: Green
!important;
background-image: none
!important;
color: #fff !important;
font-weight: bold !important;
}
.NA a
{
background-color: Red !important;
background-image: none
!important;
color: #fff !important;
font-weight: bold !important;
}
.NOF a
{
background-color: Blue
!important;
background-image: none
!important;
color: #fff !important;
font-weight: bold !important;
}
Thanks for posting this blog, I was looking for such type of calendar in jquery,
ReplyDelete