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

Posted 2023-03-24

【中文标题】闪亮的 Toastui 日历：更改特定日期的日历背景颜色

【英文标题】：Toastui calendar in shiny: change background color of the calendar for specific days

【发布时间】：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，它在那里工作。图片显示了我想要的。

【参考方案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)