fullcalendar

Mattepuffo's logo
Usare FullCalendar in PrimeVUE

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"
  }

Mattepuffo's logo
Impostare un tooltip su jQuery FullCalendar

Impostare un tooltip su jQuery 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.

Mattepuffo's logo
Usare AJAX con jQuery FullCalendar

Usare AJAX con jQuery FullCalendar

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.