Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
Year calendar - alwaysHalfDay not working

I have an issue with js-year-calendar script (https://year-calendar.github.io/) when using alwaysHalfDay option. When I manually put booking dates in script it works fine

     const currentYear = new Date().getFullYear();
    
    new Calendar('#calendar', {
               
alwaysHalfDay: true,

      dataSource: [
        {
          startDate: new Date(currentYear, 2, 5),
          endDate: new Date(currentYear, 2, 20)
        },
        {
          startDate: new Date(currentYear, 5, 10),
          endDate: new Date(currentYear, 7, 10)
        }
      ]
    })

but when I want to pull data from google calendar then alwaysHalfDay is not working, it loads calendar and highlight booked days but doesn't show half day on calendar. Here is the code:

 let tooltip = null;
    const calendar = new Calendar('#calendar', {
alwaysHalfDay: true,
      dataSource: function() {
    
      
        return fetch(`MY_PATH_TO_GOOGLE_CALENDAR_WITH_API_CODE`)
          .then(result => result.json())
          .then(result => {
            if (result.items) {
              console.log(result.items);
              return result.items.map(r => ({
                startDate: new Date(r.start.dateTime),
                endDate: new Date(r.end.dateTime),
                name: r.summary,
                details: r.comments + ' comments'
              }));
            }
    
            return [];
          });
      },
      mouseOnDay: function(e) {
        if (e.events.length > 0) {
          var content = '';
    
          for (var i in e.events) {
            content += '<div class="event-tooltip-content">'
              + '<div class="event-name" style="color:' +
    e.events[i].color + '">' + e.events[i].name + '</div>'
                                          + '<div class="event-details">'
    + e.events[i].details + '</div>'
              + '</div>';
          }
    
          if (tooltip !== null) {
            tooltip.destroy();
            tooltip = null;
          }
    
          tooltip = tippy(e.element, {
              placement: 'right',
              content: content,
              animateFill: false,
              animation: 'shift-away',
              arrow: true
          });
          tooltip.show();
        }
      },
      mouseOutDay: function() {
        if (tooltip !== null) {
          tooltip.destroy();
          tooltip = null;
        }
      }
    });

Don't understand where could be the problem.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda