Calendario 2.0
L'ennesimo calendario? Forse... però mi sembra bello e ricco di opzioni
Prevede le feste (colore rosso), le vacanze (opaco), gli eventi (note, sottolienate e visualizzate quando il mouse passa sopra al giorno.) ed è totalemente ridimensionabile. Nella figura accanto è visualizzato con 320 pixel di larghezza; ma questa può essere modificata a piacere (verranno modificati in porporzione tutti gli elementi).
Se questi elementi generali vi hanno convinto e decidete di scaricarlo, troverete questi file:
- Calend.htm: la pagina che state visualizzando;
- Calend.css: il foglio di stile, da modificare con molta circospezione; meglio lasciarlo com'è;
- Calend.js: tutto il codice javascript che crea il calendario;
- anello.png: l'immagine utilizzata per visualizzare gli anelli del calendario; l'unica immagine che serve;
- Calend.png (serve solo per "arricchire" questa pagina.
Per utilizzare il calendario nella vostra pagina dovete inserire nella sezione head il seguente codice:
<link href="http://fonts.googleapis.com/css?family = Hammersmith+One" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="Calend.css">
<script src="calend.js"></script>
Poi, nel body, nel punto in cuo volete visualizzare il calendario:
<script>
calend(mese, anno, "nome", width);
</script>
ad esempio:
<script>
calend(4, 2016, "calendx", 320);
</script>
Se volete visualizzare il mese e l'anno corrente, scrivete
null al posto di mese ed anno. Potete evitare di scrivere il 320 che è la larghezza di default.
Ad esempio:
<script>
calend(null, null, "calend2");
</script>
Il nome deve essere, ovviamente, unico se decidete di visualizzare più istanze del calendario. Fate uno "sforzo di fantasia" e non utilizzate il nome "calendario".
Se non amate le complicazioni questo è tutto. Potete evitare di leggere il resto.
Uno squardo leggermente più approfondito.
Se aprite con un editor di testo il file calend.js potete vedere all'inizio (più o meno alla riga 16) qualcosa del genere:
// feste fisse stabilite dalla legge (mese + giorno)
var feste = [
0, "Pasqua",
0, "Pasquetta",
101, "Primo dell'anno",
106, "Epifania",
425, "Anniversario della liberazione",
...
Sono le feste previste per legge in Italia. Potete saltare Pasqua e Pasquetta che saranno calcolate dal programma, ma soffermatevi sulla riga:
629, "Santi Pietro e Paolo",
che è la festa del Santo Patrono a Roma. 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 (629) rappresenta il mese e il giorno (giugno, 29). I milanesi dovranno scrivere, ad esempio:
1207, "Sant'Ambrogio",
Le note
le note, indicate con il giorno sottolineato, vengono visualizzate quando si passa col mouse sul giorno. Le feste verranno sempre visualizzate come note. Se volete aggiungere altre note dovete modificare sempre lo stesso file
calend.js. Alla riga 31 trovate alcuni esempi:
var note = [
"160230", "Assemblea condominiale",
"160420", ["15.00-17.00", "Compleanno Marina"],
"160522", ["15.00-17.00", "Visita Medica",
"17.30-18.30", "Cinema$http://www.google.it"],
"160612-160616", "Ristrutturazione casa"
];
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).
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 linke esterno deve iniziare obbligatoriamente con "
http://" o "
https://"
Le vacanze
Le vacanze, indicate con il colore grigio, possono indicare i giorni in cui l'attività è sospesa. Vengono definite dalla variabile
vacanza, che si trova nel file
Calend.js, approssimativamente alla riga 27
Essa si presenta così:
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.