Vue component example

<template>
  <div id="events-calendar-frontend-app">
    <v-calendar
        :attributes="attributes"
        :available-dates='{ start: new Date(), end: null }'
        @update:to-page="onChangeMonth">
      <div slot="day-popover" slot-scope="{ day, dayTitle, attributes }">
        <popover-row
            class="event-card"
            v-for="attr in attributes"
            :key="attr.key"
            :attribute="attr"
        >
          <img :src="attr.customData.imageUrl" alt="">
          <div class="event-card__info">
            <div class="event-card__title">
              <a :href="attr.customData.link" target="_blank"> {{ attr.customData.title }} </a>
            </div>
            <div>
              <span>Дата начала: </span> {{ attr.customData.start_date | formatDate }}
            </div>
            <div>
              <span>Дата окончания: </span> {{ attr.customData.end_date | formatDate }}
            </div>
            <div>
              <span>Место проведения: </span> {{ attr.customData.location || 'не указано' }}
            </div>
          </div>
        </popover-row>
      </div>
    </v-calendar>
  </div>
</template>

<script>

import EventPopover from "frontend/EventPopover.vue";
import {mapActions, mapGetters} from "vuex";
import PopoverRow from 'v-calendar/lib/components/popover-row.umd.min';

export default {
  name: 'EventsCalendar',
  components: {
    EventPopover,
    PopoverRow,
  },
  data() {
    return {
      pageForThisMonth: null,
    }
  },
  computed: {
    ...mapGetters([
        'getEvents'
    ]),
    attributes() {
      return [
        {
          key: 'today_111',
          highlight: {
            color: 'indigo',
            fillMode: 'light',
          },
          dates: new Date(),
        },
        ...this.getEvents.map(t => ({
          key: `event.${t?.id}`,
          dates: [{
            start: new Date(t?.start_date),
            end: new Date(t?.end_date)
          }],
          dot: 'purple',
          highlight: {
            color: 'orange',
            fillMode: 'light',
            contentClass: new Date(t?.start_date) < new Date() ? 'in_past' : '',
            class: new Date(t?.start_date) < new Date() ? 'in_past' : ''
          },
          contentStyle: {
            color: '#fafafa',
          },
          customData: t,
          popover: {
            visibility: 'hover',
            slot: 'day-popover',
            isInteractive: true,
            hideIndicator: true,
            placement: 'bottom-end'
          },
        })),
      ];
    },
    thisMonth() {
      return this.pageForThisMonth.month;
    },
    thisMonthYear() {
      return this.pageForThisMonth.year;
    },
    nextMonth() {
      return this.thisMonth === 11 ? 0 : this.thisMonth + 1;
    },
    nextMonthYear() {
      return this.thisMonth === 11 ? this.thisMonthYear + 1 : this.thisMonthYear;
    },
  },
  methods: {
    ...mapActions([
      'loadEventsByDates'
    ]),
    onChangeMonth({month, year}) {
      this.pageForThisMonth = {month, year};

      let offsetMinutes = (new Date()).getTimezoneOffset();
      this.loadEventsByDates({
        start: new Date(this.thisMonthYear, this.thisMonth -2, 1, 0, -1*offsetMinutes),
        end: new Date(this.nextMonthYear, this.nextMonth , 1, 0, -1*offsetMinutes)
      });
    },
  },
  filters: {
    formatDate: function (datetime) {
      let year = String(datetime.getFullYear()).slice(-2);
      let month = datetime.getMonth() < 9 ? `0${datetime.getMonth() + 1}` : datetime.getMonth() + 1;
      let day = (datetime.getDate() < 9 ? '0' : '') + datetime.getDate();
      let time = `${datetime.getHours()}:${datetime.getMinutes() < 10 ? '0' + datetime.getMinutes() : datetime.getMinutes()}`;

      return `${day}.${month}.${year} ${time}`;
    }
  }
}
</script>

<style lang="css">
  @media screen and (max-width: 655px) {
    .vc-popover-content-wrapper.is-interactive {
      width: 100vw;
      padding: 0 1rem;
    }
  }

  .vc-day-popover-container {
    padding: 15px;
    background-color: #fff;
    color: #5f506b;
    box-shadow: 0px 1px 50px 16px rgba(34, 60, 80, 0.2) !important;
    border: none;
    border-radius: 15px;
  }

  .vc-popover-caret {
    display: none !important;
  }

  .event-card {
    border-bottom: solid 1px rgba(34, 60, 80, 0.2);
    padding: 16px 0;
  }

  .event-card:first-child {
    padding-top: 0;
  }

  .event-card:last-child {
    padding-bottom: 0;
  }

  .event-card img {
    max-width: 150px;
    max-height: 150px;
  }

  .event-card__info {
    max-width: 250px;
    padding-left: 25px;
    text-align: left;
  }

  .event-card__info span {
    font-weight: bold;
  }

  .event-card__title {
    padding-bottom: 15px;
    text-align: center;
  }

  .vc-day-popover-container div .event-card:last-child {
    border: none;
  }

  .event-card__text p:last-child {
    margin-bottom: 16px;
  }

  .in_past {
    opacity: 0.45 !important;
  }
</style>