Esempio di Calendario

Introduzione

In questo articolo vediamo come integrare un componente nel motore grafico RD3 per mostrare un calendario utilizzando Fullcalendar.
In allegato trovate anche il progetto di esempio per il motore grafico FLUID.
Vogliamo ottenere questo risultato:

Definizione nell'IDE

Per prima cosa, nel progetto è stata creata una libreria client chiamata Full Calendar Lib e sono state definite le sue proprietà, i suoi metodi e i suoi eventi:

Le proprietà currentDate e viewType servono per impostare, rispettivamente, la data corrente mostrata dal calendario e il tipo di visualizzazione (mensile, settimanale, ecc.), mentre la proprietà options serve per configurare il componente.

Gli eventi definiti sono i seguenti:

• OnDateClick , notificato quando si clicca su una cella vuota del calendario;
• OnEventClick, notificato quando si clicca su un evento del calendario;
• OnEventDrop, notificato quando un evento trascinato tramite drag&drop viene rilasciato su una cella del calendario;
• OnChangeViewType, notificato quando si cambia il tipo di visualizzazione del calendario, per esempio da mensile a settimanale;
• OnChangeInterval, notificato quando cambia il range di date mostrato dal calendario, per esempio dopo aver impostato la proprietà currentDate;

Sono stati definiti inoltre dei metodi per gestire gli eventi del calendario:

• il metodo AddEvent serve per mostrare un evento nel calendario;
• il metodo UpdateEvent serve modificare un evento del calendario;
• il metodo RemoveEvent serve per eliminare un evento dal calendario;

È stata poi aggiunta una videata all'applicazione e al suo interno è stata trascinata la libreria client.
Nell'evento Load di questa videata viene chiamata la funzione InitCalendar in cui viene inizializzato il componente impostando la proprietà options e viene scelta la visualizzazione iniziale impostando la proprietà viewType.

Classe wrapper lato client

Nella custom sono state copiate le librerie main.min.js e main.min.css dei moduli core, daygrid e interaction scaricate dal sito di riferimento. Inoltre è stato creato un file javascript MyCalendar.js contenente il codice della nostra classe wrapper.

Nota: Non abbiamo modificato i file Desktop.htm e Desktop_sm.htm perché il file MyCalendar.js viene automaticamente caricato mentre i file main.min.js e main.min.css vengono caricati dalla classe wrapper MyCalendar.js all'apertura della videata.

Nella classe javascript è stato definito il costruttore nel quale viene estesa la classe CustomElement. È stata definita la property options per intercettare la modifica della proprietà da parte del server. Nel setter, qualora il componente non sia ancora stato realizzato, viene memorizzato il valore in una variabile temporanea this._options, altrimenti viene aggiornato subito il componente grafico.

Caricamento file javascript del componente

È stato definito il metodo Init nel quale vengono caricati i file javascript e i css del componente Fullcalendar.

I file javascript sono dipendenti l'uno dall'altro: il file main.min.js del modulo core deve essere caricato per primo. Per rispettare le dipendenze, i javascript sono stati inseriti in un array che è stato poi passato alla funzione LoadRequirements. In questo modo il caricamento avverrà nell'ordine definito nell'array.

Il metodo Init viene subito invocato in modo da caricare i file del componente il prima possibile (vedi chiamata MyCalendar.Init();).

Per essere sicuri di caricare i file una volta sola è stata usata la variabile statica MyCalendar.inited. Se ci sono più istanze, infatti, non è necessario che tutte carichino i javascript e i css.

Realizzazione del componente

È stato definito il metodo Realize nel quale viene costruito l'elemento tramite le classi ed i metodi delle librerie "native" di FullCalendar.
Viene innanzitutto creato l'elemento html che conterrà il calendario.
Vengono poi impostate le opzioni, compresi gli eventi che scattano in seguito all'interazione con il calendario.
Infine viene creato l'oggetto calendar.

Infine sono stati definiti i metodi per la gestione degli eventi nel calendario.

Il metodo addEvent permette di mostrare un nuovo evento nel calendario, chiamando la funzione nativa del componente.
Il metodo removeEvent permette di eliminare un evento dal calendario. Viene prima recuperato l'evento da eliminare e poi chiamata la funzione nativa del componente.
Il metodo updateEvent permette di modificare un evento mostrato dal calendario. Viene prima recuperato l'evento del calendario e ne vengono poi modificate le proprietà in base a quelle presenti nel parametro prop passato al metodo.

Come usare il calendario in un proprio progetto

È possibile importare in un altro progetto il calendario realizzato in questo esempio. Per farlo occorre eseguire le seguenti operazioni:

• Aprire il progetto FullCalendar e il progetto di destinazione
• Trascinare la videata Calendar View dal progetto FullCalendar al progetto di destinazione.
  Questa operazione porterà nel progetto anche la videata Event View, la classe Event, la libreria FullCalendar Lib e il database Events DM
• Staccare la classe Events e le sue proprietà dal database Events DB cliccando con il tasto destro del mouse sulla classe e sulle proprietà e selezionando "Stacca da: Events Table" dal menù contestuale
• Modificare il metodo LoadEvents della Calendar View per caricare gli eventi dalla propria sorgente dati. Per ciascun evento occorre creare istanze della classe Event e inserirle nella variabile globale Events.
• Cancellare il database Events DB
• Copiare la custom del progetto FullCalendar nel proprio progetto.
  N.B.: Poiché la directory custom è incorporata, occorre compilare il progetto FullCalendar almeno una volta per estrarre e quindi copiare la custom nel proprio progetto.