Discussions à propos de Google Sheets

Je ferais bien un widget calendrier en reprenant la structure que tu as mise en place ...

Le taquin v2 est en ligne

Je ferais bien un widget calendrier en reprenant la structure que tu as mise en place ...

Tu peux faire un calendrier mais je ne te conseille pas de reprendre la structure utilisée (des balises <div>), à moins d'être à l'aise avec le display grid, utilises plutôt les balises de tableau qui seront plus faciles à gérer.

Je suis un inconditionnel des <table><tr><td></td></tr></table>, c'est ma bible ! Je suis de la vieille école html/javascript/css.

J'ai fait un tour du net, et je n'en ai pas trouvé ... enfin si, on parle surtout d'y intégrer l'agenda de google mais ce n'est pas ce que je cherche.

Rendez-vous quand même en 2021 pour voir la bête, ... si j'ai bien tout compris à l'intégration de la sidebar et du dialogue dans les 2 sens avec la sheet.

J'ai trouvé un excellent calendrier gratuit, mais il faut que je lui greffe les jours fériés.

https://blog.niap3d.com/download/jsSimpleDatePickr/jsSimpleDatePickrInit_exemple1.html

sans restriction d'emploi ... j'ajouterai toutefois mes remerciements !

Bonjour,

Après avoir galéré pour introduire les jours fériés et changer quelques réglages, la page html (une véritable usine à gaz) n'était pas compatible a priori.

Changement de stratégie ... https://docs.google.com/spreadsheets/d/1hy8qI19EnMZX4WU4s1GbQlv6UPrXsaw_qOAID6Jnsno/edit?usp=sharing

Un calendrier s'affiche à l'ouverture. Un clic sur un jour renvoie la valeur dans la cellule active. Je suis nul en CSS mais le reste semble correct !

function onOpen() {
  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);
}

et pour le fichier html

<!DOCTYPE html>
 <html>
 <head>
 <title>calendrier</title>
<style type="text/css">
body {
    font-family: Helvetica, sans-serif;
}
td {
    text-align: center;
    width: 32px;
    height; 36px;
    font-size: 14px;
}
th {
    text-align: center;
    width: 32px;
    height; 36px;
    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) { 
       for(var i in JoursFeries(af)) { 
        if ( ( ((jf<10)?'0'+jf:jf) + '/' + ((mf<10)?'0'+mf:mf) ) == ( JoursFeries(af)[i].getDate() + '/' + (JoursFeries(af)[i].getMonth()+1) ) ){ 
            return true; 
        }
    }
    return false;
}
</script>

<script>
function calendar() {

    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 monthDays= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var year= today.getYear();
    year <= 200 ? year += 1900 : null;

    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)){
        monthDays[1] = 29;
    }
    var nDays= monthDays[today.getMonth()];
    var firstDay= today;
    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.setAttribute('colspan','7');
    var tbhtxt= document.createTextNode(monthNames[today.getMonth()+1]+' '+year);
    tbh.appendChild(tbhtxt);
    tbr.appendChild(tbh);
    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.onmouseover = function () {
            this.style.cursor='pointer';
        };
        tdd.onclick = function () {
            google.script.run.mettreDate(this.textContent + '/' + (today.getMonth()+2) + '/'+ year);
        };
        i == thisDay ? tdd.style.color="#0000FF" : null;
        isFerie(i , (today.getMonth()+2) , year) ? tdd.style.color="#FF0000" : null;
        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>

Dites moi si quelque chose cloche. Reste à améliorer pour le défilement des mois !

Je suis nul en CSS

Un début d'amélioration des CSS si ça peut t'aider :

<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 {
    font-size: 14px;
    cursor: pointer; /* plus besoin de l'ajouter à chaque td */
}
td:hover {
    background: #555;
    color: #fff;
    border-radius: 50%;
}
th {
    background: #555;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
}
</style>
google sheets calendrier sidebar

Ou pourquoi pas comme ceci :

google sheets calendrier sidebar 2

Merci Sébastien pour tes inputs.

