Image de l'article Calendrier javascript gratuit : jsSimpleDatePickr v2

Commentaires sur l'article Calendrier javascript gratuit : jsSimpleDatePickr v2

#1

Par Jo Melnik à 11h59 :

J'aimerai indiquer un bug et proposer une amélioration
1) le BUG
Sur le code généré par ta page, le moi d'Avril ressort comme undefined dans le code généré (surement un nom de champ erroné dans le formulaire qui propose les noms des mois)

2) J'ai trouvé pratique de changer dans le code le mask d'affichage : 'dateMask' pour le format de la date retournée (AAAA-MM-JJ par exemple). Mais ce serai sympa que ce mask s'applique aussi sur la date d'entrée ( dans me.CalDateInit )

Voilà, merci beaucoup pour ton code qui ma simplifié la vie, GG

#2

Par Patrice à 12h22 :

1) Le bug est corrigé

2) C'est prévu, c'est à ça que servira la variable dateMask. Elle fonctionnera dans les deux sens ;-)

Merci pour le retour.

#3

Par Francois à 11h25 :

Bonjour, super fonction.

J'ai un petit problème avec son utilisation.
J'aimerai l'utiliser sur deux input différent mais quand je l'appel avec deux inputFieldId et divId différent il fonctionne très bien sauf si je change d'année.

Lors de ce changement dans la deuxième input la valeur cliqué sur le cal remplace la valeur du premier.

Tant que l'on ne change pas d'année, pas de prob.
cal 1 -> input 1
cal 2 -> input 2

et lors du changement d'année
cal1 (2016) -> input1
cal2 (2017) -> input 1 (le problème est ici).

Bien à vous

#4

Par Patrice à 12h27 :

Bonjour Francois,

Vous avez créer un calendrier pour chaque champ ?

<input value="31/12/2016" name="calDate1" id="calDate1" size="30" maxlength="50" type="text">
<div id="calendarMain1" class="calendarMain"</div>

<input value="01/01/2017" name="calDate2" id="calDate2" size="30" maxlength="50" type="text">
<div id="calendarMain2" class="calendarMain"</div>

<script type="text/javascript">
var myCalendar = jsSimpleDatePickr();
// calendrier pour le premier champ
myCalendar.CalAdd({
'divId': 'calendarMain1',
'inputFieldId' : 'calDate1',
'navType': '01',
'dayLst':
});
// calendrier pour le second champ
myCalendar.CalAdd({
'divId': 'calendarMain2',
'inputFieldId' : 'calDate2',
'navType': '01',
'dayLst':
});
</script>

#5

Par Francois à 12h33 :

Oui les champs id et name sont différent pour les deux.
le bug ne se produit que quand on change d'année sur le deuxième cal.
Voir ici :


<div class="form-group col-md-3">
<label for="titre">Du</label>
<input type="text" class="form-control" data- id="date_deb_ajout" placeholder="" name="date_deb_ajout">
</div>
<div class="form-group col-md-3">
<label for="titre">Vers</label>
<select class="form-control margin-bottom-10" id="du_vers" name="du_vers">
<option value="09"></option>
<option value="09">9h</option>
<option value="12">12h</option>
<option value="16">16h</option>
<option value="20">20h</option>
<option value="23">23h</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="titre">Au</label>
<input type="text" class="form-control" data- id="date_fin_ajout" placeholder="" name="date_fin_ajout">
</div>
<div class="form-group col-md-3">
<label for="titre">Vers</label>
<select class="form-control margin-bottom-10" id="au_vers" name="au_vers">
<option value="09"></option>
<option value="09">9h</option>
<option value="12">12h</option>
<option value="16">16h</option>
<option value="20">20h</option>
<option value="23">23h</option>
</select>
</div>

<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': true
});
//]]>
</script>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': true
});
//]]>
</script>

#6

Par Patrice à 12h59 :

Pour le deuxième calendrier cette ligne n'est pas utile :

var myCalendar = new jsSimpleDatePickr();

La variable myCalendar est déjà instancié plus haut.
Essayez de la supprimer, ça devrait fonctionner.

#7

Par Francois à 13h59 :

Parfait.
Comme je disait, un script génial.

#8

Par Patrice à 14h29 :

Merci :-)

#9

Par Francois à 15h25 :

Bonjour,

Dans le cadre d'une modification d'enregistrement est il possible d'afficher dans le cal la date précédemment introduite.

Est t'il possible aussi dans la cadre de l'affichage de deux cal pour un date range de faire en sorte que le deuxième cal se met automatiquement sur la date choisie par le premier ?

Bien à vous

#10

Par Patrice à 16h51 :

Bonjour François,

1- Oui bien sûr. Il suffit de définir la date dans le champ input. Le calendrier s'initialisera d'après cette date.

2- Pas directement. Mais c'est possible en définissant une fonction de retour. Dans cette fonction de retour, vous comparez les deux dates et modifier celle qui n'est pas dans les clous :

<script type="text/javascript">
var myCalendar = new jsSimpleDatePickr();
myCalendar.CalAdd({
'divId': 'calendar1',
'inputFieldId': 'ID_CHAMP_DATE_1',
'callBack': Day1Init,
});
myCalendar.CalAdd({
'divId': 'calendar2',
'inputFieldId': 'ID_CHAMP_DATE_2',
'callBack': Day2Init,
});

function Day1Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 2
document.getElementById('ID_CHAMP_DATE_2').value = aDate;
}
}

function Day2Init(aDate){
if(DateCompare('>')){
// si la date 1 est supérieur à la date 2, on change la date 1
document.getElementById('ID_CHAMP_DATE_1').value = aDate;
}
}

// compare les deux dates
// j'utilise cette fonction sur un site de réservation de salle
function DateCompare(aMode){
var d1 = document.getElementById('ID_CHAMP_DATE_1');
d1 = d1.value.split('/');
d1 = new Date(d1, d1-1, d1);
var d2 = document.getElementById('ID_CHAMP_DATE_2');
d2 = d2.value.split('/');
d2 = new Date(d2, d2-1, d2);
switch(aMode){
case '>' : return d1>d2;
case '>=' : return d1>=d2;
case '=' : return d1.valueOf()==d2.valueOf();
case '<=' : return d1<=d2;
case '<' : return d1<d2;
}
return 0;
}
</script>


