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...
});
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.
I'm using FullCalendar and I'm trying to display the calendar view automatically without click on the today button each time. For do this I've inserted in the initialization this stuff:
$(document).ready(function()
{
$('#calendar').fullCalendar({
aspectRatio: 2.40,
viewDisplay: 'month'
})
});
But the calendar isn't displayed, I must click on today button, I want that the calendar is displayed automatically, without click on today button each time. How can I do this?
The "viewDisplay" parameter should be used in this way:
http://fullcalendar.io/docs1/removed/viewDisplay/
Keep in mind the following comment:
"This option has been deprecated in favor of the viewRender callback."
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
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!
How can i trigger clicking of the "today" button by code in FullCalendar? If I where to this by an external button?
http://arshaw.com/fullcalendar/docs/current_date/today/
You have access to fullCalendar, so you can do something like this:
$('#external-button').on('click', function() {
$('#calendar').fullCalendar('today');
});
Without actually looking at the code, I would assume that the "Today" button is hooked to a JQuery or Javascript method within the FullCalendar code. Just call that method.
In case the documentation URL posted above goes dead...
Moves the calendar to the current date.
.fullCalendar( 'today' )
Example using today with an external button:
$('#my-today-button').click(function() {
$('#calendar').fullCalendar('today');
});