Calendrier JavaScript pour site web

Hilary · 19/01/2011, 20h08

Bonjour!

J’essaie de faire fonctionner ce calendrier JavaScript sur mon site et je n’y arrive pas.

Doit-il être exécuté en PHP seulement?

Voici le lien : http//www.calendarview.org

Exemple : Embedded Calendar

Merci de votre aide!

Hilary

Vil'Coyote · 19/01/2011, 20h49

non pas de php c'est du javascript mais il te faut en plus de ton script de calendrier la bibliothèque prototype.

Hilary · 19/01/2011, 21h11

Citation:

Envoyé par Vil'Coyote

non pas de php c'est du javascript mais il te faut en plus de ton script de calendrier la bibliothèque prototype.

Re-bonjour!

Voilà le code que j'ai mis et le calendrier ne s'affiche pas. C'est ma première expérience avec un calendrier JavaScript et je ne sais pas trop comment m'y prendre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CalendarView — JavaScript Calendar Widget</title>
<link href="../tobin/calendarview-1.2/stylesheets/calendarview.css" rel="stylesheet" type="text/css" />
<style>
body {
	font-family: Trebuchet MS;
	}
	div.calendar { 
	 max-width: 240px;
	 margin-left: auto; 
	 margin-right: auto; 
	 }
	  div.calendar table { 
	 width: 100%;
	 }
	 div.dateField { 
	 width: 140px; 
	 padding: 6px;  
	 -webkit-border-radius: 6px; 
	  -moz-border-radius: 6px;   
	  color: #555;  
	  background-color: white;
	  margin-left: auto; 
	  margin-right: auto;  
	  text-align: center; 
	  }
	  div#popupDateField:hover { 
	  background-color: #cde; 
	  cursor: pointer;  
	  }
	  </style>
      <script src="../javascripts/prototype.js"></script> 
      <script src="../javascripts/calendarview.js"></script>
      <script>
	  function setupCalendars() { 
	  // Embedded Calendar 
	   Calendar.setup( 
	   {   
	   dateField: 'embeddedDateField', 
	   parentElement: 'embeddedCalendar' 
	    } 
	   )
	  
      window.onload = function() {
        Calendar.setup({
          dateField     : 'date',
          parentElement : 'calendar'
        })
      }
    

	   // Popup Calendar
	    Calendar.setup(     
		{   
		dateField: 'popupDateField',    
		triggerElement: 'popupDateField' 
		         }   
				      )  
					      }
		Event.observe(window, 'load', function() { setupCalendars() })
		</script>				  
</head>

<body>


<div style="float: left; width: 50%">
<div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-right: 10px"> 
<h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px">Embedded Calendar </h3>
<div id="embeddedExample" style="">
<div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
 </div> 
 <br />
 <div id="embeddedDateField" class="dateField">
  Select Date
  </div> 
  <br />
    </div>
   </div>
  </div>
  <div style="float: right; width: 50%">
  <div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius:  12px; -moz-border-radius: 12px; margin-left: 10px"> 
  <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px"> 
 Popup Calendar  
 </h3>
 <div id="popupExample">
  <div id="popupDateField" class="dateField" style="margin-top: 160px">
   Show Calendar
   </div>        </div>      </div>    </div>
</body>
</html>

20/01/2011, 10h25

Citation:

Envoyé par calendarview.org

CalendarView requires Prototype 1.6.0 (or later).

Citation:

Envoyé par Vil'Coyote

non pas de php c'est du javascript mais il te faut en plus de ton script de calendrier la bibliothèque prototype.

Il est indiqué que ce calendrier nécessite la bibliothèque Prototype et Vil'Coyote te le rappelle aussi. Hors celle-ci n'est pas fournie dans ton source donc forcement ça ne peut pas fonctionner.

Tu pourras avoir Prototype en version 1.7.0.0 sur ce lien:
https://ajax.googleapis.com/ajax/lib...0/prototype.js

Tu n'as plus qu'a faire: Clic droit > Enregistrer sous... (Quand tu seras sur le code-source de prototype.

Et inclure le chemin vers celui-ci dans ta page html/php/autre chose:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<head>
<!-- Ton code existant dans les balises head -->
<script src="./scripts/prototype1.7.0.0.js" type="text/javascript" language="JavaScript"></script>
</head>

Le chemin et le nom du fichier menant a prototype sont bidons remplace par ce qui va bien.

19/01/2011, 20h08	#1
Hilary Invité régulier Inscription : janvier 2010 Messages : 30 Détails du profil Informations forums : Inscription : janvier 2010 Messages : 30 Points : 9 Points : 9	Calendrier JavaScript pour site web Bonjour! J’essaie de faire fonctionner ce calendrier JavaScript sur mon site et je n’y arrive pas. Doit-il être exécuté en PHP seulement? Voici le lien : http//www.calendarview.org Exemple : Embedded Calendar Merci de votre aide! Hilary
	00

19/01/2011, 20h49	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	non pas de php c'est du javascript mais il te faut en plus de ton script de calendrier la bibliothèque prototype.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email