Calendario versatile 2

Ed ecco un altro bellissimo calendario versatile che ancora una volta mi ha segnalato l' amico Rizzi Renato. Naturalmente, sempre rispettando le scelte dell' autore Maurizio Mauri, del quale è presente l' indirizzo mail nel suo calendario originale, ho fatto la mia versione. Perchè fare modifiche ad un programma che funziona benissimo? La ragione è molto semplice: l' originale fà riferimento a pagine internet e inoltre consta di più files separati. Un calendario web, a mio parere, deve innanzitutto funzionare senza internet, perchè le risorse in rete oggi ci sono e domani non ci sono più, causando, in questo secondo caso, fastidiosi messaggi di errore. Secondariamente, per la portabilità, deve essere costituito da un unico file. In secondo luogo il mio è pensato per essere utilizzato all' interno di un iframe, poichè il calendario è solo una di più informazioni che vogliamo gestire in una pagina web. E così ho fatto ed ho realizzato la mia variante. Qui sopra sono riportati, perfettamente funzionanti, la mia opera a sinistra, e l' originale a destra. Oltre ai motivi che ho spiegato, l' originale aveva anche altre due particolarità: navigazione solo di mese in mese, e non di anno in anno, e inoltre il fastidioso allungarsi e accorciarsi a seconda che siano presenti cinque o sei righe. Così ho provveduto a compensare queste mancanze nonchè ad aggiungere altre piccole migliorie, come, ad esempio, un link per ritornare alla data odierna. E ora passo alle spiegazioni. Questo calendario prevede le feste (colore rosso) e gli eventi (note, sottolineate e visualizzate quando il mouse passa sopra al giorno). Naturalmente la compilazione è riservata a web master dilettanti perchè bisogna capire un minimo di html, css e javascript. Se aprite con un Editor di Testo, o meglio ancora con un Editor HTML, i due files che scaricate "calendarioenzomaurimini.html e calendarioenzomauri.html" potete vedere all' inizio dello script :

// feste fisse stabilite dalla legge (mese + giorno)
var feste = [
0, "Pasqua",
0, "Pasquetta",
101, "Capodanno dai tempi dei tempi",
106, "Epifania dai tempi dei tempi",
425, "Anniversario della liberazione dal 1946",
501, "Festa del lavoro dal 1890",
602, "Festa della Repubblica",
815, "Ferragosto dai tempi di Augusto",
908, "Festa della Madonna a Maniago e Pordenone dal 1655",
1101, "Tutti i Santi dal 1949",
1208, "Festa della Immacolata Concezione dal 1854",
1225, "Natale dai tempi dei tempi",
1226, "Santo Stefano dai tempi dei tempi"
];

Sono le feste previste per legge in Italia. Potete saltare Pasqua e Pasquetta che saranno calcolate dal programma, ma soffermatevi sulla riga: "Festa della Madonna a Maniago e Pordenone dal 1655" che è la festa del Santo Patrono a Maniago e Pordenone. Potete sostituirla con il riferimento al santo patrono della vostra città, oppure cancellarla semplicemente. Un unico avvertimento: il numero che si trova davanti al nome (908) rappresenta il mese e il giorno (settembre, 08). I milanesi dovranno scrivere, ad esempio: 1207, "Sant'Ambrogio". Le note, indicate con il giorno sottolineato, vengono visualizzate quando si passa col mouse sul giorno. Le feste verranno sempre visualizzate come note. Subito dopo le feste nazionali ci sono le vacanze e, a seguire, le note, come ad esempio:

