Calendrier perpetuel

Soyez le premier à donner votre avis sur cette source.

Vue 43 121 fois - Téléchargée 3 163 fois

Description

La création de fait en dynamique, rien de tres surprenant.
Vous pouvez modifier facilement son aspect avec les
feuilles de style.

Conclusion :


Nouvelle version du calendrier:

http://www.javascriptfr.com/article.aspx?Val=629

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
samedi 11 août 2007
Statut
Membre
Dernière intervention
5 septembre 2007

tres bon script tu es vraiment doué .
J'utilise ce script pour afficher des evenements corespondan a une date choisie donc au lieu de l'afficher avec un alert je recupere dans une variable ke je passe en parametre a une fonction ki va l'envoyer a un ficher php pour exécuter une requete le resultat de la requete sera ensuite affiché dans un tableau (avec ajax). Mai sa na march pa bien est ce que kelkun pourrai maider . merci d'avance le code est le suivant j'ai ajouté les 3 dernieres fonction (apres la fonction init)

fichier avec code javascript





<HTML>
<HEAD>
<TITLE>Calendrier</TITLE>
</HEAD>
<STYLE>
.tbCal{position: absolute; top: 50; left: 20; border: 1px solid black}
.DayName {font: 12px Arial; text-align: center; cursor: default;}
.BtChangeDate {FONT: 12px Arial; WIDTH: 8px; FONT-WEIGHT: bold; cursor: hand; text-align: center;}
.LbChangeDate {font: 12px Arial; WIDTH: 60px; cursor: hand; text-align: center;}

