Toastui calendar in shiny: change background color of the calendar for specific days

user_13109939 0
Viewed 346

I am trying to change the background color of specific days in a toastui calendar in shiny. I tryed to use javascript to do it but didn't work.

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)

I run the javascrip in browser console and there it works. The image shows what I want.

enter image description here

shiny r javascript
1 Answers

I got what i wanted using shinyjs and observing _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)
user_131099390
Related