var note = [
"160412", "12 Maggio 2016 Enzo ha stravolto il calendario di Maurizio Mauri vedi link: $http://enzo.panificiocoassin.it",
"160512-160516", "Vacanze",
"160815", "Link per il sito di Rizzi Renato$http://www.renatoweb.it",

Ogni riga è occupata da una nota. Una nota prevede un campo data (fra virgolette) e un campo per la descrizione dell' evento (ugualmente fra virgolette) e termina sempre con la virgola. Il campo data può essere una semplice data o un insieme di date. Una data è composta di 6 caratteri numerici; due per l'anno, due per il mese (sottratto di uno) e uno per il giorno. Ad esempio "160230" vuol dire 30 marzo 2016. Il campo data può essere composto da una o più date separate dalla virgola, oppure da due date separate da un trattino.

Ad esempio:
"160330, 160422, 160514", "Partita di calcio",
(tre partite di calcio in tre date diverse), che è un modo abbreviato per scrivere:
"160330", "Partita di calcio",
"160422", "Partita di calcio",
"160514", "Partita di calcio",
Oppure:
"160330-160403,", "Gita sulle Dolomiti",

Il questo caso l'evento è previsto per tutti i giorni compresi dal 30 aprile al 3 maggio 2016. Il campo descrizione di solito è una semplice stringa (compresa fra le virgolette). Può anche essere un insieme di n coppie di stringhe comprese fra parentesi quadre.

Ad esempio:
"160420", ["15.00-17.00", "Giorno X"],

Le due stringhe dell tabella verranno visualizzate in una tabella del tipo:

Se nelle parentesi quadre vi sono più coppie di stringhe, separate da virgola, saranno visualizzate più righe dello stesso tipo. La seconda stringa può anche essere linkata, aggiungendo alla stringa il segno di $ seguito dal link

Esempio:
"160420", ["15.00-17.00", "Giorno X$http://www.google.com"],

Cliccando sul link sarà aperta un'altra finestra. Un link esterno deve iniziare obbligatoriamente con "http://" o "https://. A proposito di link, si può pensare che questo non sia cliccabile perchè ho posto la finestra delle note in alto a sinistra nell' iframe, per evitare che le informazioni "escano" dall' iframe stesso. Ma non è così, infatti una volta evidenziato il giorno con il mouse, si preme il tasto "Alt" e la nota non scomparirà spostando il mouse. Quindi ci si posiziona sopra il link e si preme nuovamente il tasto "Alt". A questo punto il link diverrà cliccabile. Potevo anche lasciare le note agganciate al giorno, ma quando "uscivano" dall' iframe era necessario cliccarci sopra e, con i tasti destra e sinistra far scorrere la pagina lateralmente per visualizzare la nota interamente. Le vacanze, indicate con il colore grigio nel calendario originale di Maurizio Mauri, sono state eliminate nella mia variante perchè rendono tutti gli anni, che non siano quello in corso, opachi, scambiandoli per perenni vacanze. Ho lasciato il codice css e la riga sotto riportata

var vacanza = ["990104-990106", "990708-990727"];

con feste dal 04/02/2099 al 06/02/2099 e dal 08/08/2099 al 27/08/2099 perchè in questi giorni non sarà evidenziata la data attuale, avendo reso le vacanze opache, di colore nero e con sfondo uguale a quello del calendario, diventando così indistinguibili dagli altri giorni. Sono definite dalla variabile vacanza, che si trova, come detto, sotto le feste nazionali. Essa si presenta così nel calendario originale:

var vacanza = ["-160006", "160104-160106",
"160224-160229", "160416-160419", "160527-160528",
"160708-160727", "160919-160922",
"160807-160809", "161123-"];

in pratica non è altro che una serie di date come nella variabile note. E' possibile modificare la larghezza del calendario andando in fondo pagina, precisamente dove inizia il ‹body› dove vediamo il seguente script:

‹script›
calend(null, null, "mio1", 290);
// leggi in mmm il mese attuale (-1)
// var mmm = new Date().getMonth();
// calend(mmm + 2, null, "mio2", 290);
‹/script›

Il numero 290 è la larghezza in pixel, mentre i valori null e null fanno aprire il calendario nel mese e nell' anno corrente. Per la cronaca l' altezza si può stabilire nel foglio di stile alla voce ".calend". Per questo motivo ho fatto due versioni del calendario versatile 2, una piccola ed una più grande, come del resto avevo fatto anche per il calendario versatile 1. Se invece, ad esempio, sostituiamo ai null i numeri 8 e 2020 il calendario si aprirà nel mese di agosto del 2020. Molto interessanti sono le due ultime righe dello script, che mi ha fornito personalmente Maurizio. Attivando queste due, al posto della prima, il calendario si aprirà sempre nel mese successivo a quello in corso, e, se vogliamo, questo calendario può essere affiancato al primo. Naturalmente anche in questo calendario, trattandosi sempre della versione per il commerciante, ho aggiunto tutti gli allarmi javascript del calendario versatile 1. La loro complilazione è così semplice che basta guardarli per capire come funzionano. Per chi volesse vedere le scadenze del commerciante faccio presente che appaiono solo nell' anno 2017. I due calendari presenti sono posizionati in alto a sinistra dello schermo, perchè pensati per essere utilizzati all' interno degli iframe, ma se vogliamo spostarli al centro dobbiamo solo modificare i valori dei margini nella riga:

<body topmargin="10" leftmargin="10" style="background-color: rgb(255, 255, 255);">

E nella stessa riga, come si vede, possiamo anche cambiare il colore dello sfondo della pagina. Maurizio Mauri non ha voluto farlo, ma avrebbe potuto visto che le feste sono ricorrenze annuali, mettere anche ricorrenze personali sia annuali che mensili. Ho provato a capire come si potesse fare, ma il codice sorgente, per questa variante, mi è risultato troppo complesso. Del resto, forse, è meglio così, perchè anche le scadenze annuali, quasi sempre, devono essere modificate, perchè non sono sempre rigorosamente identiche. I files che si scaricano "calendarioenzomaurimini.zip e calendarioenzomauri.zip" pesano solo 6 Kb e contiengono i calendari descritti. Sono sicuro che saranno in molti ad apprezzarli, come, immagino, siano stati apprezzati anche i "Calendari versatili 1". Il calendario originale di Maurizio Mauri, invece, pesa 23 Kb, comprese due immagini al suo interno.

Nome dei files " calendarioenzomauri/mini.zip ", Pagine web, Dimensione 6 Kb,
Voto = 10, Data : 15/01/2017

calendarioenzomaurimini.zip calendarioenzomauri.zip

calendario originale di Maurizio Mauri