source: spip-zone/_plugins_/agenda/trunk/inclure/agenda-vue-calendrier.html @ 81344

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

Vue fullcalendar :
renommée,
déplacée
utilisant le fullcalendar du plugin-dist organiseur
et internalisée différemment
(selon les recommendation de cerdic)

  • Property svn:mime-type set to text/plain
File size: 4.2 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-inner { background-color: #E0ECFF; }
4.fc-header-title { margin: auto 1em; }
5#fullcalendar_#ID_MOT-#ID_RUBRIQUE { position: relative; margin: 1em auto; padding: 1em; [(#LARGEUR|is_null|non)width: #LARGEURpx;] }
6</style>
7
8#SET{data,#ARRAY}
9<BOUCLE_articles(ARTICLES) {id_mot ?} {id_rubrique ?} {par date} {inverse} ><BOUCLE_événements(EVENEMENTS) {id_article} >[
10(#SET{événement,#ARRAY{title,'',hover,#TITRE,start,#DATE_DEBUT,end,#DATE_FIN,id,#ID_ARTICLE,url,#URL_ARTICLE}})][
11(#SET{data,#GET{data}|push{#GET{événement}}})
12]</BOUCLE_événements></BOUCLE_articles>
13
14[(#SET{json_data,#GET{data}|json_encode{2}})]
15
16<div id="fullcalendar_#ID_MOT-#ID_RUBRIQUE"></div>
17
18#SET{français,0}
19[(#LANG|is_null|oui)#SET{français,1}]
20[(#LANG|=={fr}|oui)#SET{français,1}]
21
22<script type="text/javascript">
23$(function() {
24        $.getScript('#CHEMIN{lib/fullcalendar/fullcalendar.min.js}', function() {
25                $('head').append('<link rel="stylesheet" type="text/css"  media="screen" href="#CHEMIN{lib/fullcalendar/fullcalendar.css}">');
26                $('head').append('<link rel="stylesheet" type="text/css" media="print" href="#CHEMIN{lib/fullcalendar/fullcalendar.print.css}">');
27                var data = #GET{json_data};
28                $('#fullcalendar_#ID_MOT-#ID_RUBRIQUE').fullCalendar({
29                        header: {
30                                left: '',
31                                center: 'prev,title,next',
32                                right: ''
33                        },
34                        [(#ENV{hauteur}|is_null|non)height: #HAUTEUR,]
35
36                        monthNames:['<:date_mois_1|attribut_html:>','<:date_mois_2|attribut_html:>','<:date_mois_3|attribut_html:>','<:date_mois_4|attribut_html:>','<:date_mois_5|attribut_html:>','<:date_mois_6|attribut_html:>','<:date_mois_7|attribut_html:>','<:date_mois_8|attribut_html:>','<:date_mois_9|attribut_html:>','<:date_mois_10|attribut_html:>','<:date_mois_11|attribut_html:>','<:date_mois_12|attribut_html:>'],
37                        monthNamesShort:['<:date_mois_1_abbr|attribut_html:>','<:date_mois_2_abbr|attribut_html:>','<:date_mois_3_abbr|attribut_html:>','<:date_mois_4_abbr|attribut_html:>','<:date_mois_5_abbr|attribut_html:>','<:date_mois_6_abbr|attribut_html:>','<:date_mois_7_abbr|attribut_html:>','<:date_mois_8_abbr|attribut_html:>','<:date_mois_9_abbr|attribut_html:>','<:date_mois_10_abbr|attribut_html:>','<:date_mois_11_abbr|attribut_html:>','<:date_mois_12_abbr|attribut_html:>'],
38                        dayNames:['<:date_jour_1|attribut_html:>','<:date_jour_2|attribut_html:>','<:date_jour_3|attribut_html:>','<:date_jour_4|attribut_html:>','<:date_jour_5|attribut_html:>','<:date_jour_6|attribut_html:>','<:date_jour_7|attribut_html:>'],
39                        dayNamesShort:['<:date_jour_1_abbr|attribut_html:>','<:date_jour_2_abbr|attribut_html:>','<:date_jour_3_abbr|attribut_html:>','<:date_jour_4_abbr|attribut_html:>','<:date_jour_5_abbr|attribut_html:>','<:date_jour_6_abbr|attribut_html:>','<:date_jour_7_abbr|attribut_html:>'],
40                        buttonText: {
41                                prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
42                                next: "<span class='fc-text-arrow'>&rsaquo;</span>",
43                                prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
44                                nextYear: "<span class='fc-text-arrow'>&raquo;</span>",
45                today: '<:date_aujourdhui|attribut_html:>',
46                month: '<:cal_par_mois|attribut_html:>',
47                day: '<:cal_par_jour|attribut_html:>',
48                week: '<:cal_par_semaine|attribut_html:>'
49                        },
50                        // time formats
51                        titleFormat: {
52                                month: 'MMMM yyyy',
53                                week: "d MMM[ yyyy]{ '&#8212;'d[ MMM] yyyy}",
54                                day: 'dddd, d MMM, yyyy'
55                        },
56                        columnFormat: {
57                                month: 'ddd',
58                                week: 'ddd d/M',
59                                day: 'dddd d/M'
60                        },
61                        firstDay: 1,
62                        events: data,
63                        defaultView: '[(#VUE|=={semaine}|?{week,month})]',
64                        // events: data,
65                        eventMouseover: function(event, jsEvent, view) {
66                                $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-title\" style=\"\">'+event.hover+'</div>');
67                        },
68                        eventMouseout: function(event, jsEvent, view) {
69                                $('#'+event.id).remove();
70                        },
71                        eventClick: function(event) {
72                                console.log(event);
73                                if (false) {
74                                        var url = '/?page=location_donnees&who=direction_scientifique&id_location=' + mrbs_ids[event.id];
75                                        var win=window.open(url, '_blank');
76                                        win.focus();
77                                }
78                        }
79                })
80        });
81});
82</script>
Note: See TracBrowser for help on using the repository browser.