Calendario 2.0 di Maurizio Mauri | ||||
| ||||
iFrame 1 |
iFrame 2 |
iFrame 3 |
Ed ecco un interessante calendario che ancora una volta mi ha segnalato l' amico Rizzi Renato. Il colpo di genio di
questo calendario è la possibilità di inserire promemoria visualizzabili al passaggio del mouse. Vista questa
interessantissima funzione ho pensato di potenziarlo al massimo inserendovi tutte le risposte che ognuno di noi
vorrebbe avere da un calendario. Curiosamente, ma evidentemente per una scelta precisa, Maurizo ha deciso di visualizzare
i promemoria personali solo nell'anno in corso, ma questo ci impedisce, arrivati a Novembre-Dicembre, di sapere quali
sono i nostri appuntamenti nell'anno successivo. Quindi ho innanzitutto reso i promemoria visibili sempre e ho pure introdotto
quelli a cadenza annuale di fondamentale importanza. Poi la navigazione di anno in anno e, per la ricerca di date dal
1 Gennaio 1583 al 31 Dicembre 2499, due caselle di testo
|
per l' inserimento immediato del mese e dell' anno richiesti. Ovviamente non poteva mancare un link per il ritorno
immediato alla data attuale. Infine, data la particolarità di questo calendario, un Help per riassumere le funzioni
principali non guasta mai. Considerando che l' originale fa riferimento a pagine internet e consta di più files separati,
ho pensato di ridurlo ad un unico file, per una più semplice portabilità, togliendo pure ogni riferimento alla Rete.
In secondo luogo il mio è pensato per essere utilizzato all' interno di un iframe, anzi due, perchè nel primo
visualizzo il mese corrente, e nel secondo il mese successivo, visto che questo calendario lo può fare. Oltre alle modifiche
che ho già spiegato, l' originale aveva anche il fastidioso allungarsi e accorciarsi a seconda che siano presenti cinque o
sei righe, e così ho provveduto ad evitare che ciò avvenga. Qui sopra sono riportati,
|
perfettamente funzionanti, i tre calendari. E ora passo alle spiegazioni. Tutte le date sottolineate con un trattino verde
contengono note che si visualizzano, al passaggio del mouse, mediante un Modal Box, (Finestra di dialogo Popup)
contenente le informazioni che vi abbiamo registrato. In particolare se la data è di colore nero la nota è del tipo
con data specifica, quindi vale solo per quel giorno, mentre se la data è di colore grigio la nota è del tipo annuale,
quindi si ripete automaticamente ogni anno. Anche le feste, con la data in rosso, possono contenere note, con minore
priorità rispetto alle note non festive di tipo annuale, e sono sempre del tipo annuale. Se aprite con il Blocco Note
di Windows i calendari che scaricate in "calendarioenzomauri.zip" e seguite le istruzioni sotto riportate,
capirete subito la semplicità di compilazione delle nostre note personalizzate. | ||||||||
<script type="text/javascript" language="JavaScript"> /* === C A L E N D A R I O === Versione 2.0 (c) 2016 by Maurizio Mauri - 2017 variante di Enzo Coassin */ // feste fisse stabilite dalla legge (mese + giorno) var feste = [ 0, "Pasqua", 0, "Pasquetta", 101, "Capodanno dai<br>tempi dei tempi", 106, "Epifania dai<br>tempi dei tempi", 425, "Festa della<br>liberazione<br>dal 1946", 501, "Festa del<br>lavoro dal 1890", 602, "Festa della<br>Repubblica", 815, "Ferragosto dai<br>tempi di Augusto", 908, "Festa della<br>Madonna a<br>Maniago e<br>Pordenone<br>dal 1655", 1101, "Tutti i Santi<br>dal 1949", 1208, "Festa della<br>Immacolata<br>Concezione<br>dal 1854", 1225, "Natale dai<br>tempi dei tempi", 1226, "Santo Stefano dai<br>tempi dei tempi" // ricorrenze annuali (mese + giorno) var annuali = [ 116, "Imposta comunale<br>sulle pubbliche<br>affissioni", 616, "Pagare prima rata<br>tassa comunale<br>IMU/TASI", 623, "Pagine web di<br>Coassin Enzo$http://enzo.panificiocoassin.it/", ................................... 1229, "Pagare IVA" ]; | ||||||||||
A circa un terzo della pagina c'è il codice sopra riportato, e più avanti verrà spiegato il significato delle righe evidenziate in giallo e verde.
All' inizio ci sono le feste previste per legge in Italia. Potete saltare Pasqua e Pasquetta che saranno calcolate dal programma,
ma soffermatevi sulla riga: "Festa della<br>Madonna a<br>Maniago e<br>Pordenone<br>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. Il tag, o etichetta, <br> manda a capo
|
la riga. 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 (Dicembre 07), "Sant' Ambrogio".
Di seguito alle feste compaiono le ricorrenze annuali, che hanno le stesse regole delle feste, ma differiscono
da queste perchè il giorno viene visualizzato in colore grigio. Come si vede le feste, che sono ricorrenze annuali,
e le comuni ricorrenze annuali, sono indicate da tre o quattro cifre, sempre due per il giorno ed una o due per il mese (da 1 a 12).
|
Proseguendo nella lettura del codice, che vediamo qui sotto, troviamo
le ricorrenze con data specifica, che avranno i numeri di colore nero e il cui formato è il seguente: "aammgg". Si nota subito che
Maurizio ha scelto per l' anno la notazione a due cifre perchè il suo calendario non era pensato per i secoli. La compilazione del
mese rispetta la grammatica di Javascript, quando la data comprende anche l' anno, e quindi va scalato di una unità. In pratica
Gennaio=00, Febbraio=01 fino a Dicembre=11. I giorni seguono la normale numerazione da 1 a 31. | ||||||||
// ricorrenze con data specifica [anno + (mese-1) + giorno] var note = [ "180215", "Link per il sito di<br> Rizzi Renato$http://www.renatoweb.it", "180511-180515", "Vacanze", "180913", ["16.00<br>17.00", "Riunione<br>Aziendale"], //Feste e Ricorrenze annuali o specifiche nella prima decade di ogni secolo "000502,010502,020502,030502,...,070502,080502,090502", "Festa della<br>Repubblica", // Festa con cadenza annuale "010505", "Portare l' auto<br>dal meccanico", // Ricorrenza con data specifica "000516,010516,020516,...,080516,090516", "Pagare prima rata<br>tassa comunale<br>IMU/TASI", // Ricorrenza annuale "010520", ["16.00<br>17.00", "Riunione<br>Aziendale"], // Ricorrenza con data specifica "000523,010523,...,080523,090523", "Pagine web di<br>Coassin Enzo$http://enzo.panificiocoassin.it/", // Ricorrenza annuale | ||||||||||
Le feste, le ricorrenze annuali e le ricorrenze con data specifica saranno sempre visualizzate come la variabile note.
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. Per le note con data specifica, ad esempio "180215" vuol
dire 15 Marzo 2018 nel calendario di Maurizio Mauri, ma nella mia variante che prevede anche i secoli, è anche il 15 Marzo
1618, 1718, 1818, 1918, 2118, 2218, 2318 e 2418.
|
Ovviamente una ricorrenza con data specifica di un secolo prima o di un secolo dopo non fa parte della nostra esistenza. Il campo data
può essere composto da una o più date separate dalla virgola, oppure da due date separate da un trattino, come negli esempi sotto riportati. | ||||||||
Ad esempio: "180330, 180422, 180514", "Partita di calcio", (tre partite di calcio in tre date diverse), che è un modo abbreviato per scrivere: "180330", "Partita di calcio", "180422", "Partita di calcio", "180514", "Partita di calcio", Oppure: "180330-180403,", "Gita sulle Dolomiti", | ||||||||||
Il questo caso l'evento è previsto per tutti i giorni compresi dal 30 Aprile al 3 Maggio 2018. Da notare che questa seconda notazione
sostituisce, a tutti gli effetti, le vacanze di Maurizio. 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 che verranno visualizzate in una tabella sulla falsa riga di quella riportata sotto. Nel caso citato la riunione
aziendale si svolgerà dalle ore 16 alle 17, ogni 9 ottobre, negli anni 2017, 2018, 2019 e 2020. Potete verificare quanto asserito
nei calendari pubblicati. Anche in questo caso la riunione aziendale sarà visualizzata nei secoli precedenti e sucessivi. Se nelle
parentesi quadre vi sono più coppie di stringhe, separate da
|
virgola,
saranno visualizzate più righe dello stesso tipo, come si può vedere per la ricorrenza annuale del 22 Dicembre. La seconda
stringa può anche essere linkata, aggiungendo alla stringa il segno di $ seguito dal link.
Il codice relativo, sempre per la ricorrenza anuuale del 22 Dicembre, è anche esso qui sotto riportato in due righe separate, ma come indicato,
la riga deve essere necessariamente una sola, anche se lunghissima. 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 il Modal Box in alto a sinistra nell' iframe, per evitare che le informazioni "escano" dall'
iframe stesso. Ma non è così, infatti prima di tutto, per evitare
|
cattive interpretazioni, il link è la classica parola blù
sottolineata, e poi per accedervi si possono seguire due strade, a seconda del browser che si stà usando. Il primo metodo consiste nel fare click destro sul giorno, poi, rilasciando
il tasto che ha aperto il menù contestuale, ci si porta sopra il link e premendo il tasto Esc appare la manina del mouse,
che indica lo stato attivo del link. Con il secondo metodo si clicca sinistro sul giorno e poi si preme il tasto TAB. Fatte queste
operazioni il link diviene selezionato (appare all' interno di un rettangolo tratteggiato) e premendo il tasto Invio si apre la pagina
linkata. Da tenere presente che con Google Chrome e Mozilla Firefox basta premere il tasto TAB una sola volta, mentre con Microsoft
Edge il tasto TAB va premuto ben nove volte!
| ||||||||
Esempio:
| ||||||||||
E' interessante notare anche che l'argomento della nota contiene il tag <br> e questo non è l'unico che possiamo usare all' interno di essa.
Infatti utilizzando questa possibilità ho scoperto, come prima cosa, che i link a pagine web si possono relaizzare anche usando la semplice notazione HTML. Ma non mi
sono fermato qui e ho scritto link che avviano programmi javascript, che visualizzano immagini, che avviano un filmato o un file audio e addirittura,
con il solo browser Microsoft Edge e in locale, programmi o qual si voglia applicazione. Tutti questi esempi si possono provare nei mesi
|
di giugno dell' anno '99.
Qui sotto sono riportati i cinque codici di cui sopra, che ognuno può inserire nel proprio calendario per renderlo più efficace. Come si vede nel giorno
8 Giugno '99 troviamo il link al mio sito di programmi gratuiti secondo il metodo di Maurizio Mauri, mentre il giorno 9 Giugno del '99 abbiamo
lo stesso link ottenuto con i soli tag HTML. I quattro tag che seguono, il giorno 12, 19, 23 e 26 Giugno '99, sono link fittizi perchè in realtà rimandano
alle funzioni javascript verifica(), foto(), vedi(), suona() che avviano i programmi per confrontare due numeri o riprodurre foto, video e suoni.
Il sesto tag,
|
il giorno 29 Giugno '99, è un link che punta direttamente all' eseguibile Q-Dir.exe, in questo caso contenuto nella stessa cartella del
calendario, che è un Esplora File senza installazione, composto da un unico file di soli 708 Kb. In realtà Q-Dir utilizza tutte le funzioni dell' Esplora
File di Windows in una nuova grafica che può visualizzare fino a quattro finestre con l' aggiunta di comandi particolari. Anche gli altri files di questi
esempi sono contenuti nella cartella del calendario, ma nulla vieta che si trovino in qualunque punto del nostro disco rigido, scrivendo, ovviamente, i
percorsi giusti.
| ||||||||
// esempi di Modal Box che attivano funzioni speciali "990508", "Pagine web di<br>Coassin Enzo<br>Metodo Maurizio$http://enzo.panificiocoassin.it/", "990509", "<a href='http://enzo.panificiocoassin.it'><div class='linkx'>Pagine web di<br>Coassin Enzo<br>con Tag HTML</div></a>", "990512", "<a href='javascript:verifica()'><div class='linkx'>Modulo di verifica<br>pagamenti on-line</div></a>", "990519", "<a href='javascript:foto()'><div class='linkx'>Fare vaccino<br><img src='blacky.jpg' width=80 height=60 vspace=7>......", "990523", "<a href='javascript:vedi()'><div class='linkx'>Esempio<br>di video</div></a>", "990526", "<a href='javascript:suona()'><div class='linkx'>Esempio di<br>file audio>/div<</a>", "990529", "Ora prova<br>l' Esplora File</div><div class='linkx'><a href='Q-Dir.exe'>Q-Dir Portable</div></a><(funziona solo con.....", | ||||||||||
Le vacanze, indicate con il colore grigio nel calendario originale di Maurizio Mauri,
sono state eliminate nella mia variante perchè, come detto sopra, sono agevolmente sostituite con
la notazione a due date separate da un trattino. Le vacanze sono definite dalla variabile vacanza, che è la variabile successiva
|
nello script,
come si vede sotto. Ho lasciato il codice css e la prima riga sotto riportata con feste dal 04/02/2099 al 06/02/2099 e dal 08/08/2099
al 27/08/2099 perchè in questi giorni non saranno visualizzate, avendo reso le vacanze opache, di colore nero e con sfondo uguale a quello
|
del calendario, diventando così indistinguibili dagli altri giorni. Esse si presentano come le quattro righe successive nel calendario
originale e in pratica non sono altro che una serie di date. Da notare che alle vacanze non è possibile
associare un Modal Box, motivo in più per averle eliminate. | ||||||||
var vacanza = ["990104-990106", "990708-990727", "-160006", "160104-160106", "160224-160229", "160416-160419", "160527-160528", "160708-160727", "160919-160922", "160807-160809", "161123-"]; | ||||||||||
Nel calendario di Maurizio Mauri è possibile modificare la larghezza del calendario, ma non l' altezza, andando in fondo pagina,
precisamente all' inizio del ‹body›, dove vediamo lo script sottostante. Il numero 290 è la larghezza in pixel, mentre
i valori null e null fanno aprire il calendario nel mese e nell' anno corrente. Nella mia variante del calendario
l' altezza si può stabilire nel foglio di stile alla voce ".calend". Modificando sia la larghezza che l' altezza il
calendario assume un aspetto grafico sgradevole, e per evitare che questo accada è necessario modificare anche altri diversi
parametri. Per questo motivo ho fatto due versioni del calendario di Maurizio, una piccola per essere usata all' interno di un iFrame ed una
più grande,
pensata per gli Smartphone, come del resto avevo fatto anche per il
|
calendario americano. Da considerare che con alcuni sistemi operativi per cellulari il calendario non sempre funziona perfettamente.
Se invece, ad esempio, sostituiamo ai null i numeri 8 e 2020 il calendario si aprirà nel mese di agosto del 2020. Molto
interessante è l' ultima riga dello script, che in parte mi ha fornito personalmente Maurizio. Attivando quest' ultima, al posto della
seconda, il calendario si aprirà sempre nel mese successivo a quello in corso, e, se vogliamo, questo calendario può essere affiancato
al primo, proprio come ho fatto in questa pagina. In questo script ho aggiunto la variabile tipo=2 che ha lo scopo di trasformare
il link "oggi" in "oggi+" perchè nel mese successivo non esiste, ovviamente, una data attuale. Se non si vogliono
usare due calendari distinti si possono attivare contemporaneamente
|
i due script, che apriranno i due calendari in colonna, senza spazio intermedio. Fate attenzione a chiamare i due calendari con nomi diversi,
ad esempio "mio1" e "mio2". Si può aggiungere lo spazio, con una istruzione che può essere del tipo
document.write("<div> spazio </div>"); tra i due script, ma affiancare i due calendari
non credo sia fattibile, e comunque è una impresa alla quale ho rinunciato, perchè ho già fatto anche troppo. Tra l' altro in questa modalità
scompare pure "Oggi+". Anche in questo calendario, trattandosi sempre della versione per il commerciante, ho aggiunto tutti gli Alert
javascript del calendario americano. E infatti, aprendo questa pagina, viene subito attivato l' Alert dimostrativo. La loro complilazione è così
semplice che basta guardarli per capire come funzionano. | ||||||||
‹scrip type="text/javascript"t› // Script per il calendario del mese attuale var tipo=1; calend(null, null, "mio1", 290); document.cambio.piu.className="nascondi"; // Script per il calendario del mese successivo a quello attuale // var mmm = new Date().getMonth(); var tipo=2; calend(mmm + 2, null, "mio1", 290); (continua sotto) document.cambio.piu.value="+"; document.cambio.piu.className="vedi"; ‹/script› | ||||||||||
I promemoria del commerciante sono in gran parte a cadenza annuale, tranne alcuni con date particolari. 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 altrove dobbiamo solo modificare i valori dei margini nella riga del ‹body› sotto riportata. E
nella stessa riga, come si vede, possiamo anche cambiare il colore dello sfondo della pagina. Ed ora è giunto il momento di spiegare
il significato della casella di testo "Pasqua" che mi ha fatto perdere più di un mese per sincronizzarla con il resto del
calendario. Quando si scrive un anno
|
nella casella di testo omonima, in quella della Pasqua apparirà un numero di tre cifre. Poichè Pasqua cade
sempre in Marzo o Aprile, la prima cifra è quella del mese, e le seconde due quelle del giorno. Il calendario di Maurizio Mauri non
è fatto per viaggiare nei secoli e quindi lui non ha tenuto conto delle eccezioni nel calcolo del giorno pasquale che io invece ho
considerato, e che appaiono di colore rosso quando si presentano. Potevo anche evitare questa precisazione, visto che come per il
calendario americano, anche in quello di Maurizio ho aggiunto le eccezioni, cosicchè non vi sono errori nelle date calcolate.
Possiamo verificare che per
|
l' annno 1954 appare il numero 418 in rosso, che significa 18 Aprile, mentre
per l' anno 2018 compare il numero 401 in nero, che significa 1 Aprile. Giusto per completezza faccio notare che
i Modal Box di Pasqua e Pasquetta non appaiono più per gli anni sucessivi al 2099, e solo Maurizio potrebbe darne spiegazione,
ma ciò è di poco conto perchè la casella Pasqua dà il risultato esatto. Purtroppo Maurizio Mauri non è più rintracciabile perchè
il suo contatto mail non dà più risposte, e quindi non sono in grado di richiedergli una modifica agli script per ottenere la visualizzazione
dei Modal Box nella prima decade di ogni secolo, che con il suo codice non avviene. | ||||||||
<body topmargin="5" leftmargin="10" style="background-color: #f2f9ff;"> | ||||||||||
Ovviamente quasi nessuno di noi ci sarà nel XXII secolo, e forse non esisterà neppure più il Web, ma non ho mai lasciato incompiuto
un lavoro, così dopo aver tentato, per lunghissimo tempo, di decifrare il criptico codice di Maurizio, ho optato per un efficace
artificio, anche se i programmatori potrebbero inorridire di fronte a questa soluzione. In pratica ho scoperto che se si registrano
festività e ricorrenze annuali sia come ricorrenze annuali che come ricorrenze con data specifica, negli anni a due cifre da 00 a 09,
verranno visualizzate correttamente con i relativi Modal Box.
|
Infatti, se confrontiamo il primo e il secondo script di questa pagina, osserviamo che la Festa della Repubblica del 2 Giugno, evidenziata in
giallo, è registrata due volte, come indicato sopra. Lo stesso vale per la scadenza del 16 Giugno, "Pagare prima rata <br> tassa
comunale <br> IMU/TASI", e del 23 Giugno "Pagine web di <br> Coassin Enzo$http://enzo.panificiocoassin.it/", evidenziate
in verde. In entrambi i casi si è utilizzata la notazione abbreviata per tutti gli anni a due cifre da 00 a 09, ottenendo così la
prima decade di ogni secolo. E in effetti si nota
|
che la notazione abbreviata rende la compilazione degli eventi a cadenza annuale, per la prima decade dei secoli, semplice e rapida.
Nel caso citato si può verificare che le ricorrenze di Giugno appaiono tutti gli anni dal 1583 al 2499, senza escluderne alcuno.
Il file che si scarica pesa 2.2 Mb e contiene questa pagina e tutto quello che in essa è descritto. Sono sicuro che questi calendari
saranno ad apprezzarli, come, immagino, siano stati apprezzati anche i "Calendari americani". Il calendario originale
di Maurizio Mauri, invece, pesa 34 Kb, comprese due immagini. | ||||||||
Nome del file " calendarioenzomauri.zip ", Pagine web e allegati, Dimensione ,2.2 Mb , Voto = 10, Data : 15/01/2018 |