L’utilizzo del componente Calendar di Instant Developer Cloud non è subito intuitivo ma da oggi l’esempio online sulla Console è stato migliorato in modo da chiarirne meglio il funzionamento.
Come tutti gli esempi è possibile clonarlo nel proprio utente di Community oppure in quella della propria organizzazione, cliccando sui tre puntini a fianco dell’esempio e cliccando su Clona esempio.
Come un po’ per tutti gli oggetti di Instant Developer Cloud la fonte dati è una datamap e nell’esempio in questione questa ha come documento caricato Event (la nostra entità con gli eventi).
La datamap non è in autoload in quanto vogliamo caricarla con gli eventi del mese visualizzato all’apertura del calendario. A questo scopo utilizziamo l’evento onDatesRender di Calendar che ha come parametro l’oggetto info che contiene le informazioni del calendario visualizzato e in particolare:
activeStart - data inizio dei giorni visualizzati
activeEnd - data fine dei giorni visualizzati
currentStart - data inizio mese corrente
currentEnd - data fine mese corrente
Questo nel caso della visualizzazione mensile per il mese di giugno avremo:
activeStart - 26 mag
activeEnd - 6 lug
currentStart - 1 giu
currentEnd - 30 giu
In questo evento quindi dobbiamo caricare una collection di eventi ma per fare questo non possiamo usare la load della datamap che provocherebbe la rigenerazione del calendario e quindi la notifica dell’evento onDatesRender e quindi un loop infinito di caricamenti.
Utilizziamo quindi il codice seguente:
// I set the event filter based on the current month's dates
let filter = {
startDate : ">" + info.calendarView.currentStart,
endDate : "<" + info.calendarView.currentEnd
};
// I load the events
let collEvents = yield App.EventsLibrary.Event.loadCollection(app, filter, {useQBE : true});
// I delete old events
while ($calendarDM.length > 0) {
$calendarDM.remove($calendarDM.rows[0]);
}
// I add new events uploaded from the database
for (let i = 0; i < collEvents.length; i++) {
let ev = collEvents.rows[i]; //type:EventsLibrary.Event
yield ev.adjustEvent();
$calendarDM.add(ev);
}
Qui impostiamo la variabile filter con i criteri QBE da utilizzare nella loadCollection del documento Event. Ottenuta la collection rimuoviamo tutte le righe già presenti nella datamap e quindi vi aggiungiamo quelle caricate.
Per vuotare la datamap non è possibile utilizzare il metodo clear perché anche questo scatenerebbe il loop spiegato più sopra.
Ciao Paolo, quanto a fondo è personalizzabile il calendario di Cloud?
Al momento su foundation stiamo usando Syncfusion che supporta molte cose simpatiche ma è anche un’odissea personalizzarlo (ma ce la si fa!).
Con personalizzazione intendo aggiunta di campi custom all’evento, aspetto degli eventi nella griglia del calendario, viste personalizzate (es 2-3-5-7 giorni), raggruppamento per risorsa avendo più agende diverse mostrare gli appuntamenti in colonna dedicata per ogni giorno, cosette del genere insomma
@d.termini siccome non sapevo se si potesse fare ho chiesto a ChatGPT e prontamente mi ha detto di utilizzare l’opzione hiddenDays (che funziona sia su Calenda che su Calendar6) ed effettivamente funziona.
Se nelle opzioni di avvio del calendario imposti hiddenDays = [0, 6] nascondi il sabato e la domenica (la domenica per gli anglosassoni è il primo giorno della settimana).
Immagino che se chiedi altro a ChatGPT ti saprà dire se è possibile o meno.
Ricordo che Calendar e Calendar6 di Instant Developer Cloud sono implementati a partire da FullCalendar rispettivamente versione 4 e 6.
@d.termini potresti vedere, con l’aiuto di ChatGPT, se le cose che ti piacerebbe avere su FullCalendar ci sono (magari guarda direttamente la versione 6) in modo da poi preparare un esempio per tutti (quello lo preparo io) sia per Foundation che per Cloud.
Grazie @paolo.giannelli , era più per una valutazione nel caso debba implementare un’agenda di gruppo per un’applicazione mobile e scegliere quale componente usare.
Comunque gli assistenti IA sono utili fino ad un certo punto, mi sono trovato in vari casi in cui inventava funzioni inesistenti solo perché trovava risultati (es su stackoverflow) dove c’era gente che commentava “sarebbe utile una funzione tipo impostaQuestaModalità()”, poi gli chiedi spiegazioni e ti dice “ah è vero, non esiste, scusami per l’errore”…
Evidentemente c’è davvero molto bisogno di imparare a scrivere i prompt per evitare questi strafalcioni
Ciao Paolo,
noi usiamo fullCalendar con delle nostre personalizzazioni sia su cloud che su foundation.
Abbiamo notato che se si hanno molti eventi (esempio agenda mensile) il caricamento e la visualizzazione su fullCalendar è un pochino lenta. Su foundation abbiamo notato un netto miglioramento andando a utilizzare
calendar.addEventSource(eventsArray);
Praticamente passi direttamente un Array JSON con tutti gli eventi e fullcalendar li mostra immediatamente.
Volevo capire se la stessa cosa si potesse fare anche su cloud, il mio dubbio è sul fatto che il fullCalendar di cloud è ancorato alla DataMap.
@d.termini fullCalendar ha dei plugin aggiuntivi che ti permettono di personalizzarlo a fondo.
