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!
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'm using Fullcalendar v2.4.0 and related plugin Scheduler v1.0.2 with all required dependencies. jQuery-ui is at v1.11.4.
I'm loading resources via Ajax call using Fullcalendar built-in method of:
resources: {
url: 'resources_feed.php',
type: 'POST'
}
resources_feed.php simply returns few lines of dummy data.
And for the events, using a similar built-in method of:
events: {
url: 'events_feed.php',
type: 'POST'
}
events_feed.php returning few lines of dummy data.
It all works as expected until I plug in more realistic large amount of data as resources but still keeping the events data same.
The problem I experience is that button clicks like views (Day, Week, Month), Today and left/right arrows are responding after a delay of min 2 seconds sometimes longer. It behaves as if there's a delay set for a few seconds between button click and event firing. I tried to put an alert in the onClick event and alert is displayed after this few second delay.
I tested another button outside Fullcalendar object but on the same page and that works as expected, ie firing as soon as you click the button. This rules out page or jQuery issues. Same behaviour in Firefox and Chrome.
If I switch resource loading back to dummy data then buttons start firing as soon as clicked.
I can't figure out why a large amount of data still to be fetched can affect button response even before triggering an Ajax call.
Anyone seen this before? Any pointers will be much appreciated.
Regards.
Looks like the issue is on your events_feed.php maybe you are loading all the data on every call. Maybe you are not catching properly the Start and End parameters on every button.
The feed.php should catch the start and the end on every call. Something like this:
$start = $_GET['start']);
$end = $_GET['end']);
// then select database
I had this problem when i started to use fullcalendar.
Hope it helps!
Im using Adam Shaw's FullCalendar (http://fullcalendar.io).
I'm looking for a way to show a tooltip at the mouse pointer when a user resizes an event in the calendar. I'd like it to show the actual event length, and should be updated as the user drags.
When looking in the documentation i can't seem to find any method for this.
Has someone any suggestions for this?
Thanks, Simon
You can use qtip plugin and then use it like in the documentation example for event render
In addition, to get the length you can do it with moment.js difference method as you can check in this plunker.
So finally you got something like:
eventRender: function(event, element) {
element.qtip({
content: event.end.diff(event.start, 'minutes')
});
}
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");