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')
});
}
Related
Intro:
Primefaces p:schedule uses FullCalendar, so I must ask if FullCalendar can do what I need. If FullCalendar cannot then I will know that Primefaces cannot either.
Question: (short to be clear)
Is there any way to customize event label?
I would like to have label (without hour) with three lines, for example:
Negiotiations
Scott Tiger
level: hard
As you see second line is bold, and in third line we have italic text. Is possible to achieve something like this out of the box? If not any sugestions how to do that?
An old post, but my question was the same.
Now with FullCalendar version 2.7.3 you can modify event label with eventRender attribut.
See the example :
var calendar = $("#calendar").fullCalendar(
{
//...
eventRender: function(event, element) {
console.log(event);
console.log(element);
element.text("a bigger text for this object, you can modify element as you want now with another label");
},
//...
}
I hope my answer will help.
After checking source code (version 1.6.4) the answer is:
This is not possible
In order to achieve this, source code has to be modified.
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!
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");
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');
});