We Keep Coding

Google calendar API delay in sending calendar invites

I have a JS application using the google calendar api, the event is created with the event link but calendar invites usually takes time to be sent to my calendar as the primary owner and sometimes i do not get it. Below is the code snippet, kindly help check it out.
addEvent = async (interview_schedule: any): Promise<any> => {
const calendar = google.calendar({ version: 'v3' });
const event: any = {
summary: interview_schedule.interview.title || 'N/A',
description: interview_schedule.interview.description || 'N/A',
anyoneCanAddSelf: false,
start: {
dateTime: new Date(
`${interview_schedule.date} ${interview_schedule.start_time}`,
),
timeZone: 'Africa/Lagos',
},
end: {
dateTime: new Date(
`${interview_schedule.date} ${interview_schedule.end_time}`,
),
timeZone: 'Africa/Lagos',
},
attendees: interview_schedule.attendees,
reminders: {
useDefault: false,
overrides: [
{ method: 'email', minutes: 60 },
{ method: 'popup', minutes: 10 },
],
},
conferenceData: {
createRequest: {
requestId: interview_schedule.id,
conferenceSolutionKey: 'hangoutsMeet',
},
},
};
try {
const res = await calendar.events.insert({
calendarId: 'primary',
auth: this.client,
sendUpdates: 'all',
conferenceDataVersion: 1,
requestBody: event,
});
console.log('done creating event ', res)
return res.data;
} catch (err) {
console.error(err);
}
};
I have tried searching for sulutions yet no results

Loop and post value inside array-JS

I have this script that get JSON value from server and then post them on Fullcalendar, the extraction and post value works perfectly but the problem that sometimes I got more than one value on JSON result.
my code is below
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events: [
{
title: data[0].events.title,
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
nowIndicator: true
});
the data containe JSON result which is like below :
what I want is this :
if the data[i] > 1 how can I modify my code in order to display all the potential value and if there is another data at the same time and date then it is displayed also next to the first one
the part that needs to be modified is below
events: [
{
title: data[0].events.title,// 0 is first index, how to place i incrementation
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
Any idea please ?
Best Regards

Since data is an array, you can iterate over it like so:
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
const events = data.map((row)=>{
return {
title: row.events.title,
start: row.events.start,
end: "2020-05-18 18:00:00"
}
})
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events,
nowIndicator: true
});

How to render events for selected user from select list on fullcalendar

I want to render only events assigned for a specific user. At start fullcalendar render events for logged user (it works). Further, I am using selectlist to send choosen userid to controller. In response I get json with all events of selected user.
I've tried to use 'eventSources', but when I try to call function with selected events, I can't use 'callback' cause of error in console: "Uncaught TypeError: callback is not a function at Object.success"
I do the following:
fullcalendar init
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 700,
header: {
left: 'agendaDay,agendaWeek,month',
right: 'none'
},
eventRender(event, $el) {
$el.qtip({
content: {
title: event.title,
},
hide: {
event: 'unfocus'
},
show: {
solo: true
},
position: {
my: 'top left',
at: 'bottom left',
viewport: $('#calendar-wrapper'),
adjust: {
method: 'shift'
}
}
});
},
eventSources: [
getEvents,
getAnotherUserEvents
],
});
Function with events of logged user:
function getEvents(start, end, timezone, callback) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
url: apiUrl + '/getevents',
type: 'GET',
dataType: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
color: entry.color,
user: entry.users,
id: entry.id
});
});
}
callback(events);
},
});
};
Function with events of selected user (data contains selected user Id)
function getAnotherUserEvents(start, end, timezone, callback, data) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
type: 'POST',
url: apiUrl + '/GetAnotherUserEvents',
dataType: 'json',
data: {
"Id": data.id,
},
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
});
});
}
callback(events);
},
})
}
Do you have any ideas how can I display only events of selected user?

How to replace all events in FullCalendar library

