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",
      },
      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",
      },
      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",
        },
        duration: { days: 1 },
      },
    });
  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("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",
        });
        break;
      case "UTC":
        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",
        });
        break;
      default:
        let initial = moment("2021-09-13T14:00Z");
        let final = moment("2021-09-17T23:30Z");
        let offset = initial.utcOffset();
        calendar.setOption("slotMinTime", initial.format("H:mm"));
        if(offset>0){
          calendar.setOption("slotMaxTime", {days:1,hours:offset/60});
        }
        //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("initialDate",initial.format("Y-MM-DD"));
        calendar.setOption("validRange", {
            start: initial.format("Y-MM-DD"),
            end:final.add(1,'d').format("Y-MM-DD")
        });
    }
  });
});