Question

我在项目中使用了v-calendar。

我想制作自定义的日历，就像日历主体除了指定的日期外是灰色的一样。

我认为我可以使用v形插槽，但自定义日历的样本很少。

我无法猜测如何传递日期数据并使日历使用它。

可以在v-calendar的v-slot中设置什么样的数据？

如果有些人有简单的样本，您能证明吗？

至少这是我的第一个日历样本。

  <template>
    <v-row>
      <v-col>
        <v-sheet height="auto">
          <v-calendar
            v-model="focus"
            type="month"
            color="primary"
            min-weeks="1"
          >
     <!-- use slot here -->
          </v-calendar>
        </v-sheet>
      </v-col>
    </v-row>
  </template>

Answer 1

只需输入now属性，即可传递您想标注的日期。这将自动设置日历的样式。

            <template>
               <v-calendar
                v-model="focus"
                type="month"
                color="primary"
                min-weeks="1"
                :now="date"
              >
              </v-calendar>
           </template>

        <script>
        export default {
         data() {
          return {
             date: "2020-09-01",
          };
         },
        }

我认为您不需要v-slot，只需设置可用属性即可轻松自定义日历，这就是Vuetify的优点。我建议您查看Calendar Component文档。

如果您确实需要使用v-slot的示例，请查看以下内容，当您单击日历图标时，它将显示一个日历，尽管在这种情况下，我建议改为使用v-date-picker：

<template>
          <v-menu
            close-on-content-click="true"
            nudge-right="40"
            transition="scale-transition"
            min-width="250px"
            offset-y
          >
            <template v-slot:activator="{ on }">
              <v-icon v-on="on">mdi-calendar</v-icon>
            </template>
            <v-calendar
                v-model="focus"
                type="month"
                color="primary"
                now="2020-09-01"
              >
              </v-calendar>
          </v-menu>
</template>

如何使用v日历制作自定义日历？

1 个答案: