www/plugins/agenda_3_5/inclure/agenda-vue-calendrier.html

   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>