source: spip-zone/_plugins_/agenda/trunk/inc/fullcalendar.html @ 81330

Last change on this file since 81330 was 81330, checked in by camille.sauvage@…, 5 years ago

Noisette exploitant le plugin jQuery fullCalendar.
S'utilise comme-ci :
#INCLURE{fond=inc/fullcalendar,id_mot=66,id_rubrique,lang=#LANG,largeur,hauteur,vue=[mois|semaine]}

  • Property svn:mime-type set to text/plain
File size: 3.4 KB
Line 
1<style type="text/css">
2.hover-title { color: black; border: 1px solid #888; padding: 3px; background-color: #DDD; position: absolute; bottom: 0; border-radius: 3px; width: auto; width: 200%; opacity: .9; }
3.fc-event {z-index: 1; }
4.fc-event-inner { background-color: #E0ECFF; }
5.fc-header-title { margin: auto 1em; }
6#fullcalendar_#ID_MOT-#ID_RUBRIQUE { position: relative; margin: 1em auto; padding: 1em; [(#LARGEUR|is_null|non)width: #LARGEURpx;] }
7</style>
8
9#SET{data,#ARRAY}
10<BOUCLE_articles(ARTICLES) {id_mot ?} {id_rubrique ?} {par date} {inverse} ><BOUCLE_événements(EVENEMENTS) {id_article} >[
11(#SET{événement,#ARRAY{title,'',hover,#TITRE,start,#DATE_DEBUT,end,#DATE_FIN,id,#ID_ARTICLE,url,#URL_ARTICLE}})][
12(#SET{data,#GET{data}|push{#GET{événement}}})
13]</BOUCLE_événements></BOUCLE_articles>
14
15[(#SET{json_data,#GET{data}|json_encode{2}})]
16[(#SET{scheme,#SELF|url_absolue|parse_url{0}})]
17
18<div id="fullcalendar_#ID_MOT-#ID_RUBRIQUE"></div>
19
20#SET{français,0}
21[(#LANG|is_null|oui)#SET{français,1}]
22[(#LANG|=={fr}|oui)#SET{français,1}]
23
24<script type="text/javascript">
25$(function() {
26        $.getScript('#GET{scheme}://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js', function() {
27                $('head').append('<link rel="stylesheet" type="text/css" href="#GET{scheme}://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">');
28                $('head').append('<link rel="stylesheet" type="text/css" href="#GET{scheme}://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css">');
29                var data = #GET{json_data};
30                $('#fullcalendar_#ID_MOT-#ID_RUBRIQUE').fullCalendar({
31                        header: {
32                                left: '',
33                                center: 'prev,title,next',
34                                right: ''
35                        },
36                        [(#ENV{hauteur}|is_null|non)height: #HAUTEUR,]
37                        <BOUCLE_condition_français(CONDITION) {si #GET{français}|=={1}} >
38                        monthNames: ['Janvier','F\u00e9vrier','Mars','Avril','Mai','Juin','Juillet','Ao\u00fbt','Septembre','Octobre','Novembre','D\u00e9cembre'],
39                        monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Juin','Juil','Aout','Sep','Oct','Nov','Dec'],
40                        dayNames: ['Dimanche', 'Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
41                        dayNamesShort: ['Dim', 'Lun','Mar','Mer','Jeu','Ven','Sam'],
42                        </BOUCLE_condition_français>
43                        buttonText: {
44                                prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
45                                next: "<span class='fc-text-arrow'>&rsaquo;</span>",
46                                prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
47                                nextYear: "<span class='fc-text-arrow'>&raquo;</span>",
48                                today: 'Aujourd’hui',
49                                month: 'Mois',
50                                week: 'Semaine',
51                                day: 'Jour'
52                        },
53                        // time formats
54                        titleFormat: {
55                                month: 'MMMM yyyy',
56                                week: "d MMM[ yyyy]{ '&#8212;'d[ MMM] yyyy}",
57                                day: 'dddd, d MMM, yyyy'
58                        },
59                        columnFormat: {
60                                month: 'ddd',
61                                week: 'ddd d/M',
62                                day: 'dddd d/M'
63                        },
64                        firstDay: 1,
65                        events: data,
66                        eventBorderColor: 'A5C9FF',
67                        defaultView: '[(#VUE|=={semaine}|?{week,month})]',
68                        // events: data,
69                        eventMouseover: function(event, jsEvent, view) {
70                                $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-title\" style=\"\">'+event.hover+'</div>');
71                        },
72                        eventMouseout: function(event, jsEvent, view) {
73                                $('#'+event.id).remove();
74                        },
75                        eventClick: function(event) {
76                                console.log(event);
77                                if (false) {
78                                        var url = '/?page=location_donnees&who=direction_scientifique&id_location=' + mrbs_ids[event.id];
79                                        var win=window.open(url, '_blank');
80                                        win.focus();
81                                }
82                        }
83                })
84        });
85});
86</script>
Note: See TracBrowser for help on using the repository browser.