Je vais écrire un article sur ce fonctionnement, ça revient souvent :-)

#11

Par Dominique à 13h17 :

Bonjour,

Magnifique script que je compte utiliser sur mon futur site, je m'engage d'ailleurs à mettre un lien sur ce blog.

Je voudrais simplement reporter un petit oubli dans les sources CSS : en effet, le bouton pour revenir en arrière n'est pas correctement placé, puisqu'il semble manquer la ligne suivante :

.calendarNav .calendarNavML, .calendarNav .calendarNavYL{
float: left;
}

Encore merci pour ce superbe script JS ! BRAVO pour le travail accompli.

Dominique

#12

Par Patrice à 18h27 :

Bonsoir Dominique,

Tant mieux si le code aide.
Vous avez une capture d'écran pour les boutons mal placés ? D'avance merci :-)

#13

Par Dominique à 20h04 :

Bonsoir Patrice,

Voici la capture d'écran demandée. Corriger ce petit décalage est très simple, il suffit d'ajouter la ligne CSS ci-dessus :-)

#14

Par Patrice à 20h29 :

Oui pas de soucis pour corriger ça, mais ça m'étonnait qu'il y ait un décalage.
Le flux de la page était centré j'imagine ?

Hop c'est corrigé. Merci pour le retour :-)

Je me suis contenté de rajouter un text-align: left; à la classe .calendarMain.
Passer les boutons gauche en flottant faisait remonter le calendrier.

#15

Par Dominique à 20h39 :

Bonsoir Patrice,

"Le flux de la page était centré j'imagine ?"

Bonne remarque ! En enlevant cette propriété, tout revient en ordre.

Merci et bonne soirée !

#16

Par esuquet à 07h05 :

Bonjour, je souhaite utiliser votre calendrier de la facon suivante mais je n'y arrive pas. Je voudrais que le calendrier s'affiche tout le temps et que lorsqu'un jour est cliqué, il reste sur un fond rouge. De plus, il me faut récupérer le jour, la date et l'année pour actualiser d'autres variables de ma page. Pourriez vous m'aider ?

#17

Par Patrice à 13h40 :

Bonjour esuquet,

