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:
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:
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:
1
2 </script> <style>
Code:
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:
1
2
3
4
5
6 </style> </head> <body> <div id='calendar'></div> </body> </html>