如何将日期单击添加到 Vuetify 日历

Question

我正在尝试基于以下存储库构建 Vuetify 日历：https://github.com/jsfanatik/vuestacks-calendar-vue-firebase。我的目标是使用户能够通过直接单击日历中的日期来添加新的日历事件，而不是仅仅单击 UI 顶部的新事件按钮。为了实现这一点，我将@click:date="viewDay 更改为@click:date="dialogDate = true" 以启用单击日期以打开新的事件输入对话框（请参见下面的对话框代码）。我想修改这个新对话框，以便用户单击给定日期后，单击日期的开始和结束时间（大概是上午 12 点到上午 12 点）自动传递到此对话框并绑定到开始和结束字段。关于如何实现这一目标的任何建议？

对话框 - 点击日期

      <v-dialog v-model="dialogDate" max-width="500">
        <v-card>
          <v-container>
            <v-form @submit.prevent="addEvent">
              <v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
              <v-text-field v-model="details" type="text" label="detail"></v-text-field>
              <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
              <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
              <v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
              <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
                create event
              </v-btn>
            </v-form>
          </v-container>
        </v-card>
      </v-dialog>

Answer 1

如果我误解了您的问题，我深表歉意，但我认为您可能希望通过以下方法传递日期：

代替

@click:date="dialogDate = true"

做类似的事情

@click:date="setDialogDate(date)"

然后有一个名为setDialogDate 的方法在用户单击的特定日期中传递。然后，您可以在该方法中打开和关闭对话框。