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) {
        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",
          /*NO ESTÁ FUNCANDO EL RECUR
              startTime:"13:00",
              endTime:"14:00",
              startRecur:"2021-09-14",
              endRecur:"2021-09-16",*/
        },
        {
          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" },
        {
          events: function (info, success, fail) {
            let comisiones = [];
            for (let i = 0; i < 3; i++) {
              comisiones.push({
                title: "Comisión de Género",
                start: `2021-09-${14 + i}T18:30-0300`,
                end: `2021-09-${14 + i}T19:30-0300`,
                speaker: { nombre: "organizadores" },
                description: "Reuniones de Comisión de Género de UMALCA",
                color: "#812c64",
              });
            }
            success(comisiones);
          },
        },
        {
          events: function (info, success, fail) {
            let asamblea = {
              title: "Asamblea UMALCA",
              start: "2021-09-13T19:00-0300",
              end: "2019-09-13T20:00-0300",
              speaker: { nombre: "organizadores" },
              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();
  console.log(calendar)
  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")
        });
    }
  });
});