闪亮的 Toastui 日历：更改特定日期的日历背景颜色答案

【问题标题】：Toastui calendar in shiny: change background color of the calendar for specific days闪亮的 Toastui 日历：更改特定日期的日历背景颜色
【发布时间】：2021-11-18 01:11:57
【问题描述】：

我正在尝试以闪亮的方式更改 toastui 日历中特定日期的背景颜色。我尝试使用 javascript 来执行此操作，但没有成功。

library(shiny)
library(toastui)

options(shiny.launch.browser = T)

ui <- fluidPage(
  
  tags$script(
    HTML(
      "var x = [1,3,5,6]; 
      x.map((n,i) => document.querySelectorAll('.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day').item(n).style.backgroundColor = '#00ff004c');"
      
    )
  ),
  calendarOutput("my_calendar")
)

server <- function(input, output) {
  
  output$my_calendar <- renderCalendar({
    calendar(
      defaultDate = Sys.Date(),
      useNavigation = TRUE
    )
  })
}

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

我在浏览器控制台中运行 javascrip，它在那里工作。图片显示了我想要的。

【问题讨论】：

标签： javascript r shiny

【解决方案1】：

使用shinyjs 并观察_dates，我得到了我想要的东西

library(shiny)
library(toastui)
library(shinyjs)

options(shiny.launch.browser = T)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  calendarOutput("my_calendar")
)

server <- function(input, output) {
  
  output$my_calendar <- renderCalendar({
    calendar(
      defaultDate = Sys.Date(),
      useNavigation = TRUE
    )
  })
  
  observeEvent(input$my_calendar_dates, {
    
    shinyjs::runjs("
                   
                   var x = [1,3,5,6]; 
                   x.map((n,i) => document.querySelectorAll('.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day').item(n).style.backgroundColor = '#00ff004c');
                   
                   ")
    
  })
  
}

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

【讨论】：