Ajouter un calendrier à votre blog (blogger, blogspot)

Cette méthode permet de rajouter un calendrier à votre blog et est customisable grave à jquery UI.





Tout d'abord, il faut ajouter un widget via l'interface de présentation  :

Ensuite copier/coller ce code html/javascript dans le gadget "Configurer HTML/JavaScript" :






<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>

<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-fr.js"></script>







<script>

var archiveName = "archive";

/* nom de la page des archives, exemple : http://my.blogspot.com/2010_12_24_archive.html */




var theme = "humanity"; /* default : "base" */

/* pour changer la couleur du calendrier indiquer ici le nom du theme jquery que vous trouvez ici : http://jqueryui.com/themeroller/ (onglet "Gallery) */







var thisMonth, thisDay, thisArchiveDate;

var thisDomain = document.location.protocol+'//'+document.location.host + '/';

var thisMonthNbPost = 0;

$(document).ready(function(){

var link = $("<link>");

link.attr({

        type: 'text/css',

        rel: 'stylesheet',

        href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/'+theme+'/jquery-ui.css'

});

$("head").append(link); 



var currentUrl = document.location.href;

var currentDate = null ;

var indexDateFromUrl = currentUrl.indexOf("_"+archiveName+".html");

if(indexDateFromUrl!=-1){

currentDate = currentUrl.substring(indexDateFromUrl-10,indexDateFromUrl);

}



$("#datepicker").datepicker({

  onSelect: function(dateText, inst) { document.location = "/" + dateText + "_"+archiveName+".html"; },

  dateFormat: 'yy_mm_dd',

  defaultDate : currentDate,

maxDate : '+0',

showButtonPanel: true,

currentText: 'Aujourd\'hui',




beforeShowDay: function(date) { 

thisMonth = parseInt(date.getMonth())+1;

thisMonth = (thisMonth<10)? "0"+thisMonth : thisMonth;




thisDay = parseInt(date.getDate());

thisDay = (thisDay<10)? "0"+thisDay : thisDay;




thisArchiveDate = thisDomain +date.getFullYear() + "_" + thisMonth + "_" + thisDay + "_"+archiveName+".html";




/* test si il ya un article ce jour là */

if($('.BlogArchive a[href^="'+thisArchiveDate+'"]').size()>0){

return [true,''];

}

return [false,''];

 },

onChangeMonthYear: function(year, month, inst) {




thisMonthNbPost = $('.BlogArchive a[href^="'+thisDomain +year + "_" + ((month<10)?"0"+month : month) + "_"+'"]').size();




setTimeout(function (){

$(".ui-datepicker-title").append(" <small class='nbPostThisMonth' title='"+thisMonthNbPost+" messages ce mois-ci'>"+thisMonthNbPost+ "</small>");

},0);

}

});




});

</script>




<style type="text/css">

.ui-datepicker, .ui-datepicker .ui-state-active{

display : block;

overflow: hidden;

background: transparent !important;

border : 1px solid white !important;

}




.ui-datepicker .ui-state-active{

font-weight : bold  !important;

color : black  !important;

}




.ui-datepicker-prev, .ui-datepicker-next{

cursor:pointer;

}




.BlogArchive{

display:none;

}

.nbPostThisMonth{

float: right;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx-w-fXWlzOuSHFxwcEWA806gBLTjrM36MJtpYmr-80x_zIA7dvwFP12fiYxnZbxsChhIJi20w4QsFx8eiUVGLZv3cLNBreveJhCxXOCCvODYRmKo-2dnSXcIFF5IgUqqUq_VuVa3yHDUT/) no-repeat center;

width: 24px;

height: 24px;

line-height: 20px;

color: black;

}

</style>




<div id="datepicker"></div>








Résultat final