Hello Lauris

Thanks for reply

Well I added static data to Calendar (the static data of original calendar of Metronic theme) and I also included Calendar's component in same button's page... it is displayed correctly but, it is not the case of same Calendar's component on the "kt-drawer" Component.

Please check this image :


Maybe issue comes from Calendar's options service file ?

Kindly, could you check it ? :


import { reactive, ref } from "vue";
import moment from "moment";
import "moment/dist/locale/fr";
import frLocale from "@fullcalendar/core/locales/fr";
import "@fullcalendar/core/vdom";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import { todayDate, TODAY } from "@/app/pollCreation/allFakeData/eventsCal";
import type { Slot } from "@/services/interfaces/pollInterfaces/poll.interfaces";
import { elementEmitter } from "@/services/composables/eventEmitter"
import events from '../../../../../core/data/events';


export default class service {
allEventsSlots = ref<Slot[]>([]);
calendarEvents = reactive<any>([]);

getNewEvent = (e) => {
this.allEventsSlots.value.push(e);
};

getUpdateEvent = (x) => {
const response = this.allEventsSlots.value.findIndex((e) => e.idEvent === x.idEvent);
this.allEventsSlots.value.splice(response, 1, x); // splice : remplacer (il sert à update and delete) --> on récupre l'index, on splice un élément et on le remplace par x
elementEmitter.emitUpdate(this.allEventsSlots.value);
};

deleteEvent = reactive((a) => {
this.allEventsSlots.value.splice(
this.allEventsSlots.value.findIndex((e) => e.idEvent === a),
1
); // on recupere l'index et on splice 1 élément
this.calendarOptions.eventRemove;
elementEmitter.emitUpdate(this.allEventsSlots.value);
});

calendarOptions = reactive({
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
headerToolbar: {
left: "prev,next today",
center: "",
// right: "dayGridMonth,timeGridWeek,timeGridDay"
right: "title",
},
views: {
// dayGridMonth: { buttonText: "Mois" },
timeGridWeek: { buttonText: "Semaine" },
// timeGridDay: { buttonText: "Jours" },
},
initialView: "timeGridWeek",
locales: frLocale,
locale: "fr",
initialDate: TODAY,
firstDay: todayDate,
navLinks: true, // on peut cliquer sur les noms de jour/semaine pour naviguer dans les vues
selectable: true,
selectMirror: true,
events: events,
editable: true,
dayMaxEvents: true, // autoriser le lien "plus" lorsque trop d'événements
height:500,

selectAllow: (selectInfo) => {
// désactiver addEvent avant aujourd'hui
const beforeToday = todayDate.diff(selectInfo.start);
const noEventsBeforeToday = beforeToday <= 0;
return noEventsBeforeToday;
},

select: (calendarData) => {
const cal = calendarData.view.calendar;
cal.unselect();
cal.addEvent({
start: calendarData.start,
end: calendarData.end,
allDay: calendarData.allDay,
});
},

eventClick: (e) => {
const idEvent = e.event._instance.defId;
this.deleteEvent(idEvent);

e.event.remove();
},

eventAdd: (e) => {
this.calendarEvents.push(e)
const idEvent = e.event._instance.defId;
const start = moment(e.event.start).locale('fr').format("LLLL");
const end = moment(e.event.end).locale('fr').format("LLLL");

const newEvent = { idEvent, start, end };
this.getNewEvent(newEvent);

elementEmitter.emitUpdate(this.allEventsSlots.value);
},

eventChange: (e) => {
const idEvent = e.event._instance.defId;
const start = moment(e.event.start).locale('fr').format("LLLL");
const end = moment(e.event.end).locale('fr').format("LLLL");

const updateEvent = { idEvent, start, end };

this.getUpdateEvent(updateEvent);
},

eventRemove: (e) => {},
});

isCalendarOptions = () => {
return this.calendarOptions;
};
isallEventsSlots = () => {
return this.allEventsSlots
}
}


Thanks in advance for your help.

Tania