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

Question

我有一个 select 声明 returns public 假期日期，它们在日历中显示为事件。我可以给他们一个 css class 来识别他们 ('apex-cal-green')，但是，我的日历中每天都有很多事件，最好用另一种背景颜色显示假期那天（因为无论如何它们都不是事件）。

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

如果有内置的css class可以使用，比如fc-past class.

提前致谢，乌尔里克

Answer 1

您可以自定义日历查询和

add your own class as a column in the query - for the holidays

And specify the column as CSS class in the attributes

and then add your custom CSS for the class.

编辑：

@ulrik-larsen 我明白你的意思了。
我认为这不可能立即实现。但我认为我们可以解决

Add a class that includes the date - take the sub string of the class so that we will only get the date

Select the td using the data-date attribute

Add the class to the td that way

Hide the event anchor tag

日历查询

   select ORDER_ID,
     CUSTOMER_ID,
     ORDER_TOTAL,
     ORDER_TIMESTAMP,
     USER_NAME,
     TAGS,
     'apex-cal-green' css_class
    from DEMO_ORDERS

   union

   select 1,
         1,
         1,
         to_date('06/12/2020', 'MM/DD/YYYY'),
         'e',
         'TAGS',
         'hol-sel-class hol-class-'||to_char(to_date('06/12/2020', 'MM/DD/YYYY'), 'YYYY-MM-DD') css_class
   from dual  

   union

   select 1,
         1,
         1,
         to_date('06/13/2020', 'MM/DD/YYYY')+1,
         'e',
         'TAGS',
         'apex-cal-green' css_class
   from dual

函数和全局变量声明

function holidayCss(){
      $(".hol-sel-class").each(function(){
        var classList = this.className.split(/\s+/);
        for (var i = 0; i < classList.length; i++) {
            console.log('classList[i] - ',classList[i]);
            console.log('classList[i].substring(0, 10) - ',classList[i].substring(0, 10));
            if (classList[i].substring(0, 10) == "hol-class-") {
                console.log('in loop - '+classList[i].substring(10));
                // data-date="2020-05-26"
                $('td[data-date="'+classList[i].substring(10)+'"]').addClass('apex-cal-test-class');
                console.log('td[data-date='+classList[i].substring(10)+']');
                console.log('td[data-date="'+classList[i].substring(10)+'"]');
                console.log($('td[data-date="'+classList[i].substring(10)+'"]').attr( "class" ));
                $(".hol-sel-class").addClass('am-hidden');
          }
        }
    });
}

页面加载时执行

setTimeout(holidayCss, 500);

我们需要延迟 JS 执行，因为日历是在页面加载后加载的

CSS 内联

td.fc-day.ui-widget-content.fc-fri.fc-future.apex-cal-test-class {
    background-color: darkgray;
}

a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.hol-sel-class.am-hidden {
    display: none;
}

希望这对您有所帮助:)

Answer 2

关键是这里提到的dayRender函数：

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

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

导航到日历页面的页面设计器。右击渲染选项卡下的Content Body，然后select Create Region。 Set Name to

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

Marking holidays, for example Easter, in the Oracle Apex calendar

css

jquery

calendar

styling

oracle-apex

日历查询

函数和全局变量声明

页面加载时执行

CSS 内联