jquery - 在 Oracle Apex 日历中标记假期，例如复活节

Question

我有一个返回公共(public)假期日期的 select 语句，它们在日历中显示为事件。我可以给它们一个 css 类来识别它们('apex-cal-green')，但是，我每天的日历中有很多事件，最好用当天的另一种背景颜色显示假期(因为它们是无论如何都不是事件)。

我找到了一个使用 jQuery 的解决方案 here ，但它无法正常工作，因为它突出显示了错误的日期。

如果有一个内置的 css 类可供使用，例如 fc-past 类，那就太理想了。

提前致谢，乌尔里克

Answer 1

关键是这里提到的dayRender函数:How can I change the css of a day cell by date?

问题是:如何在 APEX 中使用它？诀窍是首先在 DOM 中加载假期，然后配置日历区域以使用它们。

对于本示例，安装示例数据库应用程序。运行应用程序，导航到“订单”页面，然后单击“日历”按钮。这就是我将使用的日历。

1. 导航到日历页面的页面设计器。右键单击渲染选项卡下的内容主体，然后选择创建区域。将名称设置为<脚本>向 DOM 添加假期，将类型设置为PL/SQL 动态内容，然后输入PL/SQL 代码中的以下代码:

   htp.p('<script>');
   
   htp.p('  var holidays = [];');
   
   for rec in (
     select sysdate - 7 holiday
     from dual
     union
     select sysdate holiday
     from dual
     union
     select add_months(sysdate, 2) holiday
     from dual
   )
   loop
     htp.p('  holidays.push("' || to_char(rec.holiday, 'yyyy/mm/dd') || '")');
   end loop;
   
   htp.p('</script>');
   

   最后，将模板设置为- 选择-(取消选择模板)。

   这将向页面添加一些 JavaScript，将一些假假期作为字符串添加到数组中。通常，我会在页面渲染后使用 Ajax 引入日期，但这是第一次正确渲染日历所必需的。

2. 选择订单日历区域下的属性节点。向下滚动属性，直到在高级下看到JavaScript初始化代码，然后在其中添加以下代码:

   function (options) {
     options.dayRender = function (date, cell) {
       for (let idx = 0; idx < holidays.length; idx++) {
         let holiday = $.fullCalendar.moment.utc(holidays[idx]);
   
         if (date.isSame(holiday)) {
           cell.css('background-color', 'red');
         }
       }
     };
   
     return options;
   }
   

   此代码会将 dayRender 函数添加到日历中。该函数将根据上一步添加的假期列表检查日历中呈现的日期。如果渲染的日期与假日匹配，则单元格的背景设置为红色。

您应该能够自定义此解决方案以更好地满足您的需求。