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

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>

skandhal · 20/01/2011, 10h25

Envoyé par calendarview.org

CalendarView requires Prototype 1.6.0 (or later).

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.

Calendrier JavaScript pour site web

Conception Web

Discussions similaires

Partager

Partager