Pour avoir un calendrier afficher constamment il faut utiliser les propriétés showOnLaunch (le calendrier est affiché à l'initialisation) et hideOnClick (le calendrier est masqué en cliquant sur une date).

Pour récupérer la date sélectionné vous pouvez utiliser une fonction de retour avec la propriété callBack.

myCalendar.CalAdd({
'divId': 'calendarMain',
'callBack': maFonction,
'hideOnClick': true,
'showOnLaunch': true
});

#18

Par Melk à 15h53 :

Bonjour Patrice,
Tout d'abord merci pour ce calendrier pratique et joli.
Jusqu'à ce matin j'utilisais une version antérieure que j'avais modifiée pour rajouter deux boutons pour avancer ou reculer l'année de 30 par 30 pour saisir une date de la fin du siècle dernier. Maintenant plus besoin avec : 'dateCentury': 19, très bonne idée cette modification.
J'ai un petit souci dans son utilisation. j'ai deux champs date sur la même page pour lesquels j’instancie 2 calendriers. le souci est que quand je clique sur le second champ, çà m'enlève le calendrier du 1er et si je clique à nouveau le calendrier vient se mettre sous le 1er champ.
Quel que soit le champ sur lequel je clique, le calendrier apparait contre le 1er champ. Suis-je clair?
1ère instanciation
<div id="calendarMain0" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>

2ème instanciation
<div id="calendarMain1" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>
merci

#19

Par Melk à 15h59 :

Re-bonjour Patrice,
Je me rend compte que j'ai oublié les balises <cote>
1ère instanciation

<div id="calendarMain0" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>

2ème instanciation
<div id="calendarMain1" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>

#20

Par Patrice à 16h00 :

Bonjour Melk,

Sans avoir testé le code, je dirais que le problème vient de l'initialisation.
Pas besoin de créer deux objets. Vous pouvez créer un objet et y ajouter autant de calendrier que vous voulez.
Par exemple :

<script type="text/javascript">
var myCalendar = new jsSimpleDatePickr();
myCalendar.CalAdd({
[les paramètres du premier calendrier)
});
</script>

// plus loin dans le code
<script type="text/javascript">
myCalendar.CalAdd({
[les paramètres du second calendrier)
});
</script>

#21

Par Melk à 16h08 :

Merci beaucoup,
C'est parfait.

#22

Par Melk à 16h13 :

à oui, j'oubliais, chez moi, les boutons 'année +' 'année -' et 'mois +' 'mois -' affichent des hiéroglyphes. J'ai remplacé par '-A' 'A+' '-M' 'M+' mais les boutons sont étroits et 'M+' affiche 'M-' car on ne voit que le début du '+'.
Mon charset est 'utf8'
Merci encore pour ce "boulot".

#23

Par Melk à 17h57 :

Je viens de faire d'autres essais.
En fait je suis sous firefox et voila la partie de code en question que j'ai copié sur votre blog.


if(data.navType != null && data.navType.charAt(0) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYL', 'type': 'button', 'value': '«'});
i.onclick = function(){
me.CalYearNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYR', 'type': 'button', 'value': '»'});
i.onclick = function(){
me.CalYearNav(id, '+1');
};
}
// ajoute les boutons pour la navigation par mois
if(data.navType != null && data.navType.charAt(1) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavML', 'type': 'button', 'value': '‹'});
i.onclick = function(){
me.CalMonthNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavMR', 'type': 'button', 'value': '›'});
i.onclick = function(){
me.CalMonthNav(id, '+1');
};
}

j'ai lancé opéra avec la même url et voila ce que j'ai récupéré:
	if(data.navType != null && data.navType.charAt(0) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYL', 'type': 'button', 'value': '«'});
i.onclick = function(){
me.CalYearNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYR', 'type': 'button', 'value': '»'});
i.onclick = function(){
me.CalYearNav(id, '+1');
};
}
// ajoute les boutons pour la navigation par mois
if(data.navType != null && data.navType.charAt(1) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavML', 'type': 'button', 'value': '‹'});
i.onclick = function(){
me.CalMonthNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavMR', 'type': 'button', 'value': '›'});
i.onclick = function(){
me.CalMonthNav(id, '+1');
};
}

Donc le souci vient de mon navigateur.

#24

Par Patrice à 22h01 :

Je suis aussi sur Firefox (entre autre).
Quand vous ouvrez le fichier javascript avec un éditeur de texte, les caractères sont affichés correctement ?

#25

Par Melk à 23h23 :

Ils sont affichés de la même façon puisque le texte que je copie/colle depuis https://blog.niap3d.com/calendrier-javascript/js/jsSimpleDatePickr.2.1.js
est, vu de mon navigateur (Firefox 50.1.0), comme ceci

/*http://blog.niap3d.com/jsSimpleDatePickr*/
function jsSimpleDatePickr(){
var me = this;
me.jsSDPObj = Array();
me.jsSDPId = 1;
//
// ajoute un calendrier
//
me.CalAdd = function(data){
var calDiv = document.getElementById(data.divId);
var dateEl = document.getElementById(data.inputFieldId);
// vérifie les données
if(typeof(calDiv) == 'undefined') return 0;
if(typeof(dateEl) == 'undefined') data.inputFieldId = '';
if(typeof(data.hideOnClick) != 'boolean') data.hideOnClick = 1;

var id = me.jsSDPId;
if(data.buttonTitle == null || data.buttonTitle.length <= 0){
if(dateEl != null){
// attache la fonction CalToogle au champ de texte qui contiendra la date
dateEl.addEventListener('click', function(){ me.CalDoFromField(data.inputFieldId, 'toogle'); }, false);
}

}else{
// ajoute le bouton pour afficher, masquer le calendrier
var bt = me.DomElementInit('input', {'parent': calDiv, 'value': data.buttonTitle, 'type': 'button'});
bt.onclick = function(){
me.CalToogle(id);
};
}
// bloc div principal
var divW = me.DomElementInit('div', {'parent': calDiv, 'id': 'calendarWrap'+id});
// ajoute le paragraphe du titre
if(data.navType != '00') divW.innerHTML += '<p id="calendarTitle'+id+'" class="calendarTitle"></p>';
var divNav = me.DomElementInit('div', {'parent': divW, 'class': 'calendarNav'});
// ajoute les boutons pour la navigation par an
if(data.navType != null && data.navType.charAt(0) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYL', 'type': 'button', 'value': '«'});
i.onclick = function(){
me.CalYearNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavYR', 'type': 'button', 'value': '»'});
i.onclick = function(){
me.CalYearNav(id, '+1');
};
}
// ajoute les boutons pour la navigation par mois
if(data.navType != null && data.navType.charAt(1) == 1){
var i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavML', 'type': 'button', 'value': '‹'});
i.onclick = function(){
me.CalMonthNav(id, '-1');
};
i = me.DomElementInit('input', {'parent': divNav, 'class': 'calendarNavMR', 'type': 'button', 'value': '›'});
i.onclick = function(){
me.CalMonthNav(id, '+1');
};
}
// bloc div qui contiendra le calendrier
me.DomElementInit('div', {'parent': divW, 'id': 'calendar'+id});
// masque le div principal
divW.style.display = 'none';
// sauvegarde l'objet
me.jsSDPObj.push({
'divId': data.divId,
'inputFieldId': data.inputFieldId,
'callBack': data.callBack,
'id': id,
'displayNumber': parseInt(data.displayNumber) > 1 ? data.displayNumber:1,
'dateSel': new Date(),
'dateDisp': new Date(),
'dateCentury': data.dateCentury == null ? 20:data.dateCentury,
'dayLst': data.dayLst,
'monthLst': data.monthLst,
'dateMask': data.dateMask == null ? 'JJ/MM/AAAA':data.dateMask,
'titleMask': data.titleMask == null ? '':data.titleMask,
'hideOnClick': data.hideOnClick,
'classTable': data.classTable,
'classDay': data.classDay,
'classDaySelected': data.classDaySelected
});
me.CalDateInit(id);
me.jsSDPId++;
if(data.showOnLaunch) me.CalToogle(id);
return id;
}
//
// supprime un calendrier
//
me.CalDelete = function(id){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
document.getElementById(me.jsSDPObj).innerHTML = '';
me.jsSDPObj.splice(nb, 1);
}
//
// supprime tous les calendriers
//
me.CalDeleteAll = function(){
for(var i = 0; i < me.jsSDPObj.length; i++){
document.getElementById(me.jsSDPObj).innerHTML = '';
me.jsSDPObj = 0;
}
me.jsSDPObj = Array();
me.jsSDPId = 1;
}
//
// renvoi le numéro dans l'Array d'après l'id
//
me.CalId2Nb = function(id){
for(var i = 0; i < me.jsSDPObj.length; i++){
if(me.jsSDPObj == id){
return i;
}
}
return -1;
}
//
// affiche / masque le calendrier (clic depuis un champ de texte)
//
me.CalDoFromField = function(fieldId, action){
for(var i = 0; i < me.jsSDPObj.length; i++){
if(me.jsSDPObj == fieldId){
if(action == 'toogle') me.CalToogle(me.jsSDPObj);
if(action == 'show') me.CalShow(me.jsSDPObj);
if(action == 'hide') me.CalHide(me.jsSDPObj);
break;
}
}
}
//
// affiche / masque le calendrier
//
me.CalToogle = function(id){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
var e = document.getElementById('calendarWrap'+me.jsSDPObj);
if(e == 'undefined') return 0;
if(e.style.display == 'block'){
e.style.display = 'none';

}else{
if(me.jsSDPObj != ''){
var f = document.getElementById(me.jsSDPObj);
if(f != null) me.CalDateInit(id, String(f.value));
}
me.CalShow(id);
}
}
//
// affiche le calendrier
//
me.CalShow = function(id){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
var e = document.getElementById('calendarWrap'+me.jsSDPObj);
if(!e) return 0;
me.CalContentInit(nb);
me.CalShowTitle(nb);
e.style.display = 'block';
}
//
// masque le calendrier
//
me.CalHide = function(id){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
var e = document.getElementById('calendarWrap'+me.jsSDPObj);
if(!e) return 0;
e.style.display = 'none';
}
//
// navigation par mois
//
me.CalMonthNav = function(id, val){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
me.jsSDPObj.setDate(1);
var v = parseInt(val, 10);
if(val.charAt(0) == '+' || val.charAt(0) == '-') v = me.jsSDPObj.getMonth()+v;
me.jsSDPObj.setMonth(v);
me.CalContentInit(nb);
me.CalShowTitle(nb);
}
//
// navigation par année
//
me.CalYearNav = function(id, val){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
var v = parseInt(val, 10);
if(val.charAt(0) == '+' || val.charAt(0) == '-') v = me.jsSDPObj.getFullYear()+v;
me.jsSDPObj.setFullYear(v);
me.CalContentInit(nb);
me.CalShowTitle(nb);
}
//
// change la date
//
me.CalDateInit = function(id, dateStr){
var nb = me.CalId2Nb(id);
if(nb < 0) return 0;
var o = me.jsSDPObj;
if(!dateStr) dateStr = '';
var m = o;
// extrait la date d'après le mask
var pos, dY, dM, dD;
pos = m.indexOf('JJ');
if(pos != -1) dD = parseInt(dateStr.substr(pos, 2), 10);
var pos = m.indexOf('AAAA');
if(pos != -1) dY = parseInt(dateStr.substr(pos, 4), 10);
else{
pos = m.indexOf('AA');
if(pos != -1) dY = parseInt(dateStr.substr(pos, 2), 10)+o*100;
}
pos = m.indexOf('MM');
if(pos != -1) dM = parseInt(dateStr.substr(pos, 2), 10)-1;
today = new Date();
if(isNaN(dD)) dD = today.getDate();
if(isNaN(dM)) dM = today.getMonth();
if(isNaN(dY)) dY = parseInt(today.getFullYear().toString().substr(2, 2), 10)+o*100;
o = new Date(dY, dM, dD);
o = new Date(dY, dM, dD);
}
//
// affiche le calendrier
//
me.CalContentInit = function(nb){
var i, j;
var cal = me.jsSDPObj;
var dayOrder = '1234560';
var curDate = new Date(cal.getFullYear(), cal.getMonth(), 1);
document.getElementById('calendar'+cal).innerHTML = '';
for(j = 0; j < cal; j++){
var num = today = 0;
var month = curDate.getMonth();
var year = curDate.getFullYear();
if(month == cal.getMonth() && year == cal.getFullYear()) today = cal.getDate();
var elT = me.DomElementInit('table', {'parent': document.getElementById('calendar'+cal), 'class': cal});
var elTr = me.DomElementInit('tr', {'parent': elT});
for(i = 0; i < 7; i++){
me.DomElementInit('th', {'parent': elTr, 'content': cal]});
}
elTr = me.DomElementInit('tr', {'parent': elT});
var h, d = new Date(year, month, 1);
for(num = 0; num < dayOrder.indexOf(d.getDay()); num++){
me.DomElementInit('td', {'parent': elTr});
}
d.setMonth(month+1, 0);
for(i = 1; i <= d.getDate(); i++){
num++;
if(num > 7){
num = 1;
elTr = me.DomElementInit('tr', {'parent': elT});
}
var cell = me.DomElementInit('td', {'parent': elTr, 'class': (i == today ? cal:cal), 'content': i});
cell.onclick = (function(v, m, y){
return function(){
me.CalClick(nb, v+'/'+m+'/'+y);
}
})(i, month, year);
}
for(i = num; i < 7; i++){
me.DomElementInit('td', {'parent': elTr});
}
curDate.setMonth(curDate.getMonth()+1);
}
}
//
// callback : gère une clic sur une date
//
me.CalClick = function(nb, dateStr){
var dateArr = dateStr.split('/');
var cal = me.jsSDPObj;
cal = new Date(dateArr, dateArr, dateArr);
if(cal != ''){
dateArr++;
var m = cal;
m = m.replace('AAAA', dateArr);
m = m.replace('AA', dateArr.toString().substr(2,2));
m = m.replace('MM', parseInt(dateArr, 10) < 10 ? '0'+dateArr:dateArr);
m = m.replace('M', dateArr);
m = m.replace('JJ', parseInt(dateArr, 10) < 10 ? '0'+dateArr:dateArr);
m = m.replace('J', dateArr);
f = document.getElementById(cal);
if(f != null) f.value = m;
if(cal) document.getElementById('calendarWrap'+cal).style.display = 'none';
else me.CalContentInit(nb);

}else{
me.CalContentInit(nb);
}
// callback
if(typeof cal === "function") cal(dateStr);
}
//
// affiche le titre
//
me.CalShowTitle = function(nb){
if(typeof me.jsSDPObj == 'undefined') return 0;
var e = document.getElementById('calendarTitle'+me.jsSDPObj);
if(!e) return 0;
var cal = me.jsSDPObj;
var m = cal;
if(m == '') return 0;
var d = cal.getMonth();
m = m.replace('MM', parseInt(d, 10) < 10 ? '0'+:);
m = m.replace('M', cal);
d = cal.getFullYear();
m = m.replace('AAAA', d);
m = m.replace('AA', d.toString().substr(2,2));
e.innerHTML = m;
}
//
// crée un element DOM
//
me.DomElementInit = function(type, opt){
var e = document.createElement(type);
if(opt.id != undefined) e.id = opt.id;
if(opt.class != undefined) e.className = opt.class;
if(opt.type != undefined) e.type = opt.type;
if(opt.value != undefined) e.value = opt.value;
if(opt.content != undefined) e.innerHTML = opt.content;
if(opt.parent != undefined) opt.parent.appendChild(e);
return e;
}
return me;
}
et si j'utilise opéra c'est bon je vois les guillemets au lieu '›' et compagnie. Et lorsque j'avais téléchargé la version que j'utilisais jusqu'à ce matin j'avais eu le même inconvénient. Il y a peut-être un mauvais paramétrage quelque part sur mon navigateur mais jusque là je ne m'étais pas aperçu de çà.
C'est peut-être aussi pour çà que sur 2 configs j'ai des chevauchements comme par exemple sur la dernière en bas à droite le titre et les jours de la semaine se chevauchent, j'ai essayé d'inclure une copie d'écran mais je n'arrive pas à l'afficher malgré les balises <img>

#26

Par Patrice à 23h30 :

À tous hasard, au lieu de copier-coller, essayez de faire enregistrer-sous sur le lien.

Pour les balises img, il faut mettre un lien http entre deux balises

#27

Par Melk à 23h45 :

effectivement avec "enregistrer sous" le texte est correct même avec firefox.
Pour l'image je ne saisi pas "il faut mettre un lien http entre deux balises"
l'image n'est pas sur un serveur mais sur mon ordinateur je ne sais pas comment la remonter.
Tant que j'y suis, je précise que je suis néophyte en JS mais j'essaye de me soigner, une propriété m'intrigue :

'displayNumber': parseInt(data.displayNumber) > 1 ? data.displayNumber:1,
elle n'est pas dans data de
<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>
et j'aime bien comprendre, d'autant que j'ai trouvé le calendrier tellement sympa esthétiquement que comme j'ai une grille de saisie d'un nombres à faire entre 0 et 99 à plusieurs reprises, j'aurai utilisé le même visuel que le calendrier qui va se trouver à coté. Donc à quoi sert cette propriété.
Merci

#28

Par Patrice à 00h42 :

displayNumber permet de définir le nombre de mois à afficher.
Ça permet d'afficher un trimestre ou une année d'un coup, par exemple.

#29

Par Melk à 16h33 :

Bonjour,
J'ai construit ma grille mais je n'arrive pas à faire fonctionner le gestionnaire de click. Seriez-vous d'accord pour m'expliquer la gestion du votre?

				var cell = me.DomElementInit('td', {'parent': elTr, 'class': (i == today ? cal:cal), 'content': i});
cell.onclick = (function(v, m, y){
return function(){
me.CalClick(nb, v+'/'+m+'/'+y);
}
})(i, month, year);

je met mon code au cas ou vous accepteriez mais je comprendrais très bien que vous refusiez! je vous remercie
while (num <= NbMax)
{
for(j = 0; j < NbLig; j++)
{
var elTr = me.DomElementInit('tr', {'parent': elT});
for(i = 0; i < NbCol; i++)
{
var cell = me.DomElementInit('td', {'parent': elTr, 'id': 'td'+num, 'class': grl, 'content': num});
cell.addEventListener('click', function(){ me.grilleClick(nb, cell.id, NbMax); }, false);
num++;
if (num > NbMax) break;

}
elTr = me.DomElementInit('tr', {'parent': elT});
if (num > NbMax) break;
}
}
avec ce code, où que je clique c'est l'id de la dernière cellule qui passe.

#30

Par Patrice à 21h38 :

A mon avis le problème vient de la porté des variables.
Les variables nb et NbMax existent dans la boucle while, mais pas dans le fonction de clic. Il faut les enregistrer sur l'objet, ou les passer dans les attributs de fonction comme j'ai fait. Par exemple :

cell.dataset.nb = nb;
cell.dataset.nbMax = nbMax;

Et dans la fonction :
cell.addEventListener('click', function(){ me.grilleClick(this.dataset.nb, this.id, this.dataset.nbMax); }, false);

#31

Par Melk à 23h41 :

Bonsoir Patrice
C'est bien çà.
çà fonctionne.
Merci beaucoup

#32

Par zarcraft à 15h06 :

Bonjour,
débutant dans HTML j'ai déjà quelques vbscript et javascript mais placé en "function" dans l'entête <head> </head>.
Est'il possible de ne garder dans le corp <body>
<div id="calendarMain" class="calendarMain"></div>
</body>
et de mettre le script générer par le configurateur en fonction javascript?


<script type="text/javascript">
var myCalendar = new jsSimpleDatePickr();
myCalendar.CalAdd({
'divId': 'calendarMain',
'buttonTitle': 'afficher le calendrier',
'inputFieldId': 'madate',
'dateMask': 'JJ/MM/AA',
'dateCentury': 20,
'titleMask': 'M AAAA',
'navType': '11',
'classTable': 'jsCalendar',
'classDay': 'day',
'classDaySelected': 'selectedDay',
'monthLst': ,
'dayLst': ,
'hideOnClick': true,
'showOnLaunch': false
});
</script>

autre remarque:Février Août Décembre ne s'affiche pas correctement sous IE, j'ai donc remplacer sans les accents

#33

Par Patrice à 22h04 :

Bonsoir zarcraft,

Si vous placez le code tel quel dans l'entête, ça ne fonctionnera pas.
Car les éléments du DOM ne seront pas chargé avant l'initialisation du calendrier.

Si vous utilisez jQuery vous pouvez utiliser

$( document ).ready(function() {
// insérer ici le code d'initialisation
});

#34

Par zarcraft à 09h26 :

Bonjour,
afin de préciser mon besoin je ne travail pas directement du HTML mais du HTA...
bref
j'ai inséré ces 2 lignes entre les balises d'entête

<head>
<link rel="stylesheet" type="text/css" href="default_blue.css" />
<script type="text/javascript" src="jsSimpleDatePickr.2.1.js"></script>
</head>

et le div avec son script dans le <body>
j'ai 2 erreurs sur 2 popup différent:
ligne 319 caractère 9
identificateur attendu sur
url file:///C:/Users/xxx/Desktop/fichiers%20xxx/jsSimpleDatePickr.2.1.js
la ligne 319 est dans une fontion vbscript donc rien a voir

et ligne 972 caractère 1
jsSimpleDatePickr est indefini

cette ligne est var myCalendar = new jsSimpleDatePickr();

il faut redéclarer jsSimpleDatePickr a quel niveau?

#35

Par Patrice à 10h11 :

Je ne connais pas HTA, donc je ne sais pas s'il existe des limitations lors de la lecture.
Il faut déjà vérifier que le fichier jsSimpleDatePickr.2.1.js est correctement chargé.

#36

Par zarcraft à 12h44 :

Comment vérifier que le fichier jsSimpleDatePickr.2.1.js est correctement chargé?

#37

Par Patrice à 14h01 :

Par exemple en ajoutant console.log('jsSimpleDatePickr OK'); à la fin du fichier .js

#38

Par zarcraft à 14h38 :

j'ai tester avec d'autres fichiers js et ceux-ci ne contienne pas d'élément DOM et cela fonctionne mais ne repond pas exactement à mon besoin

#39

Par Patrice à 10h54 :

Vous pouvez aussi copier coller la fonction javascript directement dans le head plutôt que de faire appel à un fichier externe.

#40

Par zarcraft à 12h17 :

Auriez vous un exemple?
J'ai supprimer la ligne de référencement du fichier .js dans le head
J'ai copier tout le contenu du fichier .js dans le head
/*http://blog.niap3d.com/jsSimpleDatePickr*/
function jsSimpleDatePickr(){
var me = this;
me.jsSDPObj = Array();
me.jsSDPId = 1;
//
// ajoute un calendrier
//....etc...

#41

Par Patrice à 12h39 :

Oui c'est ça. Il faut copier le code dans des balises script. Mais je ne sais pas si ça va régler le problème de l'objet non définit.


<html>
<head>
<script>
// copier le code ici
</script>
</head>
<body>
</body>
</html>

#42

Par zarcraft à 13h00 :

cela ne règle pas le pb . plusieurs erreur dont la première concerne la ligne
if(opt.class != undefined) e.className = opt.class;

#43

Par Patrice à 13h12 :

Essayez de remplacer '!= undefined' par '!== "undefined"'
Quel navigateur (version / système) ?

#44

Par zarcraft à 16h47 :

ko
je suis sous windows 7 pro x64 + IE11

Si vous aviez un peu de temps je pourrais vous envoyer mes sources directement,ce serais peut être plus explicite?

#45

Par Patrice à 16h52 :

Oui, vous pouvez poster un lien ou m'envoyez les source à patrice.k AT niap3d.com

#46

Par philippe à 15h40 :

Bjr,

Je n'y connais pas grand chose mais je pense avoir suivi la procédure.. J'ai créé un directory et ai placé mon fichier index.php . Dans ce directory j'ai créé un sous directory text et j'y ai mis les fichiers jsSimpleDatePickr.2.1.js et default_blue.css. Le fichier index.php est ci-dessous mais je n'obtiens qu'une page blanche. Je suis certain que cette question va vous paraître idiote mais je serai content si vous m'indiquiez pourquoi cela ne fonctionne pas..
Merci d'avance.


<!doctype html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="default_blue.css" />
<script type="text/javascript" src="jsSimpleDatePickr.2.1.js"></script>


</head>
<body>
<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'ophicléide': true,
'showOnLaunch': false
});
//]]>
</script>

</body>
</html>

#47

Par Patrice à 16h30 :

Bonjour philippe,

Le code collé n'est pas complet, mais je pense que c'est le copié collé qui a dû être effacé.
Que dit la console du navigateur ?

#48

Par philippe à 16h44 :

Le code copié/collé était bien correct: cela doit être un problème d'affichage sur le blog. Je ne sais pas comment marche la console mais j'ai trouvé une autre façon de faire et je vous remercie pour votre réponse.

#49

Par Patrice à 16h48 :

Pour afficher la console
Sous Firefox : Outils / Développement Web / Console du navigateur
Sous Chrome : Afficher / Options pour développeur / Console Javascript

Ça permet de voir les erreurs de chargement / script / autres

#50

Par Marc à 17h33 :

Bonjour,
Je voudrais que le calendrier s'affiche sur click du champ à mettre à jour. J'ai pensé mettre un écouteur sur ce champ mais je ne sais pas quelle fonction appeler.
Voici ma configuration://<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>

#51

Par Patrice à 18h08 :

Bonjour Marc,

Vous pouvez appelez la fonction CalShow avec comme paramètre l'identifiant du champ.

document.getElementById('ID_DU_CHAMP').addEventListener('click', function(){ myCalendar.CalShow('ID_DU_CHAMP'); }, false);

#52

Par Marc à 20h18 :

OK, merci. De plus j'avais essayé une version précédente et celle-ci est plus facile à mettre en oeuvre.

#53

Par Marc à 11h33 :

Bonjour
Je souhaite cacher le calendrier, lorsque le champ et le calendrier perdent le focus.
J'ai écrit un petit script mais je ne trouve pas le paramètre à transmettre à la fonction.
var divAbo = document.getElementById('calendarMain');
divAbo.addEventListener('blur', function(e) {
myCalendar.CalHide(/*divId*/'calendarMain'/*'ID_DU_CHAMP'*/);
}), false;
</script>

#54

Par Marc à 12h04 :

Re-Bonjour,
A la relecture, je vois que j'ai du mal utiliser la balise 'code'.
Je souhaite cacher le calendrier, lorsque le champ et le calendrier perdent le focus.
J'ai écrit un petit script mais je ne trouve pas le paramètre à transmettre à la fonction.

var divAbo = document.getElementById('calendarMain');
divAbo.addEventListener('blur', function(e) {
myCalendar.CalHide(/*divId*/'calendarMain'/*'ID_DU_CHAMP'*/);
}), false;

#55

Par Patrice à 09h32 :

Bonjour Marc,

Erreur de ma part, avec CalHide c'est l'identifiant interne un calendrier qu'il faut passer. Cet id est renvoyé par la fonction CalAdd.


var myCalendar = new jsSimpleDatePickr();
var calId = myCalendar.CalAdd({
/* liste des paramètres */
});
divAbo.addEventListener('blur', function(e){ myCalendar.CalHide(calId); }, false);

CalHide => masquer
CalShow => Afficher
CalToogle => inverser l'affichage

Sinon il y a une fonction CalDoFromField qui attend deux paramètres :
- l'identifiant du champ (qui a été passé à l'initialisation)
- l'action : 'toogle', 'show', 'hide
Ça évite de devoir enregistrer l'id interne

#56

Par Marc à 12h40 :

Bonjour Patrice,
Aucune des deux solutions ne fonctionne. Voici mon code complet:

<script src="jsSimpleDatePickr.2.1.js"></script>
<script>
var divAbo = document.getElementById('calendarMain');
var myCalendar = new jsSimpleDatePickr();
//<!,
'monthLst': <?= json_encode(JS_CAL_MONTHES); ?>,
//'dayLst': ,
'dayLst': <?= json_encode(JS_CAL_DAYS); ?>,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
// Effacement sur clic hors divAbo
divAbo.addEventListener('blur', function(e){ alert('rrrrrr'); myCalendar.CalHide(calId); }, false);
/*
// Ne fonctionne pas
divAbo.addEventListener('blur', function(e) {
CalDoFromField('init_abo', 'hide');
}, false);
*/
</script>

#57

Par Marc à 17h10 :

Les deux méthodes semblent équivalentes.
Je récapitule. Je veux masquer le calendrier après mise à jour du champ date ou après avoir cliqué en dehors du calendrier ou du champ date.
Ma difficulté est d'appliquer l'écouteur du bon type et sur le bon élément. Actuellement soit le calendrier n'est pas masqué, soit il est masqué avant la mise à jour du champ date.

#58

Par Patrice à 10h17 :

Bonjour Marc,

Il faut appliquer l'évenement blur au champ, pas au calendrier.

document.getElementById('init_abo').addEventListener('blur', function(e){ alert('rrrrrr'); myCalendar.CalHide(calId); }, false);


Pour le calendrier je contournerais le problème en ajouter un écouteur click sur le fenêtre (lorsque le calendrier est affiché) et vérifier e.target.
- Si e.target est le calendrier => ne rien faire.
- Sinon masquer le calendrier (et effacer l'écouteur).

#59

Par Patrice à 10h20 :

Il faut aussi vérifier si le click n'est pas sur le calendrier sur l'écouteur blur du champ init_abo sinon le calendrier s'effacera.

#60

Par Marc à 11h22 :

Bonjour Patrice,
Je galère et je ne m'en sors pas.
En particulier, je n'arrive pas à voir ce qui se passe au niveau du calendrier et en particulier à remonter l'arborescence du DOM jusqu'au div conteneur 'calendarMain' en cas de clic sur le calendrier.

#61

Par Marc à 16h05 :

Bonjour Patrice,
C'est bon, j'ai résolu mon problème, en ajoutant simplement ceci:

// Effacement du calendrier si clic en dehors du champ init_abo
document.addEventListener('click', function(e) {
if (e.target.id == 'init_abo') return false;
myCalendar.CalDoFromField('init_abo', 'hide');
}, false);


Question :
Comment faîtes-vous le contrôle anti-robot dans l'envoi de ce commentaire. Il semble simple et efficace.

#62

Par Bryan à 16h56 :

Bonjour,

Je viens de récupérer le calendrier, c'est parfait pour mon projet. Je suis débutant en javascript donc je ne comprend pas encore tout.

Je voulais vous demander, est ce qu'il est possible d'afficher en couleur plusieurs dates du calendrier au chargement ?
Je voudrai lors du chargement de la page que certaines dates du calendrier (provenant de ma base de données) s’affiche avec une autre couleur afin que l'utilisateur puisse visualiser directement les dates en question.

J'ai aussi un peu de mal comprendre comment extraire la date que l'utilisateur a sélectionné. J'ai encore des difficultés à comprendre l'objet.

Cordialement.

#63

Par Patrice à 15h50 :

Bonjour Bryan,

Concernant la coloration de différente date. Par défaut, ça n'est pas possible. Mais vous pouvez modifier la fonction d'affichage (CalContentInit) pour intégrer vos données.

Pour récupérer la date c'est plus facile
- Soit vous avez un champ de type text attaché au calendrier. Dans ce cas au clic sur une date, le calendrier va automatiquement changer la valeur du champ. Et vous pouvez utiliser ces valeurs avec un écouteur sur le champ par exemple.
- Soit vous n'avez pas de champ attaché et dans ce cas vous pouvez définir un callBack, c'est à dire une fonction qui sera appelé au clic sur une date.
myCalendar.CalAdd({
'divId': 'calendar1',
'callBack': DateInit,
});


function Day1Init(aDate){
console.log(aDate);
}

Désolé pour le délais de ma réponse.

#64

Par JDRIKORE à 12h26 :

Bonjour, j'ai inséré le code dans une page, mais rien ne s'affiche sur ma page, je ne sais vraiment pas où se trouve le problème.
Voici le code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default_blue.css" />
<script type="text/javascript" src="jsSimpleDatePickr.2.1.js"></script>

</head>
<body>
<div id="calendarMain" class="calendarMain"></div>
<script type="text/javascript">
//<!,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': false
});
//]]>
</script>

</body>
</html>

#65

Par JDRIKORE à 13h35 :

Bonjour,
Super calendrier, j'ai réussi à l'affiché sur mon site, maintenant j'aimerais pouvoir désactiver les dates antérieures à la date d'aujourd'hui afin de permettre aux utilisateurs de sélectionner que à partir de la date d'aujourd'hui.

#66

Par Patrice à 13h37 :

Bonjour JDRIKORE,

Ce n'est pas possible actuellement (ce sera pour une prochaine mise à jour).
Il faudrait modifier les fonctions CalMonthNav, CalYearNav et CalContentInit pour vérifier la date.

#67

Par Patrice à 13h40 :

Bonjour,

Il faut soit lier le calendrier à un input de type text soit mettre la propriété showOnLaunch à true

#68

Par JDRIKORE à 16h47 :

Bonjour,
Merci pour vos réponses.

#69

Par Marc à 16h56 :

Bonjour Patrice,
Dans le code suivant, je rencontre plusieurs difficultés:
Il semble qu'il y ait confusion partielle entre le calendrier d'entrée (calendarIn) et le calendrier de sortie (calendarOut). Ce dernier s'affiche toujours à l'emplacement du calendrier d'entrée.
Le comportement est instable sans que j'arrive à analyser les causes.
Le calendrier d'entrée s'efface quand je clique sur le calendrier d'entrée (normal) ou de sortie (pas normal) et réciproquement.
L'écouteur n'est jamais appelé.

Code CSS:.calendarInLine {
display: inline-block;
}


Code html: <label for="entree">Date d'entrée</label><input type="text" id="entree" name="entree" value="<?= setPostValue('entree'); ?>" placeholder="<?= TODAY_SQL; ?>" required />
<div id="calendarIn" class="calendarMain calendarInLine"></div><br/>
<label for="sortie">Date de sortie</label><input type="text" id="sortie" name="sortie" value="<?= setPostValue('sortie'); ?>" placeholder="<?= TODAY_SQL; ?>" />
<div id="calendarOut" class="calendarMain calendarInLine"></div><br/>


Code Javascript:var entree = new jsSimpleDatePickr();
//<!,
'dayLst': ,
'hideOnClick': true,
'showOnLaunch': false
});
//]]>

