Usare FullCalendar in PrimeVUE

In questo articolo vediamo come usare FullCalendar in PrimeVUE.
La prima cosa da fare è aggiungere le dipendenze; nel vosto package.json potete aggiungere queste:

  "dependencies": {
	..............
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@fullcalendar/timegrid": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@vuelidate/core": "^2.0.0-alpha.34",
    "@vuelidate/validators": "^2.0.0-alpha.26"
  }

Installate le dipendenze aggiungete queste due righe nel file main.js:

import FullCalendar from '@fullcalendar/vue3';
app.component('FullCalendar', FullCalendar);

A questo punto nel nostro componente:

<template>
  <div class="grid">

    <div class="col-12">
      <div class="card mb-0 mt-5">
        <FullCalendar :events="events" :options="options"/>
      </div>
    </div>

  </div>
</template>

<script>
import AllenamentiService from '@/service/AllenamentiService';

import '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export default {
  data() {
    return {
      allService: null,
      options: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialDate: new Date(),
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        events: null
      },
    }
  },
  created() {
    this.allService = new AllenamentiService();
  },
  mounted() {
    this.getAllenamenti();
  },
  methods: {
    getAllenamenti() {
      this.allService.getAll().then(data => {
        this.options.events = data;
      });
    }
  }
}
</script>

AllenamentiService è il servizio da cui prendo i dati in formato JSON.
Vi posto il codice, ma ovviamente dovete tararlo sulle vostre API:

export default class AllenamentiService {

    getAll() {
        return fetch('URL_API')
            .then(res => res.json())
            .then(d => d.allenamenti);
    }

}

Enjoy!