Vue компонент
Этот пример рассчитан на Vue 3.2+ (Composition API с <script setup>).
Для демонстрации давайте рассмотрим простейший компонент Vue для Vanilla Calendar Pro. Создайте файл с именем VanillaCalendar.vue и скопируйте в него следующий код:
<script setup lang="ts">
import { onMounted, ref, useAttrs } from 'vue';
import { Calendar, Options } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css'
const calendarRef = ref(null);
const attributes = useAttrs();
const { config } = defineProps<{ config?: Options }>();
onMounted(() => {
if (!calendarRef.value) return;
const calendar = new Calendar(calendarRef.value, config);
calendar.init();
});
</script>
<template>
<div v-bind="attributes" ref="calendarRef"></div>
</template>Затем импортируйте созданный компонент VanillaCalendar в ваше приложение Vue, где вы планируете отображать календарь.
<script setup lang="ts">
// ...
import VanillaCalendar from './VanillaCalendar.vue';
// ...
</script>Используйте созданный компонент.
<template>
<!-- -->
<VanillaCalendar />
<!-- -->
</template>Компоненту VanillaCalendar можно передать любые атрибуты HTML, поддерживаемые тегом <div>, а также параметр config для настройки календаря.
<template>
<!-- -->
<VanillaCalendar :config="{ type: 'multiple' }" />
<!-- -->
</template>