Highcharts et Fullcalendar

**sabrinouch** · 13/07/2014, 15h26

Bonjour à tous,
J'ai essayé de créer un agenda et un camembert interactif. Au début, je voulais utiliser google charts et google agenda plus simple, mais mon projet doit marcher sans internet. J'utlise donc highcharts pour mon diagramme et fullcalendar pour mon agenda ainsi que Jquery. J'ai telechargé tout ce qu'il fallait et j'ai inclus ces fichiers dans le même fichier que mon projet, comme cela ne fonctionnait pas j'ai essayé de modifier les chemins et les arborescences ou encore de me baser sur un exemple déjà présent dans la bibliothèque téléchargée, mais cela ne fonctionne toujours pas; en effet, lorsque j'inspecte l'élément dans la console, on me dit que toutes les pages comme par exemple fullcalendar.css etc ne sont pas trouvée (erreur 404). Je ne comprend vraiment pas pourquoi. Voici mon code de ma page html qui doit m'afficher un calendrier:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>

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
$(document).ready(function() {
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		defaultDate: '2014-06-12',
		selectable: true,
		selectHelper: true,
		select: function(start, end) {
			var title = prompt('Event Title:');
			var eventData;
			if (title) {
				eventData = {
					title: title,
					start: start,
					end: end
				};
				$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
			}
			$('#calendar').fullCalendar('unselect');
		},
		editable: true,
		events: [{
			title: 'All Day Event',
			start: '2014-06-01'
		},{
			title: 'Long Event',
			start: '2014-06-07',
			end: '2014-06-10'
		},{
			id: 999,
			title: 'Repeating Event',
			start: '2014-06-09T16:00:00'
		},{
			id: 999,
			title: 'Repeating Event',
			start: '2014-06-16T16:00:00'
		},{
			title: 'Meeting',
			start: '2014-06-12T10:30:00',
			end: '2014-06-12T12:30:00'
		},{
			title: 'Lunch',
			start: '2014-06-12T12:00:00'
		},{
			title: 'Birthday Party',
			start: '2014-06-13T07:00:00'
		},{
			title: 'Click for Google',
			url: 'http://google.com/',
			start: '2014-06-28'
		}]
	});
});

Code html :

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

1
2
</script>
<style>

Code css :

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

1
2
3
4
5
6
7
8
9
10
body {
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 14px;
}
#calendar {
	width: 900px;
	margin: 40px auto;
}

Code html :

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

1
2
3
4
5
6
</style>
</head>
<body>
	<div id='calendar'></div>
</body>
</html>

**NoSmoking** · 13/07/2014, 19h51

Bonjour,

...on me dit que toutes les pages comme par exemple fullcalendar.css etc ne sont pas trouvée (erreur 404). Je ne comprend vraiment pas pourquoi.

cela sent quand même le chemin mal déclaré non ?

**sabrinouch** · 13/07/2014, 20h14

Je suis tout à fait d'accord mais mes fichiers sont dans le même dossier que tous mes codes notamment celui de mon serveur node.js; l'arborescence me paraît bonne :
dossier principal: version bis
à l'interieur: -tous mes fichiers .js de mon serveur
-fullcalendar.js
-fullcalendar.css
-fullcalendar.min.js
-fullcalendar.print.css
-gcal.js
-ma page html contenant mon calendrier
-dosier lib
à l'intérieur de lib:
-jquery.min
-moment.min
-jquery.ui.custom.min
Y a t-il un problème dans mes chemins?

Highcharts et Fullcalendar

jQuery

Discussions similaires

Partager

Partager