Need jQuery calendar plugin, specific dates
3 answers
Use Datepicker , just add handlers to events that check dates.
Example (Original from this forum post )
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yyyy',
beforeShowDay: disableDays
});
});
var disabledDays = ["12/10/2009", "13/10/2009", "15/11/2009"];
function disableDays(date) {
var sDate = date.getDate().toString() + "/" +
(date.getMonth()+1).toString() + "/" +
date.getFullYear().toString();
if ($.inArray(sDate, disabledDays ) != -1) return [true];
else return [false];
}
</script>
Another example (faster?) From here
$(function() {
// format: specialDays.year.month.day
var specialDays = {
'2009': {
'1': {'1': {tooltip: "New Year Day", className: "holiday"}},
'4': {
'10': {tooltip: "Good Friday", className: "holiday"},
'13': {tooltip: "Easter Monday", className: "holiday"}
},
'5': {
'4': {tooltip: "Early May Bank Holiday", className: "holiday"},
'15': {tooltip: "Spring Bank Holiday", className: "holiday"}
},
'8': {'31': {tooltip: "Summer Bank Holiday", className: "holiday"}},
'12': {
'25': {tooltip: "Christmas Day", className: "holiday"},
'28': {tooltip: "Boxing Day", className: "holiday"}
}
}
};
$('#datepicker').datepicker({beforeShowDay: function(date) {
var d = date.getDate(),
m = date.getMonth()+1,
y = date.getFullYear();
if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
var s = specialDays[y][m][d];
return [true, s.className, s.tooltip]; // selectable
}
return [false,'']; // non-selectable
}});
});
+2
source to share
jCal is great for this and is highly customizable.
This will show for 1 month and only 3 days will be allowed to select.
$(document).ready(function () {
$('#calOne').jCal({
day: new Date((new Date()).setMonth(7)),
days: 1,
showMonths: 1,
dayOffset: 0,
dow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dCheck: function (day) { return $.inArray(
[(day.getMonth() + 1), day.getDate(), day.getFullYear()].join('/'),
['8/21/2009', '8/28/2009', '8/29/2009']) != -1},
callback: function (day, days) {
$('#calResult').val(day.getFullYear() + '-' + ( day.getMonth() + 1 ) + '-' + day.getDate());
return true;
}
});
$('#calOne').disableSelection();
});
+1
source to share