基于事件类型的单元格的jQuery Datepicker背景颜色 [英] jQuery Datepicker background color for cells based on event type
问题描述
我需要根据事件类型显示不同颜色的不可用日期,或者当天是否已完整预订。
I need to show non available dates in different color based on the event type or if it is full booked for that day.
下面的示例从数据库中提取日期和我将它们作为数组传递给JavaScript目前我在数组中传递了四个参数 [2012,7,15,'Some events']
,例如年,月,日&安培;年份。我想改变这个数组以传递第五个参数作为颜色 [2012,7,15,'Some events','Red']
。这样我就可以根据事件类型更改单元格的颜色。
Below example fetches dates from database and i pass them as an array to JavaScript at present i am passing four parameter in an array [2012,7, 15, 'Some events']
such as Year, Month, Day & Years. I want to alter this array to pass Fifth parameter as color [2012,7, 15, 'Some events', 'Red']
. so that i can change the color of the cell based on the event type.
我不知道如何在脚本下面改变它以使其工作。我找了一些例子,但找不到匹配的。我很感激这方面的帮助,因为我不是脚本大师。
I am not sure how i will alter below script to make it work. I have looked for example but could not find a matching one. I would appreciate help in this regard as i am not a Guru of Scripting.
function BindEvents()
{
//Script for Calendar
var holiDays = [[2012,7, 15, 'Some events'],[2012,7, 4, 'Some Event'],[2012,7, 1, 'Full Booked'],[2012,7, 5, 'Full Booked']];
$(function () {
$("#txtBookDate").datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0,
beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
});
function noWeekendsOrHolidaysOrBlockedDates(date) {
//var noWeekend = jQuery.datepicker.noWeekends(date);
return setHoliDays(date);
}
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
var day = date.getDay();
if (day == 5 || day ==6) return [false, ''];
for (i = 0; i < holiDays.length; i++) {
if (date.getFullYear() == holiDays[i][0]
&& date.getMonth() == holiDays[i][1] - 1
&& date.getDate() == holiDays[i][2]) {
return [false, 'holiday', holiDays[i][3]];
}
}
return [true, ''];
}
});
}
BindEvents();
推荐答案
来自精细手册:
beforeShowDay
一个函数,它将日期作为参数,并且必须返回一个数组:
A function that takes a date as a parameter and must return an array with:
-
[0]
:true
/false
表示此日期是否可选 -
[1]
:要添加到日期的CSS类名称单元格或用于默认演示文稿
-
[2]
:an此日期的可选弹出工具提示
[0]
:true
/false
indicating whether or not this date is selectable[1]
: a CSS class name to add to the date's cell or""
for the default presentation[2]
: an optional popup tooltip for this date
在显示日期选择器之前,每天都会调用该函数。
The function is called for each day in the datepicker before it is displayed.
因此,特定颜色的返回值没有空间。但是,数组中的元素之一可以包含多个类名,因此您可以通过CSS执行此操作。
So there's no room in the return value for a specific color. However, element one of the array can contain multiple class names so you can do it through CSS.
如果您希望特定假日以红色文本显示,那么您可以在 beforeShowDay
中执行此操作:
If you wanted a particular holiday to come out in red text then you could do this in your beforeShowDay
:
return [false, 'holiday red', holiDays[i][3]];
然后添加一点CSS:
td.red span.ui-state-default {
color: #f00;
}
使红色
上课做。
演示: http:// jsfiddle.net/ambiguous/pjJGf/
这篇关于基于事件类型的单元格的jQuery Datepicker背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!