Within Fullcalendar I'm trying to filter out specific events using the location strings coming from google calendar. e.g. only show events with location string of "Room 1"
$('#calendar') .fullCalendar( {
googleCalendarApiKey: 'MYAPIKEY',
defaultView: 'listDay',
events: {
googleCalendarId: 'CALENDARID',
}
});
I have looked through the docs and have tried removeEventsand clientEvents but not sure how you specify to the library to pick up on Google API's location strings.
EDIT:
Adapted this from another post from the stack. It does give a type error so probably messed up the code "indexOf($('Room 2').val()) >= 0}", I've tried combinations of this but no luck. I think this is the right code though, just not implementing it correctly.
$('#calendar') .fullCalendar( {
googleCalendarApiKey: 'MYAPIKEY',
defaultView: 'listDay',
events: {
googleCalendarId: 'CALENDARID',
}
eventRender: function eventRender( event, element, view ) {
return ['all', event.location].indexOf($('Room 2').val()) >= 0}
Related
In "FullCalendar" I could add an event using "addEventSource" by array manually, however, I could not succeed adding the event through Google Calendar ID.
$('#calendar').fullCalendar("addEventSource",{
events: [
{
title : 'event1',
start : '2019-02-01'
}
]
});
THE BELOW SNIPPET NOT GETTING THROUGH. PLS ASSIST
$('#calendar').fullCalendar("addEventSource",{
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
}
});
FYI by FUllcalendar: Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.
Firstly please ensure you followed all the steps in the documentation (https://fullcalendar.io/docs/google-calendar) beforehand otherwise it won't work.
Secondly, your object structure is wrong. The events wrapper should not be there when specifying an event source. Perhaps you confused the events option in fullCalendar as being part of the structure required for an event source object, which is documented here: https://fullcalendar.io/docs/event-source-object
Specifically it documents the structure for a google calendar to be the source:
{
googleCalendarId: 'abcd1234#group.calendar.google.com',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
So I suggest you change your code as follows, to match the documented object structure. Basically you just remove the erroneous events bit:
$('#calendar').fullCalendar("addEventSource", {
googleCalendarId: 'abcd1234#group.calendar.google.com',
});
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.
Whenever the user selects the calendar I need to go back to the server and refresh the data for the dates they have selected - so on next, prev, etc. buttons. I tested that the event source works if defined on the calendar - but defined this way does not get the events. How do I hook up the views, next, prev buttons with the ajax call?
viewRender: function(view, element) {
var eventSource = {
url: '/JVCalendar/GetJVCalendarEvents',
type: 'POST',
data: {
start: "01/01/2015",
end: "01/31/2015",
calendarId: "1"
},
error: function() {
alert('there was an error while fetching events!');
}
}
$('#calendar').fullCalendar('addEventSource', eventSource);
$('#calendar').fullCalendar('refetchEvents');
}
I'll add this as an answer since it's only mentioned in the comments. Credits go to #smcd. Finally found this after a lot of hassle.
fullCalendar already sends the start and end date by default. When looking in the network logs I can see the parameters being added automatically.
api/v1/schedulings/fullcalendar?start=2016-02-28&end=2016-04-10&_=1458223901062
Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
Instead of showing our events, FullCalendar creates elements starting at the current date/time. I've tried this with multiple google calendars (public, custom, etc) and always get the same result.
$('#calendar').fullCalendar({
eventSources: [{
url:'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
dataType : 'jsonp'
}]
});
See this fiddle to reproduce the issue.
http://jsfiddle.net/jcornelius/pba56nf1/
Turns out the permissions issue was an error with the Google calendar. I contacted Google support and they reset the permissions. Now with Richard Hermanson's answer above everything works.
Updated your sources and at least the example data works. Yours on the other hand seem to be invalid data or something? I'll try to help if the problem persists.
http://jsfiddle.net/pba56nf1/2/
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
//events: 'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});