var sortie = new jsSimpleDatePickr();
//<!,
'dayLst': ,
'hideOnClick': true,
'showOnLaunch': false
});
//]]>

const body = document.getElementsByTagName('body'),
calIn = document.getElementById('calendarIn'),
calOut = document.getElementById('calendarOut');
console.log(body);
body.addEventListener('clic', function(e) {
console.log(e.target.name);
alert(e.target);
if (e.target.id !== 'entree') calIn.CalHide('entree');
if (e.target.id !== 'sortie') calOut.CalHide('sortie');
}, false );

#70

Par Patrice à 17h34 :

Bonsoir Marc,

Il suffit de n'utiliser qu'un seul objet jsSimpleDatePickr.

var entree = new jsSimpleDatePickr();

entree.CalAdd({
'divId': 'calendarIn',

});

entree.CalAdd({
'divId': 'calendarOut',

});

Vous initialisez une fois l'objet, ensuite vous ajoutez autant de calendrier que vous voulez.

#71

Par JDRIKORE à 11h25 :

Bonjour Patrice,
J'ai un problème avec mon champs input qui récupère la date lors du clic sur le calendrier, en effet lors de la soumission du formulaire le champs input est considéré vide et je sais pas pourquoi, pourtant la date s'affiche bien dans le input.
J'ai donc décidé de faire une fonction de callBack dans laquelle je vais attribuer la date sélectionnée à un autre input masqué, mais là encore, la fonction n'attribut pas la valeur. Pouvez vous jeter un coup d'oeil à mon code:


