i would like to have my own events displaying on the calendar - along side an imported gCal link with additional events.
is this possible? what would the syntax look like?
Thanks!
You can use multiple event sources like in the question Henrique recommended
$('#calendar').fullCalendar({
eventSources: [
'/gCalFeed',
'/feed2'
]
});
gCalFeed would be the URL from the gCAL feed and feed2 a feed you created that delivers your events, for instance as a JSON, to full calendar
Related
I'm using google calendar to display events using fullcalendar, however they all show
like this.
When I click on one of those lines they do redirect to the correct event in google calendar - So the events are recognised. I've used lots of different javascript examples but they all do the same, this is the basic one i've been using:
$(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'myAPI',
events: 'myCalendarID'
});
});
I also copy pasted one of the full calendar demos (and changed my API key) but it still displays the same as the image above.
Is there a way to show certain events in my calendar as full background blocks of color? For example, if an event is an all-day event, it's date square will have a background color of red. All other events will look like normal events.
(Im using FullCalendar synched to a google calendar)
To make an event appear as a full block of colour within its slot the way you described, you can use the "background" events feature. Since you're using Google Calendar and don't have full control over the JSON data provided, you'll have to add the necessary property via the eventDataTransform callback, which allows modification of the event data after it's been downloaded but before it's rendered onto the calendar. Something like this I think (as an option in your calendar config):
eventDataTransform: function(event)
{
if (event.allDay == true) event.rendering = "background";
return event;
}
See https://fullcalendar.io/docs/eventDataTransform and https://fullcalendar.io/docs/background-events for details.
use rendering: 'background' in events
I'm trying to display multiple Google calendars with Full Calendar, like so:
eventSources: [
{
googleCalendarId: 'a.calendar.google.com'
},
{
googleCalendarId: 'b#group.calendar.google.com'
},
{
googleCalendarId: 'c#group.calendar.google.com'
}
]
All three calendars have the same settings and when I view the calendar at https://www.google.com/calendar/embed… I can see events from the different calendars displayed, but when I view my Full Calendar implementation, I can only see events from one of the calendars.
If I comment out the source of the calendar with events, my calendar shows no events.
Do I need to set up different API keys for each calendar? I haven't done anything that specifically ties the calendar that is working to the API key I've set up so far.
I'm trying to use FullCalendar to render the events from a Google calendar on a webpage. I want the starting date/time, description, and place. Future events in one div and past events in another.
Right now I have FullCalendar working to its basic functionality: a complete calendar on my page that displays my gcal events.
So my question is: how can I access the data and render it as text on my page? There is a block of code in the gcal.js file that looks like this
events.push({
id: entry['gCal$uid']['value'],
title: entry['title']['$t'],
url: url,
start: start,
end: end,
allDay: allDay,
location: entry['gd$where'][0]['valueString'],
description: entry['content']['$t']
});
});
how would I go about accessing this events array?
Hope this question isn't too vague, thanks for your help.
See: clientEvents
You can also use a function, like:
mycal.fullCalendar('clientEvents', function(ev) {
// ev is Event object...
});
I have been trying to fetch event data from a Google calendar using FullCalendar for hours now. I'd like the data to be in an object so I can use it outside of the full calendar appearing on my page, and I can't seem to get it right.
Here is the code I have:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'https://www.google.com/calendar/feeds/wrchapin%40gmail.com/public/basic',
});
var events = $('#calendar').fullCalendar( 'clientEvents' );
console.log(events.length);
});
The calendar appears as it should on the page, but the console shows a length of 0. What is going on? Am I using the clientEvents method improperly?
Thanks for any help you can offer.
The problem here is that the call to fetch the clientEvents happens before the calendar has loaded the events. That's the reason the events array is blank.
You can easily solve this by using the loading callback of the calendar. Take a look at this fiddle:
http://jsfiddle.net/100thGear/gt8F9/
Let me know if this helps!