0

我有一个闪亮的应用程序，用户可以在其中为不同的日期选择不同的选项（将其视为一天的食物选项，例如每天只有一个选项，但它可能是星期一的选项 A 和星期二的选项 B）。

目前，使用交互式 ggplot 图表创建交互式“日历”视图。最近我发现了shinyWidgets::airDatepicker，它看起来很棒，给我带来了 90%。

现在我希望能够根据选项为选定的日期着色。也就是说，如果用户点击了某个日期，则该日期应该对应于该选项被着色，例如所有 A 选项都是红色的，所有 B 选项都是绿色的。

粗制的 MWE（没有着色）看起来像这样：

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)

在此处输入图像描述

预期目标是让用户选择选项 A，点击某些日期，这些日期会以红色突出显示，然后用户选择选项 B，点击某些日期（可能相同或不同），这些日期将是现在在仍然红色的日期旁边以绿色突出显示。

早期尝试

我的一个想法是我可以尝试更改 shinyWidgets 的 JS 代码以向单击的单元格添加一个 ID（取决于所选的选项），然后使用 CSS 为单元格着色。

CSS 可能如下所示：

  tags$style(HTML(".airdatepicker--cell.-selected-#OPTIONA {background: red;}
                   .airdatepicker--cell.-selected-#OPTIONB {background: green;}")),

但我找不到更改单元格 ID 和类的 JS 代码。

4

0 回答 0