In fullcalendar document , They give example for getting all events in javascript or jquery. But I could not find in vuejs(https://fullcalendar.io/docs/Calendar-getEvents)
Please any one give example of get all events in vuejs
I got the answer
use ref on component
<FullCalendar schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
:events="events"
:businessHours="businessHours"
ref="calendar" />
and add this on your method
let calendarApi = this.$refs.calendar.getApi();
console.log(calendarApi.getEvents())
Related
I am trying to wrap FullCalendar React component with my own functional React component with useContext hook to access MobX store (I might use the store in other components eventually) and observer() to make it react to changes in the store. My component reacts as I would expect, but I have trouble making the FullCalendar component render after a change.
I've tried finding a solution, wrapping <FullCalendar> in <Observer>, playing with autorun() and reaction() but nothing worked. I have to be missing something
This sandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 shows a simplified version of my solution so far.
Clicking the button at the top adds an event to the observable store, which gets shown in a list below it. But the calendar doesn't show the new event.
Weirdly enough if I make a change in the code, save it, the CodeSandbox causes the render and the events show up in the calendar.
Thanks to #ADyson, I found a solution. Instead of passing a static list of events to the FullCalendar component
events={store.events}
I can pass an event fetching function. So in the most trivial case, I can just pass the events from the store to the successCallback function and it works.
events={(fetchInfo, successCallback, failureCallback) => {
successCallback(store.events);
}}
I've updated the CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 as well.
I'm trying to render images and each images should be clickable. I tried to write a code below. However, the click events fires when a user access to the component. Can you explain why is it happening?
the code that I wrote is here
When I use a callback function, it worked out!
events={{click: () => this.props.addToCart(item.product_id)}}
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");