[Google Sheets] Afficher un calendrier
Bonjour,
Voici un outil permettant d'afficher un calendrier en "sidebar" d'une feuille (google sheets).
https://www.sheets-pratique.com/fr/telechargements/calendriers/calendrier-cliquable-sheets-no526
Le code est le suivant :
- la fonction
calendrierlance la page html dans le sidebar, un déclencheur est programmé à l'ouverture (néanmoins la fonction peut être lancée manuellement). - la fonction
mettreDaterenvoie la valeur vers la cellule courante, modifiable selon l'application visée
function calendrier() {
const html = HtmlService.createHtmlOutputFromFile('calend').setTitle('Calendrier');
SpreadsheetApp.getUi().showSidebar(html);
}
function mettreDate(laDate) {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var feuille = SpreadsheetApp.getActive();
var r = feuille.getActiveRange();
r.setValue(laDate);
}La page html est la suivante, le code est auto-suffisant, il n'y a pas de ressources externes.
<!DOCTYPE html>
<html>
<head>
<title>calendrier</title>
<style>
body {
font-family: Helvetica, sans-serif;
}
table {
width: calc(100% - 1rem);
margin: 1rem 0.5rem;
border-collapse: collapse;
background: #f6f6f6;
border-radius: 0.4rem;
overflow: hidden;
}
td, th {
text-align: center;
padding: 0.7rem 0;
}
td.num {
font-size: 14px;
cursor: pointer;
}
td.num:hover {
background: #555;
color: #fff;
border-radius: 50%;
}
th {
background: #555;
color: #fff;
font-weight: 400;
font-size: 18px;
}
</style>
<script>
function JoursFeries (an){
//Il y a avec les 2 jours dont nous bénéficions en alsace, a savoir la Saint Etienne et le Vendredi Saint.
//https://codes-sources.commentcamarche.net/source/16245-calcul-des-jours-feries
var JourAn = new Date(an, "00", "01")
var FeteTravail = new Date(an, "04", "01")
var Victoire1945 = new Date(an, "04", "08")
var FeteNationale = new Date(an,"06", "14")
var Assomption = new Date(an, "07", "15")
var Toussaint = new Date(an, "10", "01")
var Armistice = new Date(an, "10", "11")
var Noel = new Date(an, "11", "25")
//var SaintEtienne = new Date(an, "11", "26")
var G = an%19
var C = Math.floor(an/100)
var H = (C - Math.floor(C/4) - Math.floor((8*C+13)/25) + 19*G + 15)%30
var I = H - Math.floor(H/28)*(1 - Math.floor(H/28)*Math.floor(29/(H + 1))*Math.floor((21 - G)/11))
var J = (an*1 + Math.floor(an/4) + I + 2 - C + Math.floor(C/4))%7
var L = I - J
var MoisPaques = 3 + Math.floor((L + 40)/44)
var JourPaques = L + 28 - 31*Math.floor(MoisPaques/4)
var Paques = new Date(an, MoisPaques-1, JourPaques)
//var VendrediSaint = new Date(an, MoisPaques-1, JourPaques-2)
var LundiPaques = new Date(an, MoisPaques-1, JourPaques+1)
var Ascension = new Date(an, MoisPaques-1, JourPaques+39)
var Pentecote = new Date(an, MoisPaques-1, JourPaques+49)
var LundiPentecote = new Date(an, MoisPaques-1, JourPaques+50)
return new Array(JourAn, Paques, LundiPaques, FeteTravail, Victoire1945, Ascension, Pentecote, LundiPentecote, FeteNationale, Assomption, Toussaint, Armistice, Noel)
}
function isFerie(jf,mf,af) {
var ferie = JoursFeries(af);
for(var i in ferie) {
if ( jf == ferie[i].getDate() && mf == (ferie[i].getMonth()+1) ) { return true; }
}
return false;
}
</script>
<script>
var today = new Date();
var thisDay = today.getDate();
var monthNames = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
var jours = ['L','M','M','J','V','S','D'];
var year = today.getFullYear();
function calendar() {
cal(today.getMonth()+1,year,today.getMonth()+1,year)
}
function cal(mois,annee,m,a) {
document.getElementById('monCalendrier').innerHTML='';
if (((annee % 4 == 0) && (annee % 100 != 0)) || (annee % 400 == 0)){
var monthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}else{
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
var nDays= monthDays[mois-1];
var firstDay = new Date(annee,mois-1,1);
firstDay.setDate(0);
firstDay.getDate() == 2 ? firstDay.setDate(0) : null;
var startDay = firstDay.getDay();
var tb= document.createElement('table');
var tbr= tb.insertRow(-1);
var tbh= document.createElement("th");
tbh.appendChild(document.createTextNode('◄'));
tbr.appendChild(tbh);
tbh.onmouseover = function () {
this.style.cursor='pointer';
};
tbh.onclick = function () {
(mois == 1) ? annee = annee - 1 : annee = annee;
(mois == 1) ? mois = 12 : mois = mois -1;
cal(mois,annee,m,a);
};
var tbh= document.createElement("th");
tbh.setAttribute('colspan','5');
var tbhtxt= document.createTextNode(monthNames[mois-1]+' '+annee);
tbh.appendChild(tbhtxt);
tbr.appendChild(tbh);
var tbh= document.createElement("th");
tbh.appendChild(document.createTextNode('►'));
tbr.appendChild(tbh);
tbh.onmouseover = function () {
this.style.cursor='pointer';
};
tbh.onclick = function () {
(mois == 12) ? annee = annee + 1 : annee = annee;
(mois == 12) ? mois = 1 : mois = mois + 1;
cal(mois,annee,m,a);
};
var tbr=tb.insertRow(-1);
for(var i=0 ;i<jours.length ; i++){
tbr.insertCell(-1).appendChild(document.createTextNode(jours[i]));
}
var tbr= document.createElement("tr");
var column= 0;
for (var i= 0; i < startDay; i++) {
tbr.insertCell(0);
column++;
}
for (var i = 1; i <= nDays; i++) {
var tdd= tbr.insertCell(-1);
tdd.appendChild(document.createTextNode(i));
tdd.setAttribute('class','num');
(column > 4) ? tdd.style="font-style:italic" : null;
((i == thisDay) && (mois == m) && (annee == a)) ? tdd.style.color="#0000FF" : null;
isFerie(i , mois , annee) ? tdd.style.color="#FF0000" : null;
tdd.onclick = function () {
google.script.run.mettreDate(this.textContent + '/' + mois + '/'+ annee);
};
column++;
if (column == 7) {
tb.appendChild(tbr);
var tbr=document.createElement("tr");
column = 0;
}
i == nDays ? tb.appendChild(tbr) : null;
}
document.getElementById('monCalendrier').appendChild(tb);
}
typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",calendar) : addEventListener('load',calendar,false);
</script>
</head>
<body>
<center><div id='monCalendrier'></div></center>
</body>
</html>Pour l'utiliser plus efficacement, mettez un déclencheur à l'ouverture sur la fonction calendrier !