{% extends "layout-calendar.html" %}

{% block content %}
<!--<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/locales-all.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/locales-all.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.css">

<script>  
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
          googleCalendarApiKey:'AIzaSyCAkkSHMyz2HuxXxux2gOfUsLY9EC-gisE',
          //themeSystem:'bootstrap',
        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:[
            /*{
              googleCalendarId:'iga8lgjufumlgsmaltgmppuvj4@group.calendar.google.com',
              color:'red'
            },
            {
              googleCalendarId:'lo68cu653fgec0l4ira0pul564@group.calendar.google.com'
            },*/
            {
              url: '/api/eventos/cursos',
              color: 'black',
            },
            {
              url:'/api/eventos/plenarias',
              color: 'blue',
      
            },
            {
              url:'/api/eventos/semiplenarias',
              color: 'red'
            },
            {
              url:'/api/eventos/publicas',
              color:'gray'
            }

            ],
            events:[{
              title:"Sesiones",
              startTime:"15:00",
              endTime:"18:15",
              startRecur:"2021-09-13",
              endRecur:"2021-09-18",
              speaker:{nombre:"organizadores"},
              //duration:{days:5}
            }],
           /*events:[
              {
              title:'Reversible Markov chains with nonnegative spectrum',
              speaker:'Jairo Bochi (Penn State University)',
              start:'2021-09-13T11:00:00',
              end:'2021-09-13T12:00:00',
              
              
            },
            {
              title:'Curso2',
              description:'La descri del curso1',
              start:'2021-09-13T11:00:00',
              end:'2021-09-13T12:00:00',
              
            },
             {
              groupId:1,
              title:'ses1',
              speaker:'Jairo Bochi (Penn State University)',
              start:'2021-09-13T15:00:00',
              end:'2021-09-13T16:00:00',
              
            },
            {
              groupId:1,
              title:'ses2',
              description:'La descri del curso1',
              start:'2021-09-13T15:00:00',
              end:'2021-09-13T16:00:00',
              
            },
            {
              groupId:1,
              title:'ses3',
              description:'La descri del curso1',
              start:'2021-09-13T15:00:00',
              end:'2021-09-13T16:00:00',
              
            }
          ],*/
          headerToolbar:{
            center:'timeGridAll,timeGridThree,timeGridOne,TimeGridDay,Timeline'
          },
          locales:'es',
          initialView: 'timeGridThree',
          initialDate:'2021-09-13',
          validRange: {
             start: '2021-09-13',
              end: '2021-09-19'
          },
          nowIndicator:true,
          now:'2021-09-13',
          slotMinTime:"11:00:00",
          slotMaxTime:"19:00:00",
          slotDuration:'00:15',
          //displayEventTime:false,
          allDaySlot:false,
          slotLabelFormat:{
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: false,
            meridiem: 'short'
          },
          eventDisplay:'block',
          views:{
            
            timeGridAll:{
              type:'timeGrid',              
              duration:{days:6},
              buttonText:"Todos los dias"
            },
            timeGridThree:{
              type:'timeGrid',
              duration:{days:2},
              buttonText:"2 dias",
             
            },
            timeGridOne:{
              type:'timeGrid',              
              duration:{days:1},
              buttonText:"1 dia"
            },
            TimeGridDay:{
              type:'resourceTimeGrid',
              duration:{days:2},
              buttonText:"By resources"          
            },
            Timeline:{
              type:'resourceTimeline',
              duration:{days:1},
              buttonText:"timeline",              
            }
          },
          duration:{days:1},
          resources:[{id:"Plenarias",title:"Plenarias"},{id:"Cursos",title:"Cursos"},{id:"Semiplenarias",title:"Semiplenarias"},{id:"Públicas",title:"Públicas"}]
          
        });
        calendar.render();
      });

    </script>
  <div class="row">
    <h1 id="programa"><strong>Calendario</strong> </h1>
    <div id="calendar"></div>
    <div class="col-xs-12">
        <!--<div class="alert alert-info">
            <i class="glyphicon glyphicon-info-sign"></i> <strong>To be announced</strong><br/>      
          </div>-->

   <!-- <div class="media">
      <a style="display:block;" href="program-files/program.pdf" target="_blank">
      <div class="media-left media-top">
          <h1><span style="font-size:60px;" class="glyphicon glyphicon-list"></span></h1>
      </div>
      <div class="media-body">
        <div class="media-heading">
          <h2>Program</h2>
        </div>
        <p>GGDWorkshop Program Abstracts</p>
      </div>
        </a>
    </div>

    <div class="media">
      <a style="display:block;" href="program-files/schedule.pdf" target="_blank">
      <div class="media-left media-top">

          <h1><span style="font-size:60px;" class="glyphicon glyphicon-calendar"></span></h1>

      </div>
      <div class="media-body">
        <div class="media-heading">
          <h2>Schedule</h2>
        </div>
        <p>GGDWorkshop Calendar</p>
      </div>
      </a>
    </div>

  </div>


  </div>

  <hr/>
  <div class="row">
    <div class="col-xs-12">
      <h2><strong>Homage to Mañé</strong></h2>
        <ul class="comite">
          <li>Gabriel Paternain (University of Cambridge): 'An incursion into Ricardo's work on Lagrangian systems'</li>
          <li>Enrique Pujals (IMPA): 'The stability conjecture: One of Mañé's journeys'</li>
        </ul>
    </div>
  </div>

  <hr/>
  <div class="row">
    <div class="col-xs-12">
      <h2><strong>Welcome Cocktail:</strong></h2>
        <p>Monday - 18:00 hrs</p>
        <p>La Commedia, El Viejo Pancho 2414</p>
        <div class="map-responsive">
          <iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d6543.4343573044!2d-56.16574802393598!3d-34.913546371521306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x959f819f8574ca93%3A0xc7b49804a0598fec!2sHotel+Intercity+Montevid%C3%A9u!3m2!1d-34.916745999999996!2d-56.161843999999995!4m5!1s0x959f81a727844593%3A0xc5aa552286fe5dce!2sLa+Commedia!3m2!1d-34.910416!2d-56.161625!5e0!3m2!1ses!2suy!4v1531860351456" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
    </div>
  </div>

  <hr/>
  <div class="row">
    <div class="col-xs-12">
      <h2><strong>Dinner/Farewell party</strong></h2>
        <p>Friday - 20:00 hrs</p>
        <p>Defensor sporting, Avda. Sarmiento 2244</p>
        <div class="map-responsive">
        <iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d3271.627469811168!2d-56.16622273476202!3d-34.91579718037986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x959f819f8574ca93%3A0xc7b49804a0598fec!2sHotel+Intercity+Montevid%C3%A9u!3m2!1d-34.916745999999996!2d-56.161843999999995!4m5!1s0x959f81a245cb1853%3A0xf798041fb7b47ec4!2sDefensor+Sporting+Club+-+Complejo+Deportivo+de+Verano!3m2!1d-34.9157735!2d-56.1661108!5e0!3m2!1ses!2suy!4v1531860499068" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>-->
    </div>
  </div>
  <hr/>



{% endblock %}