<script type="text/javascript">
var myCalendar = new jsSimpleDatePickr();
myCalendar.CalAdd({
'divId': 'calendarMain',
'dateMask': 'JJ/MM/AAAA',
'dateCentury': 20,
'inputFieldId' : 'datereserv' ,
'titleMask': 'M AAAA',
'callBack': 'FuncToday',
'navType': '01',
'classTable': 'jsCalendar',
'classDay': 'day',
'classDaySelected': 'selectedDay',
'monthLst': ,
'dayLst': ,
'hideOnClick': false,
'showOnLaunch': true
});

function FuncToday(date)
{
document.getElementById('datereserv2').value = date;
}
</script>
<!-- Fin Ajouts de scripts -->

#72

Par Patrice à 14h03 :

Bonjour JDRIKORE,

Pas facile à dire comme ça.
Si vous mettez une valeur par défaut, est-elle transmise correctement ?
Comment vous récupérez cette valeur ?
Il n'y aurait pas un autre champ qui porte le même nom dans le fichier ?

#73

Par JDRIKORE à 11h33 :

Bonjour Patrice,
1- Lorsque je mets une valeur par défaut, elle est transmise correctement
2- Je récupère par POST lors de la soumission du formulaire
3- Non, il n'y a pas un autre champs qui porte le même nom dans le fichier

