I'm bit new to Fullcalendar, i have managed to implement Fullcalendar.
Thanks for the awesome component.
I just have a doubt regarding the width that shown for events in agendaDay and agendaWeek view.
If looked in to fullcalendar in arshaw main site
We can see
http://img28.imageshack.us/img28/2307/21362507.png
There is a gap after events, how can we get rid of that and make events take fullwidth based on th View.
I have looked in to the function renderSlotSegs in base file (availWidth).
Does anyone accomplished what i was looking.
Is there any config for that?
Thanks in Advance
availWidth = Math.max(availWidth+3,
availWidth*.95);
I have replaced the line(2861) line with above code to make it work.
Related
My template came with FullCalendar and the the calendar is showing demo events - I am trying to find out where they come from - where can I change the source from - basically I want a blank Calendar. Thanks
Simply remove
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
This line from your js file, Calendar will not have any event rendered on it..!!
Happy Coding....:)
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')
});
}
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 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");
I'm trying to build a firefox extension which can get rss feeds and display them in a popup panel. But I'm not aware about how to display feeds in a panel(I know how to display static text).Because the feed is varying all the time.
Any help regarding this matter will be appreciated.
Thanks in advance.
How about using setInterval to call a function that redraws the panel at the time interval you specify?
You can create DOM elements inside a XUL popup panel using JavaScript, but you have to remember that the panel requires the XHTML namespace:
<panel id="your-id" noautohide="true" xmlns:html="http://www.w3.org/1999/xhtml">
and instead of using:
document.createElement("p"); //for example
you would need to use:
document.createElementNS("http://www.w3.org/1999/xhtml","html:p");
You can get the popup reference by id and just create and append elements as you need them. Then the following might help:
https://developer.mozilla.org/en/XUL/PopupGuide/OpenClose: