Hello

I am working in a Vue 3 project that uses 8.1.6 Metronics version.

I need to display a FullCalendar Component in a "kt-drawer" Component but there is a reactivity issue and it seems that FullCalendar CSS (or maybe FullCalendar options ?) are not reactive so FullCalendar displays in this way when I click on "Dates" button :

https://a-p-c-t.fr/to-meet/fullCalendar-reactivity-issue.PNG

But if I did a code modification or I just display web browser inspector, FullCalendars is displayed correctly :

https://a-p-c-t.fr/to-meet/fullCalendar-ok.PNG

Kindly, could you check mon code et tell me how can I make reactive FullCalendar's Component ?


This is FullCalendar's Component code :

<script lang="ts">
import { defineComponent, reactive, ref, type PropType, toRef, watch, onBeforeMount, watchEffect } from 'vue';
import { Field, ErrorMessage, FieldArray } from "vee-validate";
import FullCalendar, { type CalendarOptions } from "@fullcalendar/vue3";
import OptionsServices from "./services";
import type { PollInterface } from '@/services/interfaces/pollInterfaces/poll.interfaces';
import { usePollStore } from '@/stores/_poll';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';

export default defineComponent({
name: "create-form-dates",
components: {
FullCalendar,
Field,
ErrorMessage,
FieldArray
},
setup() {

const route = useRoute();
const pollStore = usePollStore()
pollStore.getPollById(route.params.id as string)
const poll = storeToRefs(usePollStore()).poll as unknown as PollInterface;

const optionsService = reactive(new OptionsServices());
const allEventsSlots = ref(optionsService.allEventsSlots);
const calendarEvents = reactive(optionsService.calendarEvents);
const options = reactive(optionsService.isCalendarOptions()) as unknown as CalendarOptions | undefined;

const eventCalendarRemove = reactive(optionsService.calendarOptions.eventClick);

const deleteCalendarEvent = (eventId:string) => {
const eventAPI = calendarEvents.find((e: { event: { _instance: { defId: string; }; }; }) => e.event._instance.defId === eventId)
return eventCalendarRemove(eventAPI)
}

return{
options,
allEventsSlots,
deleteCalendarEvent,
poll,
route
}
},
});
</script>
<template>
<div class="fv-row mb-10">
<i class="far fa-lightbulb text-primary me-2"></i>
<label class="form-label required">Choix des créneaux horaires</label>
<div :class="poll.id === route.params.id ? 'mx-auto mw-700px w-100 pt-15 pb-10' : 'd-block'">
<FullCalendar
class="mt-10 mb-10"
:options="options"
/>
<FieldArray name="calendarEvents"
>
<fieldset class="mt-5" v-for="(event, idx) in allEventsSlots"
:key="event.idEvent">
<div class="input-group">
<Field v-slot="{ field }"
:id="`date_${idx}`"
:modelValue="event.start + ` - ` + event.end"
:name="`date_${idx}`"
>
<input
v-bind="field"
:value="event.start + ` - ` + event.end"
class="form-control form-control-lg form-control-solid disable-input"
disabled
>
</Field>
<button type="button" @click="deleteCalendarEvent(event.idEvent)"
class="btn btn-primary"
>
<i class="bi bi-trash3"></i>
</button>
</div>
</fieldset>
<ErrorMessage
name="date_0"
class="fv-plugins-message-container invalid-feedback"
/>
</FieldArray>
</div>
</div>
</template>
<style lang="scss">
.fc-day-past {
background-color: rgb(233, 233, 233);
}
</style>

-------------------------------------------------------------------------------------

This is the "kt_drawer" component code :


<script lang="ts">
import { defineComponent } from "vue";
import Calendar from "@/app/pollCreation/components/step1/createDatesCalendar/index.vue";

export default defineComponent({
name: "add-date-question-drawer",
components: {
Calendar
},
});
</script>
<template>
<div
id="kt_dateQuestion"
class="bg-body"
data-kt-drawer="true"
data-kt-drawer-name="dateQuestion"
data-kt-drawer-activate="true"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:'90%', 'lg': '50%'}"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_dateQuestion_toggle"
data-kt-drawer-close="#kt_dateQuestion_close"
>
<div class="card w-100" id="kt_dateQuestion">
<div class="card-header pe-5" id="kt_dateQuestion_header">
<div class="card-title">
<div class="d-flex justify-content-center flex-column me-3">
<a
href="#"
class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1"
>Ajouter une nouvelle date</a
>
<div class="mb-0 lh-1">
<span
class="badge badge-success badge-circle w-10px h-10px me-1"
></span>
<span class="fs-7 fw-semobold text-gray-400">Active</span>
</div>
</div>
</div>
<div class="card-toolbar">
<button
type="button"
class="btn btn-sm btn-icon btn-active-light-primary me-n5"
id="kt_dateQuestion_close"
>
<span class="svg-icon svg-icon-1">
<inline-svg src="/media/icons/duotune/arrows/arr061.svg" />
</span>
</button>
</div>
</div>
<div class="card-body" id="kt_dateQuestion_body">
<Calendar />
</div>
<div class="card-footer pt-4" id="kt_dateQuestion_footer">
<div class="d-flex flex-stack">
<div class="d-flex align-items-center me-2">
<button
class="btn btn-sm btn-icon btn-active-light-primary me-1"
type="button"
data-bs-toggle="tooltip"
title="Coming soon"
>
<i class="bi bi-paperclip fs-3"></i>
</button>
<button
class="btn btn-sm btn-icon btn-active-light-primary me-1"
type="button"
data-bs-toggle="tooltip"
title="Coming soon"
>
<i class="bi bi-upload fs-3"></i>
</button>
</div>
<button
class="btn btn-primary"
type="button"
data-kt-element="send"
id="kt_dateQuestion_close"
>
Envoyer
</button>
</div>
</div>
</div>
</div>
</template>

--------------------------------------------------------------------------------

Thank you in advance.

Tania