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);
}
});
});
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',
});
I have a fullcalendar getting the feed from public google calendar, and works perfectly but I need that the events are not clickable, and right now it open the event info on google.
I try to use "evenclick" but no success:
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
I search on answered questions but only find a couple of ones that seem outdated
thx in advance.
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}
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
I'm trying to include a FullCalendar into a website, synchronized with Google Agenda. I call the function like this:
$(document).ready( function() {
$('#calendar').fullCalendar({
events: { url: "http://www.google.com/calendar/feeds/laporte.julie%40gmail.com/public/basic" }
});
});
The calendar is shown well, but not the data into it. My config in Google Agenda is good. Could someone help me please ?
Do you include: ?
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
You can reference here : http://arshaw.com/fullcalendar/docs/google_calendar/ for more info on the subject.