Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3554 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Calendrier agenda.

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Calendrier agenda.

n°1959141
kod34
Posté le 20-01-2010 à 16:41:54  profilanswer
 

Bonjour,
 
je suis en train de creer une page perso sur laquellle j'aimerai integrer un calendrier agenda.  
 
Je m'explique: c'est un calendrier sur lequel certains jours (la case) seront grisé pour signaler un evenement ce jour précis.  
 
Le jour actuel sera signalé d'une autre couleur.
 
J'ai trouvé un script mais je n'arrive pas a le modifier.
 

Citation :

<HEAD>
 
<style type="text/css">
<!--
span.label {color:black;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
-->
</style>
 
<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
 
<!-- Begin
function maxDays(mm, yyyy){
var mDay;
 if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
  mDay = 30;
   }
   else{
    mDay = 31
    if(mm == 1){
      if (yyyy/4 - parseInt(yyyy/4) != 0){
       mDay = 28
      }
      else{
       mDay = 29
     }
  }
  }
return mDay;
}
function changeBg(id){
 if (eval(id).style.backgroundColor != "yellow" ){
  eval(id).style.backgroundColor = "yellow"
 }
 else{
  eval(id).style.backgroundColor = "#ffffff"
 }
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("Janvier","Fevrier","Mars","Avril","Mai","Juin","Jeuillet","Aout","Septembre","Octobre","Novembre","Decembre" )
var arrY = new Array()
 for (ii=0;ii<=4;ii++){
  arrY[ii] = yyyy - 2 + ii
 }
var arrD = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam" )
 
var text = ""
text = "<form name=calForm>"
text += "<table border=1>"
text += "<tr><td>"
text += "<table width=100%><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
 for (ii=0;ii<=11;ii++){
  if (ii==mm){
   text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
  }
  else{
   text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
  }
 }
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
 for (ii=0;ii<=4;ii++){
  if (ii==2){
   text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
  }
  else{
   text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
  }
 }
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table border=1>"
text += "<tr>"
 for (ii=0;ii<=6;ii++){
  text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
 }
text += "</tr>"
aa = 0
 for (kk=0;kk<=5;kk++){
  text += "<tr>"
  for (ii=0;ii<=6;ii++){
   text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
   aa += 1
  }
  text += "</tr>"
 }
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
 if (currM!=0){
  prevM = currM - 1
 }
 else{
  prevM = 11
 }
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
 if (day1 == 0){
  day1 = 7
 }
var arrN = new Array(41)
var aa
 for (ii=0;ii<day1;ii++){
  arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
 }
 aa = 1
 for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
  arrN[ii] = aa
  aa += 1
 }
 aa = 1
 for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
  arrN[ii] = aa
  aa += 1
 }
 for (ii=0;ii<=41;ii++){
  eval("sp"+ii).style.backgroundColor = "#FFFFFF"
 }
var dCount = 0
 for (ii=0;ii<=41;ii++){
  if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
   eval("sp"+ii).innerHTML = arrN[ii]
   eval("sp"+ii).className = "c3"
  }
  else{
   eval("sp"+ii).innerHTML = arrN[ii]
   if ((dCount==0)||(dCount==6)){
    eval("sp"+ii).className = "c2"
   }
   else{
    eval("sp"+ii).className = "c1"
   }
   if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
    eval("sp"+ii).style.backgroundColor="#90EE90"
   }
  }
 dCount += 1
  if (dCount>6){
   dCount=0
  }
 }
}
//  End -->
</script>
 
</HEAD>
 
<!-- ETAPE 2:INSEREZ LE CODE 2 ENTRE LES BALISES <BODY>..</BODY>  -->
 
<BODY>
 
<script type="text/javascript">writeCalendar()</script>
 
 
<!-- Script Size:  5.15 KB -->
 


 
voila ce que ca donne.
 
http://nsm02.casimages.com/img/2010/01/20//100120041428574735282183.png
 
Hors, je voudrais modifier les points suivant:
 
     - Le dimanche sera le dernier jour de la semaine et non pas le premier. il sera en rouge.
     - Le samedi sera en orange.  
     - La case du jour actuel reste tel qu'elle est, en vert ou alors le carré vert sera un peu plus petit pour bien le differencier.
     - La date d'un evenement (prenont par exemple le 29 janvier) sera grisé pour signaler cette evenement.
 
