In questo articolo vedremo come creare una pagina custom in Wordpress in cui useremo FullCalendar.
I dati li prenderemo con una query custom.
Tutte le operazioni su files verranno fatte dentro al tema child, senza che ve lo specifico ogni volta.
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"
}
FullCalendar non mette a disposizione degli eventi per intercettare il cambio di mese.
Ma possiamo farlo usando gli eventi delle frecce, che hanno delle classi CSS univoche.
Il codice qui sotto usa jQuery, e si riferisce alla versione 3 di FullCalendar.
FullCalendar è un plugin per jQuery che ci consente di avere un completo calendario nelle pagine web.
Ne abbiamo già parlato in questo articolo dove abbiamo visto come interagire con AJAX e PHP.
Oggi aggiungiamo un piccolo pezzo, e cioè un tooltip al passaggio del mouse.
Non sempre vogliamo vedere tutte le informazioni sulla pagina, e un tooltip da attivare al passaggio del mouse può essere comodo per vedere infomarzioni aggiuntive.
FullCalendar è un ottimo e completo calendario usabile attraverso jQuery; una dimostrazione la potete alla pagina strumenti di questo stesso blog.
Uno dei punti di forza è che può prendere gli eventi del giorno da un database usando AJAX.
Oggi vediamo proprio questo.
Cominciamo con l'inclusione delle librerie che ci servono:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<script defer type="text/javascript" src="js/moment.js"></script>
<script defer type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
Come vedete è richiesto jQuery, la libreria moment.js e files per FullCalendar.