DatePicker en barre latérale pour Google Sheets

Ce calendrier pour Google Sheets est affiché dans la barre latérale et vous permet d'insérer très facilement la date sélectionnée dans une ou plusieurs cellules.

Vous pouvez copier ce document Google Sheets à partir de cette page.


Vous trouvez sur cette page, le code source de ce calendrier (si vous souhaitez mieux comprendre comment créer une barre latérale personnalisée dans Google Sheets, suivez ce lien).

Aperçu du calendrier

google sheets sidebar datepicker png

Aperçu cliquable du calendrier

Code Apps Script

// Menu personnalisé
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Sheets-Pratique')
    .addItem('Calendrier', 'calendrier')
    .addToUi();
}

// Barre latérale
function calendrier() {
  const html = HtmlService.createTemplateFromFile('calendrier').evaluate().setTitle('Calendrier');
  SpreadsheetApp.getUi().showSidebar(html);
}

// Include pour page HTML
function include(nom) {
  return HtmlService.createHtmlOutputFromFile(nom).getContent();
}

// Insertion de la date dans les cellules sélectionnées
function insererDate(d) {
  SpreadsheetApp.getActiveSheet().getActiveRange().setValue(new Date(d));
}

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <?!= include('css'); ?>
  </head>
  <body>
    <?!= include('js'); ?>
  </body>
</html>

Code JavaScript

<script>

  // Affichage
  function afficherCalendrier(mois, annee, selection) {
  
    /*******************************************************************/
    /**  Calendrier créé par Sébastien Mathier - Sheets-Pratique.com  **/
    /*******************************************************************/

    const ajd = new Date().toDateString();
    const selectionDate = new Date(selection);
    const moisSuiv = mois + 1 > 11 ? 0 : mois + 1;
    const moisPrec = mois - 1 < 0 ? 11 : mois - 1;
    const anneeSuiv = mois + 1 > 11 ? annee + 1 : annee;
    const anneePrec = mois - 1 < 0 ? annee - 1 : annee;
    let jour = new Date(annee, mois, 1);
    const premierJourSem = (jour.getDay() + 6) % 7;
    jour.setDate(jour.getDate() - premierJourSem);

    let calendrier = `<div id="jour_sem">${['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'][selectionDate.getDay()]}</div><div id="mois_an"><span>${selectionDate.getDate()}</span><img onclick="afficherCalendrier(${moisSuiv}, ${anneeSuiv}, '${new Date(anneeSuiv, moisSuiv, 1).toDateString()}')" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTguNTksMTYuNThMMTMuMTcsMTJMOC41OSw3LjQxTDEwLDZMMTYsMTJMMTAsMThMOC41OSwxNi41OFoiLz48L3N2Zz4=" id="droite"><img onclick="afficherCalendrier(${moisPrec}, ${anneePrec}, '${new Date(anneePrec, moisPrec, 1).toDateString()}')" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE1LjQxLDE2LjU4TDEwLjgzLDEyTDE1LjQxLDcuNDFMMTQsNkw4LDEyTDE0LDE4TDE1LjQxLDE2LjU4WiIvPjwvc3ZnPg==" id="gauche">${['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'][selectionDate.getMonth()]} ${selectionDate.getFullYear()}</div><div id="calendrier"><div>LU</div><div>MA</div><div>ME</div><div>JE</div><div>VE</div><div>SA</div><div>DI</div>`;

    for (let l = 0; l < 6; l++) {
      for (let c = 0; c < 7; c++) {
        const jourString = jour.toDateString();
        const jourMois = jour.getMonth();
        calendrier += `<div class="${jourMois == mois ? '' : 'gris'}${jourString == ajd ? ' ajd' : ''}${jourString == selection ? ' selection' : ''}" onclick="afficherCalendrier(${jourMois}, ${jour.getFullYear()}, '${jourString}')">${jour.getDate()}</div>`;
        jour.setDate(jour.getDate() + 1);
      }
    }

    // Insertion
    document.body.innerHTML = `${calendrier}</div><div id="bouton" onclick="google.script.run.insererDate('${selection}')">Insérer la date dans les cellules</div><a href="https://www.sheets-pratique.com" target="_blank">Sheets-Pratique.com</a>`;
  }

  // Premier affichage
  window.addEventListener('load', function() {
    const date = new Date();
    afficherCalendrier(date.getMonth(), date.getFullYear(), date.toDateString());
  });

</script>

Code CSS

<style>

/*******************************************************************/
/**  Calendrier créé par Sébastien Mathier - Sheets-Pratique.com  **/
/*******************************************************************/

body {
  margin: 0;
  background: #eee;
  font-family: Roboto, Arial, sans-serif;
  text-align: center;
}
#jour_sem {
  background: #1b987e;
  color: #fff;
  padding: 0.5rem;
  font-size: 1.2rem;
}
#bouton {
  padding: 0.9rem 0 0.75rem;
  background: #1bab8c;
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
#mois_an {
  padding: 0.7rem 0 0.5rem;
  background: #05b38e;
  color: #fff;
  line-height: 2rem;
  font-size: 1.5rem;
}
#mois_an span {
  display: block;
  font-size: 3rem;
  line-height: 3rem;
}
#droite, #gauche {
  position: absolute;
  height: 3rem;
  margin-top: -0.5rem;
  cursor: pointer;
}
#droite {
  right: 0;
}
#gauche {
  left: 0;
}
#calendrier {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  background: #f9f9f9;
}
#calendrier > div {
  padding: 0.6rem 0 0.5rem;
  font-size: 1rem;
  color: #777;
  background: #eee;
}
#calendrier > div:nth-child(n+8) {
  padding: 0 1px 0 0;
  color: #333;
  cursor: pointer;
  line-height: 43px;
  background: transparent;
}
#calendrier > div:nth-child(n+8):hover {
  background: #0f9c7e;
  color: #fff;
  border-radius: 50%;
}
#calendrier > div.gris {
  color: #b0b0b0;
}
#calendrier > div.ajd {
  font-weight:bold;
}
#calendrier > div.selection {
  background: #05b38e;
  color: #fff;
  border-radius: 50%;
}
a {
  display: block;
  padding: 1rem 0;
  font-size: 0.95rem;
  text-decoration: none;
  color: #aaa;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
  color: #05b38e;
}

</style>