How Do I Associate FullCalendar Resource With EventSources from Google Calendar? - fullcalendar

I've searched the documentation and found nothing about associating a FullCalendar Resource with Event Sources from Google Calendar.
This is the relevant code:
resources: [
{ id: 'room01', title: 'Room 1' },
{ id: 'room02', title: 'Room 2' },
{ id: 'room03', title: 'Room 3' },
{ id: 'room04', title: 'Room 4' }
],
eventSources: [
{
id: 'e1',
resourceId: 'room01',
googleCalendarId: '[GOOGLE CALENDAR ID #1]'
},
{
id: 'e2',
resourceId: 'room02',
googleCalendarId: '[GOOGLE CALENDAR ID #2]'
}
],
Please, help :-)

In that you can associate any event with anything, the specific bit about google calendar I cannot really answer, however from what you showed here (i.e. adding the googleCalendarId to your events as you have), I am thinking what you may be looking for is the next piece of the puzzle, being the eventClick part ?
For what you have I would think this would look something like :
eventClick: function(calEvent) {
if (calEvent.googleCalendarId) {
var edit_url = "/url_to_get_to_the_google_calendar/" + calEvent.googleCalendarId + "/";
window.open(edit_url,"_self");
return false;
}
},
I use the same technique as you showed above to add various associations to my events, and then simply add eventClick code (which would simply follow your code above in your calendar page entry) - except I am adding my data in methods in the scheduler views.py methods.....but it's the same concept !
Does that help ? I was not clear on what actually you were needing help with !

Related

Optimize server side Experiments gtag

The docs for Google optimize server side events are written for analytics.js is there a way to do the same thing using gtag.js? https://developers.google.com/optimize/devguides/experiments#add-ga-tracking-code-to-variations
ga('set', 'exp', `${experimentId}.${variationId}`);
ga('send', 'pageview');
I'm using gtag so I need something like this:
gtag('event', '???', {
???: `${experimentId}.${variantPosition}`,
});
I tried these:
window.gtag('set', { expId: <experiment-id> });
window.gtag('set', { expVar: <variation-number> });
window.gtag('event', 'page_view', ...
and
window.gtag('config', 'UA-XXXXXXX-X', {experiments: [ { id: 'ExperimentID 1', variant: '1' }, { id: 'ExperimentID 2', variant: '2' }, ]});
Neither of these works, in optimize Details tab I cannot see any active sessions. Anyone solved this issue before?
So I managed to find a solution, for anyone wondering how to do it, this is it:
window.gtag('config', 'UA-XXXXXXXX-XX', {
experiments: [{ id: experimentId, variant: experimentVariation }],
});
where experimentId is id supplied by Optimize and variant is a digit representing active user experiment, for example 1 or 2.

FullCalendar Does not re-render after updateEvents

My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/

FullCalendar Multiple Google calendars in an array

The FullCalendar docs show the following for multiple Google calendars:
eventSources: [
{
googleCalendarId: 'abcd1234#group.calendar.google.com'
},
{
googleCalendarId: 'efgh5678#group.calendar.google.com',
className: 'nice-event'
}
]
This does not work:
eventObject.push({
googleCalendarId
});
eventSources: [ eventObject ]
How do I turn this into an array that will show multiple google calendars that I would dynamically be able to add?
What does work is:
eventObject.push({
id: eventId[i],
title: name[i],
start: startTime[i],
end: endTime[i],
description: evDes[i].description
});
eventSources:
[
{
events: eventObject
}
]
But this is not the same thing. Importantly, I want to be able to use both and have both the google calendar and the json source that I'm parsing out this way. How do I do that?
Ok, figured it out. So if I'm iterating through a list of google calendars, I would have this: (I'm using C# and MVC to get the list of calendars into the Javascript - that's what "model" refers to here)
CalendarId = model.data[i].calendar_source;
gcalObject.push({
googleCalendarId: CalendarId,
And then, in the calendar init, I'd have this:
eventSources: gcalObject,
And then I can separately have events that do not come from a Google calendar in the regular events object:
events: eventsObject
So problem solved. Google calendar events go in eventSources and other events go in events. And eventSources sits at the same hierarchical level as events.

FullCalendar: How to open event details in Colorbox?

I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.

Add extra fields to fullcalendar

I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.
Currently I have the following;
$calendar.fullCalendar({
timeslotsPerHour : 4,
defaultView:'agendaWeek',
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json-events.php",
eventRender : function(calEvent, $event) {
calEvent.distributor //this is my new field
},
But I its not working and I can't find any working examples to compare it with.
Thanks
Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.
My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.
In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
Note: You can access an additional field in this way: info.event.extendedProps.description
Check documentation
you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender
and see Event Object
Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name
eventRender: function(event, element) {
element.attr("categories",event.categoryname)
}
Simply awesome calendar
Some attributes here:
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},

Resources