Je suis en train de faire le changement de mois (et je galère à nouveau sur les jours fériés que je voulais intégrer !). Je mettrai tes propositions de css. C'est vraiment pas ma tasse de thé.

Je vais adopter ceci ...

td.num {
    font-size: 14px;
    cursor: pointer;
}
td.num:hover {
    background: #555;
    color: #fff;
    border-radius: 50%;
}

et

tdd.setAttribute('class','num');

pour éviter d'entourer Lundi, Mardi etc.


J'y ai mis la navigation par mois mais la détection des jours fériés en pour le moment inhibée.

Merci encore pour le jeu de css

et je galère à nouveau sur les jours fériés que je voulais intégrer !

Qu'est-ce qui te pose problème ?

Je ne sais pas si ça peut aider, mais tu peux aussi entrer ton tableau au format texte dans une variable (pour t'éviter tous les createElement/createTextNode/appendChild) et à la fin tu ajoutes ton tableau dans ton div :

document.getElementById('monCalendrier').innerHTML = variable;

En effet, bon maintenant que j'ai terminé cette partie-là, je verrai pour plus tard.

Je galère sur la fonction isFerie que j'ai créée pour associer la calendrier férié (alsacien à l'origine) avec les jours du calendrier ... mais je vais y arriver. J'ai déjà compris que .getYear() amenait 120 pour l'année 2020 !


edit : ouf, c'est bon, les jours fériés sont en rouge

J'ai déjà compris que .getYear() amenait 120 pour l'année 2020 !

Essaie avec .getFullYear()

Je galère sur la fonction isFerie que j'ai créée pour associer la calendrier férié (alsacien à l'origine) avec les jours du calendrier ... mais je vais y arriver.

Une idée en passant (non testé) :

function isFerie(date) {
    return JoursFeries.includes(date);
}

C'est ce que j'utilisais pas ailleurs, mais là je ne sais pas pourquoi cela ne fonctionnait pas au début, je pense que c'était à cause des mois et jours à 2 chiffres et de l'année à 3 (comme le 01/01/120) ... bref, c'est réglé ... je vais tenter de te le proposer comme appli sur sheets-pratique.com

J'ai commencé aussi un calendrier tant qu'à faire

Je vais par contre le faire un peu différemment du tien, histoire de ne pas proposer exactement la même chose que toi dans les téléchargements (sans fériés, sans <table>, autre design, pas d'insertion immédiate au clic, affichage des jours de début/fin des autres mois, etc).

En voila un aperçu :

google sheets sidebar datepicker

Il est publié

J'ai même ajouté un aperçu cliquable de ce calendrier sur la page :
https://www.sheets-pratique.com/fr/codes/datepicker

Dans ce cas, les flèches sont des images (svg) en base64. Je vous ai aussi préparé un petit tuto pour vous aider :
https://www.sheets-pratique.com/fr/codes/inserer-image

Voilà un outil que je ne connaissais pas !

https://www.excel-pratique.com/fr/utilitaires/image-base64

et justement j'étais en train d'en utiliser un autre en ligne !

C'est du php ou du javascript ?

Merci Sébastien.

Bonjour,

Bravo Sébastien .....

Super je vais dormir moins bête ce Soir

20201220 150043 001

Voilà un outil que je ne connaissais pas !

https://www.excel-pratique.com/fr/utilitaires/image-base64

et justement j'étais en train d'en utiliser un autre en ligne !

C'est du php ou du javascript ?

La conversion en base64 de l'image est faite côté serveur (en PHP).

Ach, je vais peut-être finir par être à peu près bon ... voici comment importer des données du web dans une sidebar (à l'aide du patron pour la formule de decodage xml)

<!DOCTYPE html>
<html>
<head>
<?!= include('style'); ?>
</head>
<body>
  <body>
Valeurs importées du web

    <? 
    var url = 'https://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'
    var data = UrlFetchApp.fetch(url).getContentText().match(/[A-Z]+' rate='[\d.]+/g).map(v => v.split(/' rate='/));
    ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>

  </body>
</html>

C'est court, c'est propre.

Rechercher des sujets similaires à "discussions propos google sheets"