Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!