Mais je ne souhaite pas qu'on puisse le modifier en ligne. Je le modifirai moi même a chaque mise a jour du site.
 
Au final, j'aimerai arriver a ceci.
 
http://nsm02.casimages.com/img/2010/01/20//100120043903574735282535.png  
 
Pouvez vou m'aider svp???


Message édité par kod34 le 20-01-2010 à 16:48:06
mood
Publicité
Posté le 20-01-2010 à 16:41:54  profilanswer
 

n°1959175
pataluc
Posté le 20-01-2010 à 17:07:50  profilanswer
 

perso je te conseille de ne pas réinventer la roue et de te baser sur des trucs tout faits genre jquery ui calendar.

 

avec qques lignes de codes, genre ca:

Code :
  1. <html>
  2.   <head>
  3.    <title></title>
  4.     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  5.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  6.  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  7.   </head>
  9.   <body id="demos">
  10.    <script type="text/javascript">
  11.    $(function() {
  12.     $("#datepicker" ).datepicker({
  13.         beforeShowDay: function(date){
  14.           var b = (date.getDay() < 5);
  15.           var c = b ? "": "ui-state-disabled";
  16.           return [b, c];
  17.         }
  18.       });
  19.    });
  20.    </script>
  21.  
  22.  
  23.  
  24.     <input type="text" id="datepicker"></p>
  25.   </body>
  26. </html>
 

tu peux faire des trucs bien très rapidement (en l'occurence dans cet exemple je grise les samedi et les dimanches).

 

cherche sur glouglou avec les mots clés jquery+ui+calendar et particulièrement la méthode beforeShowDay qui va te permettre de dire en fonction d'une date comment elle devra être affichée (en renvoyant false ou true pour rendre cliquable ou non, et une classe css pour définir l'affichage)

 

++


Message édité par pataluc le 20-01-2010 à 17:08:33
n°1969140
webmastom
Posté le 25-02-2010 à 10:23:58  profilanswer
 

Bonjour,
Avez-vous réussi ?  
Je souhaiterai faire la même chose.
Changer l'aspect comme la couleur des W-E, etc. ne me semble pas impossible à trouver.  
Par contre je n'ai aucune idée du code à insérer pour intégrer un évènement.
J'imagine que ça doit avoir l'air dans la dernière section de qch du genre :
   if ("la date de l'évènement" )
    eval("sp"+ii).style.backgroundColor="couleur évènement"  
   }  
 
