如何在Primefaces中修改p:schedule特定时段的颜色？

Primefaces的p:schedule组件本身没提供直接设置特定时段背景色的属性，但它底层基于FullCalendar，咱们可以通过FullCalendar的客户端API或自定义CSS+JavaScript来实现你要的效果——把每天13:00-14:00的区域改成浅绿色。

方法1：用FullCalendar的背景事件 #

这种方式是加个“背景事件”（不会触发点击，纯当背景用），不算普通日程事件，刚好符合你不想加事件的需求：

1. 后台Bean里创建重复的背景事件：

// 后台Bean代码示例
public List<ScheduleEvent> getBackgroundEvents() {
    List<ScheduleEvent> events = new ArrayList<>();
    ScheduleEvent bgEvent = new ScheduleEvent();
    bgEvent.setStart(LocalTime.of(13, 0));
    bgEvent.setEnd(LocalTime.of(14, 0));
    bgEvent.setAllDay(false);
    bgEvent.setStyleClass("custom-slot-bg");
    // 设置每天重复
    bgEvent.setRecurrenceRule("FREQ=DAILY");
    events.add(bgEvent);
    return events;
}

2. 页面里给p:schedule配置backgroundEvents属性：

<p:schedule id="schedule" value="#{scheduleBean.events}" 
            backgroundEvents="#{scheduleBean.backgroundEvents}" />

3. 加自定义CSS样式：

.custom-slot-bg {
    background-color: #d4edda !important; /* 浅绿色 */
    border: none !important;
    opacity: 0.7;
}

方法2：JS直接修改DOM元素 #

要是完全不想碰事件相关的配置，也可以等Schedule加载完，直接用JS找到对应时段的DOM元素改样式：

1. 给p:schedule加个widgetVar：

<p:schedule id="schedule" widgetVar="scheduleWidget" value="#{scheduleBean.events}" />

2. 加一段JS代码，页面加载完后执行：

$(document).ready(function() {
    // 等Schedule初始化完成
    setTimeout(function() {
        const calendar = PF('scheduleWidget').calendar;
        // 监听视图切换，确保切月/周视图后样式还生效
        calendar.on('viewRender', function() {
            $('.fc-time-grid-slot').each(function() {
                const slotTime = $(this).find('.fc-time').text().trim();
                // 这里要根据你页面显示的时间格式调整，比如是"13:00"还是"1:00 PM"
                if (slotTime.startsWith('13:00') || slotTime.startsWith('1:00 PM')) {
                    $(this).css('background-color', '#d4edda');
                }
            });
        });
        // 首次加载时触发一次
        calendar.trigger('viewRender');
    }, 500);
});

注意：时间文本格式取决于你的本地化配置，要根据实际显示的内容调整判断条件。

方法3：自定义FullCalendar的时段渲染（Primefaces 10+适用） #

如果用的是Primefaces 10及以上版本（对应FullCalendar 5+），可以用slotRender回调来定制：

1. 页面里给p:schedule加客户端事件监听：

<p:schedule id="schedule" widgetVar="scheduleWidget" value="#{scheduleBean.events}">
    <p:clientEvent name="viewRender" oncomplete="customSlotRender()"/>
</p:schedule>

2. 写JS函数：

function customSlotRender() {
    const calendar = PF('scheduleWidget').calendar;
    const slots = document.querySelectorAll('.fc-timegrid-slot');
    slots.forEach(slot => {
        const slotInfo = calendar.getSlotInfo(slot);
        const hour = slotInfo.start.getHours();
        // 判断是否是13点的时段
        if (hour === 13) {
            slot.style.backgroundColor = '#d4edda';
        }
    });
}

这三种方法都能实现你要的效果，根据自己用的Primefaces版本选合适的就行。

内容的提问来源于stack exchange，提问作者Time Trial Stress