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.