Shiny中ToastUI Calendar指定日期背景色修改问题求助

直接放在ui中的JS代码执行早于ToastUI Calendar组件的渲染流程，待修改的日期DOM节点尚未生成，因此样式修改无效；在浏览器控制台运行时组件已完成加载，故可正常生效。

library(shiny)
library(toastui)
library(htmlwidgets)

options(shiny.launch.browser = T)

ui <- fluidPage(
  calendarOutput("my_calendar")
)

server <- function(input, output, session) {
  
  output$my_calendar <- renderCalendar({
    calendar(
      defaultDate = Sys.Date(),
      useNavigation = TRUE
    ) %>% 
      htmlwidgets::onRender("
        function(el, x) {
          // 封装背景色修改逻辑
          function updateDateBg() {
            const targetIndexes = [1,3,5,6];
            targetIndexes.forEach(idx => {
              const dateEl = document.querySelectorAll('.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day').item(idx);
              if (dateEl) dateEl.style.backgroundColor = '#00ff004c';
            });
          }
          // 首次渲染完成后执行
          updateDateBg();
          // 监听日历切换视图、月份的事件，修改后自动重新应用样式
          el.addEventListener('tuiCalendarAfterRender', updateDateBg);
        }
      ")
  })
}

if (interactive())
  shinyApp(ui = ui, server = server)

该写法借助htmlwidgets的onRender回调，保证JS代码仅在日历组件完全渲染完成后执行，同时监听日历更新事件，切换月份后样式也不会丢失，实现的效果如下：

内容的提问来源于stack exchange，提问作者Leonardo Donato Nunes