v-calendar doesn't work well in production

[viccvanco]

Hi, I am in a strange situation. Locally, I have no problem, I can see my events that I created on the calendar. But in production, events don't appear, and I noticed that when I arrive on the page, the calendar doesn't initialize (I see it because the month name of the calendar doesn't appear when I arrive). And when I change month for example, the calendar initializes well, but I still can't see my events... I repeat, this issue occurs only in production. Locally, everything works perfectly well.

[covik]

Nobody can help you without seeing the code

[viccvanco]

Here is my Calendar component :

<template>
    <div>
        <div class="heading">
            <div>
                <h2 class="h1">Calendrier</h2>
            </div>
            <div class="switch-field">
                <div
                    v-for="(type, index) in types"
                    :key="index"
                >
                    <input type="radio" :id="`radio-${type.value}`" v-model="currentType" :value="`${type.value}`" checked>
                    <label :for="`radio-${type.value}`">{{ type.label }}</label>
                </div>
            </div>
        </div>
        <div class="switch-month">
            <button
                class="previous"
                @click="prev"
            >
                <i class="fas fa-chevron-left"></i>
            </button>
            <div v-if="$refs.calendar" class="month-name">
                {{ $refs.calendar.title | capitalize }}
            </div>
            <button
                class="next"
                @click="next"
            >
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
        <v-sheet>
            <v-calendar
                ref="calendar"
                v-model="focus"
                :events="events"
                :event-color="getEventColor"
                :type="currentType"
                :weekdays="weekday"
                :short-weekdays="false"
                event-overlap-mode="column"
                :event-overlap-threshold="30"
                :event-more="false"
                event-more-text="{0} events hidden"
                locale="fr"
                @click:event="onclickCalendar"
            ></v-calendar>
        </v-sheet>
        <AddEventPopup
            :showAddEventPopup="showAddEventPopup"
            :selectedDate="selectedDate"
            @close-popup="closePopup"
        />
        <UpdateEventPopup
            :showUpdateEventPopup="showUpdateEventPopup"
            :selectedEvent="selectedEvent"
            @close-popup="closePopup"
        />
        <EventPopup
            :showEventPopup="showEventPopup"
            :selectedEvent="selectedEvent"
            @close-popup="closePopup"
            @show-update-event-popup="showUpdateEvent"
        />
        <EventsPopup
            :selectedDate="selectedDate"
            :selectedDayEvents="selectedDayEvents"
            :showEventsPopup="showEventsPopup"
            @close-popup="closePopup"
            @show-event="showEvent"
            @show-add-event-popup="showAddEvent"
        />
    </div>
</template>

<script>

import $ from 'jquery'
import AddEventPopup from './Calendar/AddEventPopup'
import UpdateEventPopup from './Calendar/UpdateEventPopup'
import EventPopup from './Calendar/EventPopup'
import EventsPopup from './Calendar/EventsPopup'
import request from '../../utils/request'

export default {
    name: 'Calendar',
    components: {
        AddEventPopup,
        UpdateEventPopup,
        EventPopup,
        EventsPopup
    },
    data: () => ({
        focus: '',
        currentType: 'month',
        types: [
            {
                label: 'Mois',
                value: 'month'
            },
            {
                label: 'Semaine',
                value: 'week'
            },
            {
                label: 'Jour',
                value: 'day'
            }
        ],
        weekday: [1, 2, 3, 4, 5, 6, 0],
        selectedEvent: {},
        selectedElement: null,
        events: [],
        showAddEventPopup: false,
        showEventPopup: false,
        showUpdateEventPopup: false,
        showEventsPopup: false,
        selectedDate: '',
        selectedDayEvents: []
    }),
    mounted () {
        this.$refs.calendar.checkChange()
        this.getEventList()
    },
    updated () {
        const self = this
        const calendar = this.$refs.calendar
        $('.v-event').each(function (i, obj) {
            if ($(obj).hasClass('appointment')) {
                $(obj).parent().addClass('day-appointment')
            } else if ($(obj).hasClass('vacation')) {
                $(obj).parent().addClass('day-vacation')
            }
        })

        if ($('.btn-more-events').length) {
            $('.btn-more-events').destroy()
        }

        $('.v-calendar-weekly__day').each(function (i, obj) {
            if ($(this).children('.v-event').length > 1) {
                $(this).children('.v-event:not(:first)').each(function (i, child) {
                    $(child).addClass('hidden')
                })
                let nbOtherEvents = $(this).children('.v-event:not(:first)').length
                $(this).append(`<span class="btn-more-events">+${nbOtherEvents}</span>`)
            }
        })

        $('.v-calendar-weekly__day').mouseenter(function () {
            if (!$(this).hasClass('v-past')) {
                $(this).append('<div class="add-event"><i class="fas fa-plus"></i></div>')
            }
        })

        $('.v-calendar-weekly__day').mouseleave(function () {
            if ($(this).find('.add-event').length) {
                $(this).find('.add-event').remove()
            }
        })

        $(document).on('click', '.add-event', function () {
            let day = $(this).parent().find('.v-calendar-weekly__day-label').find('.v-btn__content').text()
            let month = self.getMonthNumber(calendar.title.split(' ')[0].toLowerCase())
            let year = calendar.title.split(' ')[1]
            let hours = (new Date()).getHours()
            let minutes = (new Date()).getMinutes()
            let selectedDate = new Date(year, month, day, hours, minutes, 0, 0)
            self.addEvent(selectedDate)
        })

        $(document).on('click', '.btn-more-events', function () {
            let day = $(this).parent().find('.v-calendar-weekly__day-label').find('.v-btn__content').text()
            let month = self.getMonthNumber(calendar.title.split(' ')[0].toLowerCase())
            let year = calendar.title.split(' ')[1]
            let selectedDate = new Date(year, month, day, 0, 0, 0, 0)
            self.showEvents(selectedDate)
        })
    },
    methods: {
        getEventColor (event) {
            return event.color
        },
        prev () {
            this.$refs.calendar.prev()
        },
        next () {
            this.$refs.calendar.next()
        },
        async getEventList () {
            const response = await request.get('/event/list', {})
            if (response.status === 200) {
                let events = []
                for (const el of response.data.data) {
                    events.push({
                        id: el.id,
                        name: el.title,
                        type: this.getEventTypeFR(el.type),
                        color: el.type,
                        description: el.description,
                        start: new Date(el.start_date),
                        end_date: new Date(el.end_date),
                        location: el.location,
                        link: el.link,
                        timed: true
                    })
                }
                this.events = events
            } else {
                console.log(response)
            }
        },
        onclickCalendar ({ nativeEvent, event }) {
            this.showEvent(event)
            this.selectedElement = nativeEvent.target
            nativeEvent.stopPropagation()
        },
        showEvent (event) {
            console.log(event)
            if (this.showEventsPopup) {
                this.showEventsPopup = false
            }
            this.selectedEvent = event
            this.showEventPopup = !this.showEventPopup
        },
        showEvents (selectedDate) {
            this.selectedDayEvents = this.events.filter(function (event) {
                let dateEvent = new Date(event.start.getFullYear(), event.start.getMonth(), event.start.getDate())
                if (dateEvent.getTime() === selectedDate.getTime()) {
                    return event
                }
            }).sort(function (a, b) {
                return a.start.getTime() - b.start.getTime()
            })
            this.selectedDate = selectedDate
            this.showEventsPopup = true
        },
        showAddEvent () {
            this.closePopup('show_events')
            this.showAddEventPopup = true
        },
        showUpdateEvent (event) {
            this.closePopup('show_event')
            this.showUpdateEventPopup = true
            this.selectedEvent = event
        },
        addEvent (date) {
            this.selectedDate = date
            this.showAddEventPopup = !this.showAddEventPopup
        },
        closePopup (popupName) {
            if (popupName === 'add_event') {
                this.showAddEventPopup = false
            } else if (popupName === 'show_event') {
                this.showEventPopup = false
            } else if (popupName === 'update_event') {
                this.showUpdateEventPopup = false
            } else if (popupName === 'show_events') {
                this.showEventsPopup = false
            }
        },
        getEventTypeFR (type) {
            let types = {
                'appointment': 'Rendez-vous',
                'vacation': 'Congé'
            }
            return types[type]
        },
        getMonthNumber (monthName) {
            const months = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
            for (let i = 0; i < months.length; i++) {
                if (months[i] === monthName) {
                    return i
                }
            }
        }
    }
}
</script>

[covik]

Can you confirm HTTP endpoint /event/list return events in production?
Use network tab in chrome and see if there are any events.