0

ユーザーがさまざまな日付にさまざまなオプションを選択できる光沢のあるアプリがあります (たとえば、1 日 1 つのオプションのみですが、月曜日はオプション A、火曜日はオプション B など、1 日の食事オプションと考えてください)。

現在、インタラクティブな「カレンダー」ビューは、インタラクティブな 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