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

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

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:

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>

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:

1 2 3 4 5 <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.