Mettiamo che vogliate personalizzare il widget Calendar aggiungendo una funzionalità non gestita dall’implementazione standard di Instant Developer Cloud come si procede?
Per prima cosa si aggiunge alle librerie una propria libreria di tipo Applicazione.
Al suo interno di aggiunge una classe che estende ApplicationLibrary.Calendar di tipo Elemento.
All’interno della classe si aggiunge una risorsa di tipo Script client all’interno della quale si andrà a scrivere il codice che aggiunge una nuova funzione o modifica una funzione già esistente.
Per esempio se vogliamo rendere di un colore diverso i sabati e le domeniche ed anche alcuni giorni specifici (ii giorni di chiusura dell’azienda) come potremmo fare visto che Calendar di suo non lo fa?
Andando a vedere la documentazione di Calendar vediamo che utilizza questo componente esterno:
In particolare è utilizzata la versione 4 e visualizzando la relativa documentazione troviamo che le celle dei giorni possono essere modificate utilizzando dayRender che va implementato come callback. Per farlo occorre sovrascrivere la funzione di inizializzazione del calendario initCalendar che troviamo in ApplicationLibrary nella dir ExternalWidgets, classe Calendar, dir Resources e nella risorsa Calendar.
Copiamo tutta la funzione:
Client.Calendar.prototype.initCalendar = function (el)
nella nostra nuova risorsa e dopo l’istruzione:
this.options.events = this.data;
aggiungiamo questo codice:
this.options.dayRender = function (dayRenderInfo) {
let currentDate = dayRenderInfo.date;
let el = dayRenderInfo.el;
let currentDay = currentDate.getDay();
//
if (this.options.skipWeekend && (currentDay === 0 || currentDay === 6)) {
el.classList.add(this.options.skipWeekendClass);
}
}.bind(this);
Con questo codice verifichiamo che il giorno della cella sia un sabato o una domenica e in caso affermativo aggiungiamo una specifica classe css alla cella.
Le variabili skipWeekend e skipWeekendClass le definiamo nell’inizializzazione del calendario.
Allo stesso modo potremmo aggiungere un array di date per definire i giorni di chiusura.
La classe css da passare potrebbe essere questa:
.calendar-dayweekend {
background-color: #e9f2e5;
}
Che semplicemente colora diversamente lo sfondo delle celle.
Nel frontend il Calendar da utilizzare sarà quello della nostra libreria e non quello standard.
Questo è solo un abbozzo di come fare, sono ben accetti ulteriori suggerimenti.