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."
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.
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
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');
});
I use fullcalendar and set header right: 'month,agendaWeek,agendaDay'
I did not set the default view. When I refresh the page everytime the month view display.
How can I select the agendaDay view and refresh the page then the agendaDay view remains?
Thanks.
Get this plugin:
https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js
Add to the top of your page:
<script type="text/javascript" src="jquery.cookie.js"></script>
Then do this when you intialize fullcalendar (change 'month' to whatever you prefer as default)
var calendarView = (!$.cookie('calendarDefaultView')) ? 'month' : $.cookie('calendarDefaultView');
$calendar.fullCalendar({
defaultView: calendarView,
viewDisplay: function(view){
$.cookie('calendarDefaultView', view.name, {expires:7, path: '/'});
},
One technique is to use the getView (http://arshaw.com/fullcalendar/docs/views/getView/) on page unload and save it in the app session (via ajax maybe). And then use this session value to initialize the calendar when the page reloads. This is assuming you have an webapp.
If you need a pure client-side solution, try appending the selected view value to the query string of the next page, instead of session
Unless I'm not understanding you correctly surely you want to set the defaultView option?
http://arshaw.com/fullcalendar/docs/views/defaultView/