Oracle Apex新CSS日历中HTML标签使用问题求助

在APEX 5以上的新版CSS日历中，直接在calendar_text列拼接HTML会被自动转义，无法生效。以下是三种可行的解决方案：

方案1：通过JavaScript动态渲染HTML内容 #

步骤1：修改SQL查询，传递原始数据 #

将需要格式化的字段单独列出，保留calendar_text作为基础显示内容：

select 
    t.startdate_dt
  , t.enddate_dt
  , t.responsibility
  , t.customer_name
  , t.customer_phone
  , t.my_generated_link
  , t.responsibility || ' | ' || t.customer_name as calendar_text
from t_mytasks t

步骤2：添加JavaScript初始化代码 #

在日历区域的高级 > JavaScript初始化代码中插入以下脚本，动态替换条目内容：

document.addEventListener('DOMContentLoaded', () => {
    const calendarRegion = APEX.region('YOUR_CALENDAR_STATIC_ID'); // 替换为你的日历区域静态ID
    const events = calendarRegion.widget().option('events');
    
    document.querySelectorAll('.apex-calendar-event').forEach(eventEl => {
        const eventMatch = events.find(e => e.title.trim() === eventEl.textContent.trim());
        if (!eventMatch) return;
        
        // 构建目标HTML
        const html = `
            <b>${eventMatch.responsibility}</b><br><br>
            ${eventMatch.customer_name}<br>
            ${eventMatch.customer_phone}<br>
            <a href="${eventMatch.my_generated_link}">Link</a>
        `;
        eventEl.innerHTML = html;
        
        // 可选：用APEX内置导航优化链接跳转
        eventEl.querySelector('a').addEventListener('click', e => {
            e.preventDefault();
            apex.navigation.redirect(eventMatch.my_generated_link);
        });
    });
});

方案2：自定义日历条目模板（APEX 20.2+推荐） #

新版APEX支持自定义条目HTML模板，直接映射SQL列实现格式化：

1. 进入日历区域编辑页，切换到外观标签页
2. 在「条目模板」下拉框选择「自定义」
3. 输入模板内容（替换变量需与SQL列名完全一致）：

<div class="apex-calendar-event #APEX_CAL_CSS_CLASSES#">
    <b>#RESPONSIBILITY#</b><br><br>
    #CUSTOMER_NAME#<br>
    #CUSTOMER_PHONE#<br>
    <a href="#MY_GENERATED_LINK#" class="apex-link">Link</a>
</div>

该方案无需额外JS，APEX会自动将SQL列值填充到模板中，支持完整HTML格式。

方案3：开启区域HTML允许（有限场景适用） #

如果你的APEX版本支持，可通过开启区域的HTML允许选项，结合安全的HTML拼接实现：

步骤1：修改SQL查询（使用apex_escape确保安全） #

select 
    t.startdate_dt
  , t.enddate_dt
  , '<b>' || apex_escape.html(t.responsibility) || '</b><br><br>' ||
    apex_escape.html(t.customer_name) || '<br>' ||
    apex_escape.html(t.customer_phone) || '<br>' ||
    apex_item.link(p_url => t.my_generated_link, p_label => 'Link') as calendar_text
from t_mytasks t

步骤2：开启区域HTML允许 #

在日历区域的属性 > 安全中，将「允许HTML」设置为「是」。注意：部分新版本可能默认过滤部分标签，此方案优先级低于前两种。

内容的提问来源于stack exchange，提问作者Juergen