.DayOff {BORDER: 1px solid gray; cursor: default;}
.DayOn {BORDER: 1px solid black; cursor: hand; FONT: 12px Arial; COLOR: black; TEXT-ALIGN: center}
.DayWorking {BACKGROUND: #D9FECE}
.DayNotWorking {BACKGROUND: #EEEEEE}
.DayOver {BACKGROUND: #FFFFCC}
.DayStart {BACKGROUND: #66CCCC}

.MonthList {BORDER: 1px solid black; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 100px; POSITION: absolute;}
.CellMonthList {BORDER: none; CURSOR: hand; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px;}
.CellMonthListOver {BACKGROUND: #FF0000}
</STYLE>
<SCRIPT>
// date au format "JJ/MM/YYYY" obligatoirement
var sStartDate = ""
var aDayNames = new Array("","Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di")
var aMonthName = new Array("","Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")
var BaseWeekWork = new Array(0,1,1,1,1,1,0,0) // journée de la semaine , travaillée: (1/0)
var CurrentDay = 0
var CurrentMonth = 0
var CurrentYear = 0
</SCRIPT>


<TABLE WIDTH=100%>

----, <</TD>
,
>,
,
<,
année,

>


</TD>
</TR>
<TR>
<TD ID=DayName1 NAME=DayName1 CLASS="DayName"></TD><TD ID=DayName2 NAME=DayName2 CLASS="DayName"></TD>
<TD ID=DayName3 NAME=DayName3 CLASS="DayName"></TD><TD ID=DayName4 NAME=DayName4 CLASS="DayName"></TD>

<TD ID=DayName5 NAME=DayName5 CLASS="DayName"></TD><TD ID=DayName6 NAME=DayName6 CLASS="DayName"></TD><TD ID=DayName7 NAME=DayName7 CLASS="DayName"></TD>
</TR>
<TR><TD ID=S1J1 NAME=S1J1></TD><TD ID=S1J2 NAME=S1J2></TD><TD ID=S1J3 NAME=S1J3></TD><TD ID=S1J4 NAME=S1J4></TD><TD ID=S1J5 NAME=S1J5></TD><TD ID=S1J6 NAME=S1J6></TD><TD ID=S1J7 NAME=S1J7></TD></TR>
<TR><TD ID=S2J1 NAME=S2J1></TD><TD ID=S2J2 NAME=S2J2></TD><TD ID=S2J3 NAME=S2J3></TD><TD ID=S2J4 NAME=S2J4></TD><TD ID=S2J5 NAME=S2J5></TD><TD ID=S2J6 NAME=S2J6></TD><TD ID=S2J7 NAME=S2J7></TD></TR>
<TR><TD ID=S3J1 NAME=S3J1></TD><TD ID=S3J2 NAME=S3J2></TD><TD ID=S3J3 NAME=S3J3></TD><TD ID=S3J4 NAME=S3J4></TD><TD ID=S3J5 NAME=S3J5></TD><TD ID=S3J6 NAME=S3J6></TD><TD ID=S3J7 NAME=S3J7></TD></TR>
<TR><TD ID=S4J1 NAME=S4J1></TD><TD ID=S4J2 NAME=S4J2></TD><TD ID=S4J3 NAME=S4J3></TD><TD ID=S4J4 NAME=S4J4></TD><TD ID=S4J5 NAME=S4J5></TD><TD ID=S4J6 NAME=S4J6></TD><TD ID=S4J7 NAME=S4J7></TD></TR>
<TR><TD ID=S5J1 NAME=S5J1></TD><TD ID=S5J2 NAME=S5J2></TD><TD ID=S5J3 NAME=S5J3></TD><TD ID=S5J4 NAME=S5J4></TD><TD ID=S5J5 NAME=S5J5></TD><TD ID=S5J6 NAME=S5J6></TD><TD ID=S5J7 NAME=S5J7></TD></TR>
<TR><TD ID=S6J1 NAME=S6J1></TD><TD ID=S6J2 NAME=S6J2></TD><TD ID=S6J3 NAME=S6J3></TD><TD ID=S6J4 NAME=S6J4></TD><TD ID=S6J5 NAME=S6J5></TD><TD ID=S6J6 NAME=S6J6></TD><TD ID=S6J7 NAME=S6J7></TD></TR>
</TABLE>








<SCRIPT>
var isdoing = false
function ShowMonthList(){
MonthList.top = 0
MonthList.style.display = 'block'
}
// Changement d'année (+1,-1)
function ChangeCurrentYear(value){
if (isdoing == false){
var nb = CurrentYear*1
CurrentYear = nb+value
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
// Changement de mois (+1,-1)
function ChangeDate(Type, Value){
if (Type "m"){CurrentMonth Value}
if (isdoing == false){
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
MonthList.style.display = 'none'
isdoing = false}
}
// Changement de mois
function ChangeCurrentMonth(value){
if (isdoing == false){
CurrentMonth = CurrentMonth + value
if(CurrentMonth == 13){CurrentMonth=1; CurrentYear++;}
if(CurrentMonth == 0){CurrentMonth=12; CurrentYear--;}
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
function GetDateString(d,m,y){
if (d <9){d "0" + d}
if (m <9){m "0" + m}
return(d + "/" + m + "/" + y)
}
function WriteDayNames(){
for (i=1; i<=7; i++){
var td = document.all("DayName" + i )
td.innerText = aDayNames[i]
}
}
function WriteMonhCells(){
for (i=1; i<=12; i++){
document.all("M" + i ).innerHTML = "" + aMonthName[i] + ""
}
}
// Travaillé/Chomé
function GetDayType(J,M,A){
var cDate = new Date(A,M,J)
var DayNb = cDate.getDay()
if (DayNb 0) {DayNb 7}
var Result = BaseWeekWork[DayNb]
return Result
}
function WriteDateCells(StringDate){
var cDay = StringDate.substring(0,2)
var cMonth = StringDate.substring(3,5)-1
var cYear = StringDate.substring(6,10)
CurrentDay = cDay
CurrentMonth = cMonth+1
CurrentYear = cYear
MonthNAme.innerText = aMonthName[cMonth+1]
YearValue.innerText = cYear
var BeginDate = new Date(cYear,cMonth,1)
var MaxDay = 1
// Dernier jour du mois:
for (j=27;j<33;j++){
var cDate = new Date(cYear,cMonth,j)
if (cDate.getDate() 1){MaxDay j-1}
}
var EndDate = new Date(cYear,cMonth,MaxDay)
var cWeek = 1
ClearCells()
// Remplissage des cellules:
for (d=1; d<=MaxDay; d++){
var cDate = new Date(cYear ,cMonth, d)
var DayNb = cDate.getDay()
if (DayNb 0) {DayNb 7} // J de la semaine de 1 a 7
var Cell = document.all("S" + cWeek + "J" + DayNb)
var OrigClass = ""
// Type de jour: Travaillé/Chomé/Date de départ
if(GetDayType(d,cMonth,cYear)==1)
{OrigClass='DayWorking'}
else
{OrigClass='DayNotWorking'}
if(GetDateString(d,(cMonth+1),cYear) == sStartDate) {OrigClass='DayStart'}
Cell.className = 'DayOn ' + OrigClass
Cell.innerHTML = "" + d + ""
if (DayNb == 7) {cWeek++} // Changement de semaine
}
}
// Effacement de toutes les cellules
function ClearCells(){
for (s=1;s<=6;s++){
for(j=1;j<=7;j++){
document.all("S" + s + "J" + j).innerHTML = ""
document.all("S" + s + "J" + j).className = ""
}
}
}


// Initialisation
function init(){
sStartDate = "04/09/2007"// Date de depart
WriteDayNames() // ecrits les noms de jour
WriteMonhCells()// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendarier
}
// creation de l'objet xmlhttprequest
function getXhr()
{
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}


// fonction appelée quand on clik sur une date
function remplir(x)
{
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState 4 && xhr.status 200)
{
//alert(x);
Reponse(xhr);
}
}
xhr.open("POST","AfficheEvent.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//xhr.send("donnee="+GetDateString(d,(cMonth+1),cYear));
// envoi de la date choisie au serveur
xhr.send(x);
}


// fonction permettant de recuperer des elements de la base de données corespondan a la data choisie et de les metrre dans un tableau
function Reponse(xhr)
{
var docXML= xhr.responseXML;
var items = docXML.getElementsByTagName("ev");

//on fait juste une boucle sur chaque element "donnee" trouvé

for (i=0;i

events |


</HTML>











fichier php pour executer la requete




<?php

header('Content-Type: text/xml');
echo "<?xml version ="1.0"?>\n";
echo "<exemple>\n";

$host = "localhost"; // voir hébergeur
$user = "root"; // vide ou root en local
$pass = ""; // vide en local
$bdd = "AnnuaireEdf"; // nom de la BD
// connexion
@mysql_connect($host,$user,$pass)
or die("Impossible de se connecter");
@mysql_select_db("$bdd")
or die("Impossible de se connecter");

function transformer($date)
{
$tabdate=explode('/',$date);
$jour=$tabdate[0];
$mois=$tabdate[1];
$an=$tabdate[2];
return($an."-".$mois."-".$jour);
}

$valevent=$_POST['x'];
$event=transformer($valevent);


$requete="SELECT Texte FROM Evenement where Date='".$event."' ";

$resultat = mysql_query($requete) or die('Erreur SQL !
'.$req.'
'.mysql_error());
while ($infos = mysql_fetch_row($resultat))
{
echo"<ev> ".$infos[0]."</ev>";
}

echo "</exemple>\n";
?>
Messages postés
1
Date d'inscription
lundi 7 février 2005
Statut
Membre
Dernière intervention
5 juin 2006

je c pas pour coi ca marche pas la date change pas pouvez vous m aider svp

<HTML>
<HEAD>
<TITLE>Calendrier</TITLE>
</HEAD>
<STYLE>
.tbCal{position: absolute; top: 00; left: 00; border: 1px solid black}
.DayName {font: 12px Arial; text-align: center; cursor: default;}
.BtChangeDate {FONT: 12px Arial; WIDTH: 8px; FONT-WEIGHT: bold; cursor: hand; text-align: center;}
.LbChangeDate {font: 12px Arial; WIDTH: 60px; cursor: hand; text-align: center;}

.DayOff {BORDER: 1px solid gray; cursor: default;}
.DayOn {BORDER: 1px solid black; cursor: hand; FONT: 12px Arial; COLOR: black; TEXT-ALIGN: center}
.DayWorking {BACKGROUND: #D9FECE}
.DayNotWorking {BACKGROUND: #EEEEEE}
.DayOver {BACKGROUND: #FFFFCC}
.DayStart {BACKGROUND: #66CCCC}

.MonthList {BORDER: 1px solid black; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 100px; POSITION: absolute;}
.CellMonthList {BORDER: none; CURSOR: hand; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px;}
.CellMonthListOver {BACKGROUND: #FF0000}
</STYLE>
<SCRIPT>
// date au format "JJ/MM/YYYY" obligatoirement
var sStartDate = "04/06/2006"
var aDayNames = new Array("di","Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di")
var aMonthName = new Array("Juin","Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")
var BaseWeekWork = new Array(0,1,1,1,1,1,0,0) // journée de la semaine , travaillée: (1/0)
var CurrentDay = 0
var CurrentMonth = 0
var CurrentYear = 0
</SCRIPT>



<TABLE WIDTH=100%>
----

, <</TD>
,
>,
,
<,
année,
>


</TD>
</TR>
<TR>
<TD ID=DayName1 NAME=DayName1 CLASS="DayName"></TD><TD ID=DayName2 NAME=DayName2 CLASS="DayName"></TD>
<TD ID=DayName3 NAME=DayName3 CLASS="DayName"></TD><TD ID=DayName4 NAME=DayName4 CLASS="DayName"></TD>
<TD ID=DayName5 NAME=DayName5 CLASS="DayName"></TD><TD ID=DayName6 NAME=DayName6 CLASS="DayName"></TD><TD ID=DayName7 NAME=DayName7 CLASS="DayName"></TD>
</TR>
<TR><TD ID=S1J1 NAME=S1J1></TD><TD ID=S1J2 NAME=S1J2></TD><TD ID=S1J3 NAME=S1J3></TD><TD ID=S1J4 NAME=S1J4></TD><TD ID=S1J5 NAME=S1J5></TD><TD ID=S1J6 NAME=S1J6></TD><TD ID=S1J7 NAME=S1J7></TD></TR>
<TR><TD ID=S2J1 NAME=S2J1></TD><TD ID=S2J2 NAME=S2J2></TD><TD ID=S2J3 NAME=S2J3></TD><TD ID=S2J4 NAME=S2J4></TD><TD ID=S2J5 NAME=S2J5></TD><TD ID=S2J6 NAME=S2J6></TD><TD ID=S2J7 NAME=S2J7></TD></TR>
<TR><TD ID=S3J1 NAME=S3J1></TD><TD ID=S3J2 NAME=S3J2></TD><TD ID=S3J3 NAME=S3J3></TD><TD ID=S3J4 NAME=S3J4></TD><TD ID=S3J5 NAME=S3J5></TD><TD ID=S3J6 NAME=S3J6></TD><TD ID=S3J7 NAME=S3J7></TD></TR>
<TR><TD ID=S4J1 NAME=S4J1></TD><TD ID=S4J2 NAME=S4J2></TD><TD ID=S4J3 NAME=S4J3></TD><TD ID=S4J4 NAME=S4J4></TD><TD ID=S4J5 NAME=S4J5></TD><TD ID=S4J6 NAME=S4J6></TD><TD ID=S4J7 NAME=S4J7></TD></TR>
<TR><TD ID=S5J1 NAME=S5J1></TD><TD ID=S5J2 NAME=S5J2></TD><TD ID=S5J3 NAME=S5J3></TD><TD ID=S5J4 NAME=S5J4></TD><TD ID=S5J5 NAME=S5J5></TD><TD ID=S5J6 NAME=S5J6></TD><TD ID=S5J7 NAME=S5J7></TD></TR>
<TR><TD ID=S6J1 NAME=S6J1></TD><TD ID=S6J2 NAME=S6J2></TD><TD ID=S6J3 NAME=S6J3></TD><TD ID=S6J4 NAME=S6J4></TD><TD ID=S6J5 NAME=S6J5></TD><TD ID=S6J6 NAME=S6J6></TD><TD ID=S6J7 NAME=S6J7></TD></TR>
</TABLE>









<SCRIPT>
var isdoing = false
function ShowMonthList(){
MonthList.top = 0
MonthList.style.display = 'block'
}
// Changement d'année (+1,-1)
function ChangeCurrentYear(value){
if (isdoing == false){
var nb = CurrentYear*1
CurrentYear = nb+value
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
// Changement de mois (+1,-1)
function ChangeDate(Type, Value){
if (Type "m"){CurrentMonth Value}
if (isdoing == false){
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
MonthList.style.display = 'none'
isdoing = false}
}
// Changement de mois
function ChangeCurrentMonth(value){
if (isdoing == false){
CurrentMonth = CurrentMonth + value
if(CurrentMonth == 13){CurrentMonth=1; CurrentYear++;}
if(CurrentMonth == 0){CurrentMonth=12; CurrentYear--;}
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
function GetDateString(d,m,y){
if (d <9){d "0" + d}
if (m <9){m "0" + m}
return(d + "/" + m + "/" + y)
}
function WriteDayNames(){
for (i=1; i<=7; i++){
var td = document.all("DayName" + i )
td.innerText = aDayNames[i]
}
}
function WriteMonhCells(){
for (i=1; i<=12; i++){
document.all("M" + i ).innerHTML = "" + aMonthName[i] + ""
}
}
// Travaillé/Chomé
function GetDayType(J,M,A){
var cDate = new Date(A,M,J)
var DayNb = cDate.getDay()
if (DayNb 0) {DayNb 7}
var Result = BaseWeekWork[DayNb]
return Result
}
function WriteDateCells(StringDate){
var cDay = StringDate.substring(0,2)
var cMonth = StringDate.substring(3,5)-1
var cYear = StringDate.substring(6,10)
CurrentDay = cDay
CurrentMonth = cMonth+1
CurrentYear = cYear
MonthNAme.innerText = aMonthName[cMonth+1]
YearValue.innerText = cYear
var BeginDate = new Date(cYear,cMonth,1)
var MaxDay = 1
// Dernier jour du mois:
for (j=27;j<33;j++){
var cDate = new Date(cYear,cMonth,j)
if (cDate.getDate() 1){MaxDay j-1}
}
var EndDate = new Date(cYear,cMonth,MaxDay)
var cWeek = 1
ClearCells()
// Remplissage des cellules:
for (d=1; d<=MaxDay; d++){
var cDate = new Date(cYear ,cMonth, d)
var DayNb = cDate.getDay()
if (DayNb 0) {DayNb 7} // J de la semaine de 1 a 7
var Cell = document.all("S" + cWeek + "J" + DayNb)
var OrigClass = ""
// Type de jour: Travaillé/Chomé/Date de départ
if(GetDayType(d,cMonth,cYear)==1)
{OrigClass='DayWorking'}
else
{OrigClass='DayNotWorking'}
if(GetDateString(d,(cMonth+1),cYear) == sStartDate) {OrigClass='DayStart'}
Cell.className = 'DayOn ' + OrigClass
Cell.innerHTML = "" + d + ""
if (DayNb == 7) {cWeek++} // Changement de semaine
}
}
// Effacement de toutes les cellules
function ClearCells(){
for (s=1;s<=6;s++){
for(j=1;j<=7;j++){
document.all("S" + s + "J" + j).innerHTML = ""
document.all("S" + s + "J" + j).className = ""
}
}
}
// Initialisation
function init(){
sStartDate = "04/06/2006"// Date de depart
WriteDayNames("Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di") // ecrits les noms de jour
WriteMonhCells("Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendarier
}
</SCRIPT>

</HTML>
Messages postés
84
Date d'inscription
lundi 31 mars 2003
Statut
Membre
Dernière intervention
1 juillet 2006

Bonjour,

Je débute en Javascript et j'aurais besoin de ton aide. Peux-tu m'expliquer quelques trucs s'il te plait? Dans cette fonction :

// Changement de mois (+1,-1)
function ChangeDate(Type, Value){

- Que représente l'argument Type? il est de quel type?
- Que représente la variable isdoing? Quelle est son utilité?

Sinon félicitation pour ce script, le code est bien organisé, il fonctionne bien et le résultat est propre et assez esthétique.

Au revoir
Messages postés
311
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
26 juin 2015

Hi !!
J'ai pas dû poster au bon endroit : (très chouette ce calendar)
J'ai ajouté le code ci-dessus mais comme je suis aussi doué qu'un canard en matière de JS, je ne vois pas pourquoi les années ne changent pas quand je clique dessus.
Comment enlever le code qui fait apparaître la boîte d'alerte avec juste la date dedant ?
Merci d'aider l'handicapé du code.
<|[;o))
METIS metis15@wanadoo.fr
Messages postés
4
Date d'inscription
vendredi 7 mars 2003
Statut
Membre
Dernière intervention
3 mai 2004

Rajouter les modifications suivantes dans la fonction
// Initialisation
function init(){

// Rajout : Mise en mémoire de la date du jour pour l'afficher au calendrier
Jour = new Date();
dayjour = Jour.getDate();
if (10 > dayjour)
{dayjour = '0'+dayjour;}
moisjour = Jour.getMonth();
moisjour = moisjour + 1;
if (10 > moisjour)
{moisjour = '0'+moisjour;}
yearjour = Jour.getYear();

// sStartDate "05/06/2003"// Date de depart> substitué par la ligne suivante
sStartDate = dayjour +'/'+ moisjour +'/'+ yearjour

WriteDayNames() // ecrits les noms de jour
WriteMonhCells()// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendrier
}

le calendrier affichera automatiquement la date du jour. Ce qui sera nettement mieux qu'une date figée. lol
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.