I am creating a page using the FullCalendar.io library to display events on a webpage.
Now as the user navigates between between date ranges I want to load the events dynamically. Using the documentation I'm able to add the new events when the user presses the "next" button, however it simply appends the events to the existing events Object, what I want to do is remove any existing events and only display the new list. How can I do this?
You can view the functionality here on my CodePen.
HTML
<p>
<button id='prev'>prev</button>
<button id='next'>next</button>
</p>
<div id='calendar'></div>
JS
var calendar;
var eventsList = [{
id: '1',
title: 'event 1',
start: '2019-04-06'
},
{
id: '2',
title: 'event 2',
start: '2019-04-07'
},
{
id: '3',
title: 'event 3',
start: '2019-04-29'
},
{
id: '4',
title: 'event 4',
start: '2019-04-30'
}];
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
header: {
left: '',
center: 'title',
right: ''
},
editable: true,
events: eventsList
});
calendar.render();
});
document.getElementById('prev').addEventListener('click', function() {
calendar.prev(); // call method
});
document.getElementById('next').addEventListener('click', function() {
// replace existing list - this will doneby another function, hard coding for demo
eventsList = [{
id: '5',
title: 'event 5',
start: '2019-05-06'
},
{
id: '6',
title: 'event 6',
start: '2019-05-07'
},
{
id: '7',
title: 'event 7',
start: '2019-05-08'
},
{
id: '8',
title: 'event 7',
start: '2019-05-09'
}];
calendar.next(); // call method
calendar.addEventSource(eventsList);
//calendar.refetchEvents(); // using this instead of the line above does not work either, just loads original list
});

I misread the document, getEventSource returns an array of eventSource, so just simply point index and then remove should work.
calendar.getEventSources()[0].remove();
or if you have multiple resources,
calendar.getEventSources().forEach(eventSource => {
eventSource.remove()
})
Code below is mistaken, left for the record.
How about adding remove() before you add event source.
calendar.next(); // call method
calendar.getEventSources().remove();
calendar.addEventSource(eventsList);
//calendar.refetchEvents(); // this does not work either, just loads original list
https://fullcalendar.io/docs/Calendar-getEventSources
https://fullcalendar.io/docs/EventSource-remove

How to make full calendar month and year in dropdown selectable

I have a full calendar and I need to show its month and year in dropdown list, I know this question is already asked but still not answered there. I am new to full calendar and as per as i know it is updated now hope there is some easiest way to achieve rather than giving it gotodate option. I have created code pen for the calendar if anyone has done this before then please update my codepen and give me link thank you so much...
demoToEdit
Below is my code I have added some of the functions of full calendar as you see I am not able to get on which event I should right dropdown year and month so I have not done it.
$(window).load(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventRender: function(event, element, view) {
for (var i = 0; i<= event.products.length - 1; i++) {
element.append('<span>'+event.products[i].name+'<span>');
};
},
events: [
{
title: 'EventName',
start: '2016-05-02',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-03',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
},
{
name:'ProductName3'
},
]
},
{
title: 'EventName',
start: '2016-05-13',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-15',
products:[
{
name:'ProductName'
}
]
},
{
title: 'EventNAme',
start: '2016-05-21',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-23',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Eventname',
start: '2016-05-25',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-29',
products:[
{
name:'ProductName'
}
]
}
],
dayClick: function(date, allDay, jsEvent, view) {
console.log('date'+date.format('DD/MMM/YYYY')+"allDay"+allDay.title+"jsEvent"+jsEvent+"view"+view)
}
});
})
[1]: http://codepen.io/sud/pen/LNvZmv

It is hard to insert drop downs using fullcalendar custom buttons. I simply make header option to false and created custom header myself. Then you can insert any thing to header part and bind events to those buttons and call appropriate fullcalendar function. example functions that available are
prev (),
next (),
prevYear (),
nextYear (),
today (),
gotoDate ()