clam2021/public/js/program.js

document.addEventListener("DOMContentLoaded", function () {
  var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;    

  /*var slotMin = new Date("2021-09-13:14:00Z")
  var slotMax = new Date("2021-09-13:23:30Z")

  if(slotMax.getHours()<slotMin.getHours()){
      slotMax.setHours(23)
      slotMax.setMinutes(59)
  }
  console.log(slotMin.toLocaleTimeString(),slotMax.toLocaleTimeString())*/
  
    //document.getElementById("timezone").innerHTML=`Zona Horaria: ${timeZone}`;
    var timeZoneSelectorEl = document.getElementById("time-zone-selector");
    if(timeZone !== "America/Montevideo"){
        var optionEl = document.createElement('option');
        optionEl.value = "local";
        optionEl.innerText = timeZone;
        timeZoneSelectorEl.appendChild(optionEl)
    }
    var calendarEl = document.getElementById("calendar");
    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",

      eventDidMount: function (info) {        
        
        if(info.backgroundColor == "gray"){
          var tooltip = tippy(info.el, {
            content: `${info.event.extendedProps.description.replaceAll("|",',<br/>')}`,
              
            //            content: `<strong>${info.event.title}</strong><br/><ul>${info.event.extendedProps.description.split('|').map(ses=>`<li>${ses}</li>`)}</ul>`,

            allowHTML: true,
          });
          
        }
        else{         
          
          var tooltip = tippy(info.el, {
            content: `<strong>${info.event.title}</strong><br/><strong>${info.event.extendedProps.speaker.nombre}</strong><br/>${info.event.extendedProps.description}`,
            allowHTML: true,
          });
        }
          
      },
      eventSources: [
        {url: "/api/eventos/cursos", color: "#755baf"},
        {url: "/api/eventos/plenarias", color: "#578e44"},
        {url: "/api/eventos/semiplenarias", color: "#3383cb"},
        {url: "/api/eventos/publicas", color: "#a57b00"},
        {url: "/api/eventos/premiados", color: "darkred"},
        { url: "/api/eventos/sesiones/", color: "gray", display:'list-item', eventDidMount:function(info){
          console.log(info)
        }},
        {url: "/api/eventos/genero", color: "#812c64"},          
        {
          events: function (info, success, fail) {
            let asamblea = {
              title: "Asamblea UMALCA",
              start: "2021-09-13T19:00-0300",
              end: "2019-09-13T20:00-0300",
              url: 'https://us02web.zoom.us/j/88195214460',
              speaker: {
                nombre:
                  "Representantes de cada una de las sociedades que integran UMALCA",
              },
              description:
                "Estatutariamente, la asamblea reúne a los representantes de cada una de las sociedades que integran UMALCA. Las autoridades de los distintos comités (ejecutivo, científico, etc) están presentes para dar cuentas de lo actuado. No está abierta al público en general.",
              color: "black",
            };
            success([asamblea]);
          },
        },
      ],

      headerToolbar: {
        center: "timeGridAll,timeGridThree,timeGridOne,listView",
      },
      eventTimeFormat: {
        hour: "numeric",
        minute: "2-digit",
        meridiem: false,
      },
      timeZone: "America/Montevideo",
      locale: "es",
      initialView: "timeGridAll",
      initialDate: "2021-09-13",
      validRange: {
        start: "2021-09-13",
        end: "2021-09-18",
      },
      nowIndicator: true,
      now: "2021-09-12",
      slotMinTime: "11:00:00",
      slotMaxTime: "21:00:00",
      slotDuration: "00:15",
      allDaySlot: false,
      slotLabelFormat: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        meridiem: "short",
      },
      eventTimeFormat: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        meridiem: "short",
      },
      eventDisplay: "block",
      views: {
        timeGridAll: {
          type: "timeGrid",
          duration: { days: 5 },
          buttonText: "Todos los dias",
        },
        timeGridThree: {
          type: "timeGrid",
          duration: { days: 2 },
          buttonText: "2 dias",
        },
        timeGridOne: {
          type: "timeGrid",
          duration: { days: 1 },
          buttonText: "1 dia",
        },
        dayGridD: {
          type: "dayGridDay",
        },
        dayGridW: {
          type: "dayGridWeek",
          duration: { days: 2 },
        },
        listView: {
          type: "listWeek",
          buttonText: "Lista",
          duration: { days: 2 },
        },
      },
    });
  calendar.render();
  
  timeZoneSelectorEl.addEventListener("change", function () {
    console.log(calendar.getOption('slotMinTime'))
    calendar.setOption("timeZone", this.value);
    switch (this.value) {
      case "America/Montevideo":
        calendar.setOption("locale", "es");
        calendar.setOption("slotMinTime", "11:00:00");
        calendar.setOption("slotMaxTime", "21:00:00");
        calendar.setOption("initialDate", "2021-09-13");
        calendar.setOption("validRange", {
          start: "2021-09-13",
          end: "2021-09-18",
        });
        calendar.changeView("timeGridAll");
        break;
      case "UTC":
        calendar.setOption("locale", "en");
        calendar.setOption("slotMinTime", "14:00:00");
        calendar.setOption("slotMaxTime", "23:59:00");
        calendar.setOption("initialDate", "2021-09-13");
        calendar.setOption("validRange", {
          start: "2021-09-13",
          end: "2021-09-18",
        });
        calendar.changeView("timeGridAll");  
        break;
      default:        
        calendar.setOption("locale",'en')       
        let initial = moment("2021-09-13T14:00Z");
        let final = moment("2021-09-17T23:30Z");
        let offset = initial.utcOffset();
        calendar.setOption("initialDate", initial.format("Y-MM-DD"));
        
        if(offset>0 && offset < 600){
          //calendar.setOption("slotMinTime", "initial.format("H:mm")");  
          calendar.setOption("slotMinTime", "00:00");
          //calendar.setOption("slotMaxTime", {days:1,hours:offset/60});
          calendar.setOption("slotMaxTime", "24:00");
          calendar.changeView("listView"); 
          
        }
        //let currentOffset = moment().utcOffset();
        //initial.add(currentOffset, "minutes");
        //calendar.setOption('slotMinTime', initial.utc().format('H:mm'))
        //calendar.setOption("slotMaxTime", {days:1,hours:currentOffset/60});      
        else{
            
            calendar.setOption("slotMaxTime",final.format("H:mm"));
            calendar.setOption("slotMinTime", initial.format("H:mm"));
        }
        
        calendar.setOption("validRange", {
            start: initial.format("Y-MM-DD"),
            end:final.add(1,'d').format("Y-MM-DD")
        });
    }
  });
});