Il faudra également changer la section :
text += "</tr>"  
aa = 0  
 for (kk=0;kk<=5;kk++){  
  text += "<tr>"  
  for (ii=0;ii<=6;ii++){  
   text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)[/#ff0000]'>1</span></td>"  
   aa += 1  
  }  
afin d'appeler le texte de l'évènement.
 
Comment faire ???
Ca fait un moment que je cherche en vain un calendrier avec évènements sans PHP (non-modifiable en ligne, comme kod je souhaite le modifier moi même).  
Ca doit bien éxister.
HELP au pro !
 
Pataluc, ton code n'est absolument pas modifiable, comment intègres tu un évènement?
(En plus ton calendrier est en anglais ...)
 
Merci pour votre aide.

n°1969146
pataluc
Posté le 25-02-2010 à 10:55:55  profilanswer
 

comment ca, "pas modifiable"?
pour ajouter un évènement, tu crée une nouvelle classe css et tu l'affecte à une date dans le beforeShowDay...

 

EDIT: ca peut donner ca, avec un évenement le 22/02:

Code :
  1. <html>
  2.   <head>
  3.    <title></title>
  4.     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  7.     <style type="text/css">
  8.     <!--
  9.       .ui-event .ui-state-default{
  10.         color: green;
  11.       }   
  12.     //-->
  13.     </style>
  14.   </head>
  15.   <body id="demos">
  16.    <script type="text/javascript">
  17.    $(function() {
  18.     $("#datepicker" ).datepicker({
  19.         beforeShowDay: function(date){
  20.           var b = (date.getDay() < 5);
  21.           var c = "";
  22.           if (!b) {
  23.             c = "ui-state-disabled";
  24.           }
  25.          
  26.           d = new Date(2010, 1, 22)
  28.           if ((date >= d) && (date <= d)) {
  29.             c = "ui-event";
  30.           }
  31.          
  32.          
  33.          
  34.           return [b, c];
  35.         }
  36.       });
  37.    });
  38.    </script>
  42.     <input type="text" id="datepicker"></p>
  43.   </body>
  44. </html>
 


pour la langue, voir du coté de http://jqueryui.com/demos/datepicker/#localization

 


Message édité par pataluc le 25-02-2010 à 11:21:24
n°1969521
GordonF_69
Posté le 26-02-2010 à 02:25:40  profilanswer
 

Une fois j'en avais modifié un d'une source pour faire qqc de pas trop mal :
 
Tu peux le pomper ici : http://seb1k.free.fr/FTP/calendrierJS.html
 
Tout est en 1 seul fichier html (CSS, JS), apres tu lis la source et tu l'adapte :)


Message édité par GordonF_69 le 26-02-2010 à 02:27:08
n°1971971
webmastom
Posté le 08-03-2010 à 14:50:26  profilanswer
 

pataluc,  
ton code à l'air simple et efficace effectivement. De plus les skins sont vraiment sympas. J'ai été voir sur leur site mais hélàs tout est en anglais ! :-(
Alors peux-tu encore une fois éclairer ma lanterne stp.
- est-il possible d'avoir un affichage permanent du calendrier,
- je n'arrive toujours pas à programmer une autre date, peux tu intégrer dans ton exemple une deuxième date,
- est-il possible d'associer du texte, (image, etc...) à chaque évènement qui apparaitrai "onclick" sur une date évènement ?
J'espère avoir était clair.
Merci d'avance.
Webmastom

Message cité 1 fois
n°1971995
pataluc
Posté le 08-03-2010 à 16:08:20  profilanswer
 

webmastom a écrit :

pataluc,
ton code à l'air simple et efficace effectivement. De plus les skins sont vraiment sympas. J'ai été voir sur leur site mais hélàs tout est en anglais ! :-(
Alors peux-tu encore une fois éclairer ma lanterne stp.
- est-il possible d'avoir un affichage permanent du calendrier,
- je n'arrive toujours pas à programmer une autre date, peux tu intégrer dans ton exemple une deuxième date,
- est-il possible d'associer du texte, (image, etc...) à chaque évènement qui apparaitrai "onclick" sur une date évènement ?
J'espère avoir était clair.
Merci d'avance.
Webmastom


quand tu dis "affichage permanent", en fait tu veux afficher un calendrier sur ta page et pas qu'il serve à une saisie de date? ce n'est pas le but de ce composant mais faut voir si c'est faisable...

 

pour intégrer une seconde date, de manière assez crade on pourrait mettre:

Code :
  1. d = new Date(<<annee>>, <<mois>>, <<jour>> )
  3. if ((date >= d) && (date <= d)) {
  4.   c = "ui-event";
  5. }


juste après la ligne 30.

 

je suis pas sur de saisir ton 3eme point... peux-tu expliquer ton problème de manière plus globale (quel est le but de ce calendrier) parce que du coup avec ce que tu dis j'ai l'impression qu'on ne va pas forcément dans la bonne direction...


Message édité par pataluc le 08-03-2010 à 16:09:31
n°1972177
webmastom
Posté le 09-03-2010 à 11:21:35  profilanswer
 

oui. par affichage permanent, j'entend effectivement sans saisie de date. En fait je voudrai un calendrier évènementiel.
J'aimerai pour mon site de plongée, (www.gcobplongee.com), avoir un calendrier que je mettrai moi même à jour régulièrement qui afficherai les dates avec des évènements comme dans ta démo. Mais il faudrait pouvoir rajouter le descriptif de l'évènement... Actuellement, avec ce codage un évènement est juste une date mise en valeur par une couleur. Il faudrait en plus que je puisse y associer du texte. Pour que ce soit plus clair voici un vulgaire ex:
http://grenet.thomas.free.fr/pages/essai.htm
Ce genre de code éxiste de mille façon mais en PHP ! Je cherche depuis des mois l'équivalent pour un evironnement statique et sans que personne ait la main dessus à part moi via le code source.
Est-ce possible ?
Peux-tu m'aider ?

Message cité 1 fois
n°1972281
pataluc
Posté le 09-03-2010 à 15:08:12  profilanswer
 

pourquoi ne veux tu pas de php? je suis sur que tu dois avoir des trucs très bien faits en php...
 
sinon en javascript on doit pouvoir arriver à la même chose, mais peut être pas avec la même base...

n°1972285
kao98
...
Posté le 09-03-2010 à 15:18:32  profilanswer
 

webmastom a écrit :

oui. par affichage permanent, j'entend effectivement sans saisie de date. En fait je voudrai un calendrier évènementiel.
J'aimerai pour mon site de plongée, (www.gcobplongee.com), avoir un calendrier que je mettrai moi même à jour régulièrement qui afficherai les dates avec des évènements comme dans ta démo. Mais il faudrait pouvoir rajouter le descriptif de l'évènement... Actuellement, avec ce codage un évènement est juste une date mise en valeur par une couleur. Il faudrait en plus que je puisse y associer du texte. Pour que ce soit plus clair voici un vulgaire ex:
http://grenet.thomas.free.fr/pages/essai.htm
Ce genre de code éxiste de mille façon mais en PHP ! Je cherche depuis des mois l'équivalent pour un evironnement statique et sans que personne ait la main dessus à part moi via le code source.
Est-ce possible ?
Peux-tu m'aider ?


L'exemple du lien, il n'est pas en php, mais en js.
J'ai lu et relu tes messages, mais je vois pas vraiment ce que tu veux. Tu veux quelque chose comme sur HFR (http://www.hardware.fr/news/lire/08-03-2010/) ? Ou plutôt comme dans le lien que tu as posté ?


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
mood
Publicité
Posté le 09-03-2010 à 15:18:32  profilanswer
 

n°1972317
webmastom
Posté le 09-03-2010 à 16:20:54  profilanswer
 

kao98 : oui comme sur HFR mais avec une naviguation permettant de se projeter les mois à venir et à part que dans cet exemple chaque date à l'air d'appeller une nouvelle page :-( ... pas super.
pataluc : je ne souhaite pas du php car je n'y connait absolument rien. De tuote façon, la seule chose que je pense avoir compris c'est que le php pour fonctionner nécessite un hébergement dynamique non ? Or, je suis en statique.

Citation :

sinon en javascript on doit pouvoir arriver à la même chose, mais peut être pas avec la même base...


Où ça ? Là est ma question ^^.

Message cité 1 fois
Message édité par webmastom le 09-03-2010 à 16:26:11
n°1972325
pataluc
Posté le 09-03-2010 à 16:35:43  profilanswer
 

webmastom a écrit :

pataluc : je ne souhaite pas du php car je n'y connait absolument rien. De tuote façon, la seule chose que je pense avoir compris c'est que le php pour fonctionner nécessite un hébergement dynamique non ? Or, je suis en statique.

tu as l'air d'être chez free... donc tu as php par défaut... m'enfin c'est ton choix.
 
regarde de ce coté: http://arshaw.com/fullcalendar/ cela semble être ce que tu cherches.

Message cité 1 fois
n°1972331
webmastom
Posté le 09-03-2010 à 16:39:44  profilanswer
 

pataluc a écrit :

tu as l'air d'être chez free... donc tu as php par défaut... m'enfin c'est ton choix.
 
regarde de ce coté: http://arshaw.com/fullcalendar/ cela semble être ce que tu cherches.


Oui chez free pour mon site perso OK; mais là c'est pour le site de mon association sportive ^^ www.gcobplongee.com.
Merci beaucoup pour ton aide et pour le lien je vais chercher de ce côté alors.

n°1972339
webmastom
Posté le 09-03-2010 à 16:54:21  profilanswer
 

SUPER merci mille fois pour ton lien, c'est parfait !
Je n'ai plus qu'à le mettre à ma sauce.
Encore merci pour l'aide.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Calendrier agenda.

 

Sujets relatifs
[Outlook 2003] formulaire => affichage d'un calendrier pour champ datescript calendrier multiutilisateur
[PHP] Quel CMS avec module de calendrier utiliser ?Syncronisatoin calendrier outlook VBA
Utilisation de Google Agenda dans application Web[PHP/JAVA] Calendrier avec menu avec choix booléen sur chaque jour
[JS] recherche calendrier javascript style thunderbirdScript calendrier/annonce d'évenements
[C#] Calendrier journalier / Agenda[PHP] Agenda - Calendrier online
Plus de sujets relatifs à : Calendrier agenda.

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.073 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)