#74

Par Patrice à 14h16 :

Vous avez un exemple en ligne, pour que je vois ?

#75

Par Marc à 16h46 :

Bonjour Patrice,
Dans le code suivant, je ne comprends pas pourquoi les quatre premières conditions de l'écouteur ne fonctionnent pas.var cal = new jsSimpleDatePickr();
//<!,
'dayLst': ,
'hideOnClick': true,
'showOnLaunch': false
});
//]]>

//<!,
'dayLst': ,
'hideOnClick': true,
'showOnLaunch': false
});
//]]>

const body = document.getElementsByTagName('body'),
calIn = document.getElementById('calendarIn'),
calOut = document.getElementById('calendarOut');

body.addEventListener('click', function(e) {
console.log(cal);
if (e.target.name !== 'entree') cal.CalHide('entree');
if (e.target.name !== 'sortie') cal.CalHide('sortie');
if (e.target.name !== 'entree') cal.CalHide('divId');
if (e.target.name !== 'sortie') cal.CalHide('divId');
if (e.target.name !== 'entree') cal.CalDoFromField('entree', 'hide');
if (e.target.name !== 'sortie') cal.CalDoFromField('sortie', 'hide');
//alert(e.target.name);
}, false );

P.S. Je n'ai pas trouvé de notice sur votre site. Ce serait bien d'avoir la liste des propriétés publiques et des fonctions. Après le travail initial, ce serait un gain de temps pour tous, notamment sur ce blog.

#76

Par Patrice à 17h27 :

Bonsoir Marc,

Ça ne fonctionne pas parce que ces fonctions attendant un identifiant :
me.CalHide = function(id){
}

Il s'agit de l'identifiant interne que vous ne connaissez pas forcément. C'est pour ça que j'avais ajouté la fonction CalDoFromField qui attend le nom du champ passé au constructeur.

Sinon sur la page du configurateur, dans l'historique, il y a la liste des paramètres d'initialisation mais pas les fonctions :
https://blog.niap3d.com/calendrier-javascript/

Je mettrais cette page à jour en fin d'année, d'ici là je vais prépare un autre petit code.

#77

Par Marc à 18h27 :

OK, merci

#78

Par Marc à 15h53 :

Bonjour,
Pour info, j'ai du modifier le css de default_blue.css pour éviter de prendre en compte certaines données héritées.
Peut-être pourriez-vous intégrer ces lignes directement de façon native dans votre code. C'est peut-être aussi vrai pour d'autres parties du css.
Voici mon code modifié:.jsCalendar th{
color: #8ba7bf;
font-size: 16px;
font-weight: normal;
text-align: center;
background-color:transparent; /* Ligne ajoutée */
border:none; /* Ligne ajoutée */
}

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer