Javascript 在jQuery UI中，在高亮显示元素的第一个子元素和最后一个子元素中创建不同的背景

这很复杂，至少对我来说是这样

我现在拥有的是jQueryUI日历，我这样做是为了让后端的用户可以选择特定的日期。 这很好地发挥了作用，并产生了以下效果：

但这还不够。我需要更进一步，创建如下日历：

因此，当用户选择12月1日至12月21日期间不提供住宿时，1日和21日的背景应为半红半绿

目前在我的日历上只创建了一个类（用于不可用的日期）

。ui状态突出显示

，我试图将所有闭合的部分作为数组分开，并使用jquery或css在该数组的第一个和最后一个子级上附加不同的backgorund，但运气不好

因此，如果显示的这3个日历在下一个日期关闭： 12月1日至21日 12月27日至1月2日 1月23日至25日

目前，所有这些日期都有class

ui状态突出显示，并且都是红色的。
我需要的是12月1日、21日、27日和1月2日、23日、25日的背景为红绿色

有什么想法吗

下面是在日历中生成的HTML代码示例



苏
钼
屠
我们
Th
Fr
Sa
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
您可以创建一个自定义函数来标识您感兴趣的天数，并使用该方法应用自定义CSS类

对于红色/绿色日期的背景，可以将函数与属性一起使用

下面是一个简单的例子：


var开始日期=新日期（'11/8/2015'）；
var结束日期=新日期（“2015年11月22日”）；
变量选项={
beforeShowDay:功能（日期）{
var ts=date.getTime（）；
如果（ts==START\u DATE.getTime（））{
返回[true，‘自定义开始’，null]；
}else if（ts>START\u DATE.getTime（）&&ts
.ui日期选择器日历.ui状态默认值{
背景：#c4ffc2；
}
.ui日期选择器日历。自定义开始。ui状态默认值{
背景：线性梯度（135度，#c4ffc2 0%，#c4ffc2 50%，#ffbfc9 51%，#ffbfc9 100%）；
}
.ui日期选择器日历。自定义介于.ui状态默认值之间{
背景#ffbfc9；
}
.ui日期选择器日历.自定义结束.ui状态默认值{
背景：线性梯度（135度，#ffbfc9 0%，#ffbfc9 50%，#c4ffc2 51%，#c4ffc2 100%）；
}

请添加一些代码示例。要回答你的问题有点困难。我添加了一些作为输出生成的HTML，这部分带有类。ui突出显示是以css样式作为背景的：红色，所以我们看到它是红色的（在前端不可用），现在我需要该“红色”行的第一个和最后一个日期为半红色半绿色背景（或者只是把背景颜色：这两个是黄色）…我想一些JS必须被编写和css？它工作了，我的意思是我们必须做一些改变，所以，但主要思想是从你的答案中使用的。谢谢！