I have a shiny app where the user can select different options for different dates (think of it as food-options for a day, eg only one option per day, but it could be option A for Monday and option B for Tuesday).
At the moment an interactive "calendar" view is created using an interactive ggplot chart. Recently I found the shinyWidgets::airDatepicker, which looks wonderful and brings me 90%.
Now I want to be able to color the selected dates depending on the option. That is, if a user has clicked on a date, that date should get colored corresponding to the option, eg all A choices are red, all B choices are green.
A crude MWE (without the coloring) would look like this:
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
fluidRow(
selectInput("option", "Choice?", choices = c("A", "B")),
airDatepickerInput(
inputId = "input_dates", label = "Inline:",
multiple = Inf, inline = TRUE
)
)
)
server <- function(input, output, session) {
observeEvent(input$input_dates, {
print(sprintf("Selected Dates: %s", paste(input$input_dates, collapse = ", ")))
})
observe({
print(sprintf("Option is now: '%s'", input$option))
})
}
shinyApp(ui = ui, server = server)
The intended goal would be to have the user select option A, clicks on some dates, these would be highlighted in red, then the user selects option B, clicks on some dates (could be the same or different), these dates would be now highlighted in green alongside the still red dates.
Early Attempts
One thought that I had was that I could try to alter the JS code of shinyWidgets to add an ID to the clicked cell (depending on the option selected) and then use CSS to color the cells.
The CSS could look like this:
tags$style(HTML(".airdatepicker--cell.-selected-#OPTIONA {background: red;}
.airdatepicker--cell.-selected-#OPTIONB {background: green;}")),
but I cannot find the JS code which changes the cells IDs and class.
