I'm using JSON event source in my code. How can I switch 'evenDatasource' on existing calendar? Idea behind is to add switch to page to allow user to select calendar data source without the reload. I just need to switch eventSource on-fly. How can I do it?
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
url: '/myfeed.php', // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}
// any other sources...
]
});
Check out events as functions. If your switch calls
.fullCalendar( 'refetchEvents' ) on change and your event function reads what events to fetch from the switch you should be fine.
Related
In "FullCalendar" I could add an event using "addEventSource" by array manually, however, I could not succeed adding the event through Google Calendar ID.
$('#calendar').fullCalendar("addEventSource",{
events: [
{
title : 'event1',
start : '2019-02-01'
}
]
});
THE BELOW SNIPPET NOT GETTING THROUGH. PLS ASSIST
$('#calendar').fullCalendar("addEventSource",{
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
}
});
FYI by FUllcalendar: Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.
Firstly please ensure you followed all the steps in the documentation (https://fullcalendar.io/docs/google-calendar) beforehand otherwise it won't work.
Secondly, your object structure is wrong. The events wrapper should not be there when specifying an event source. Perhaps you confused the events option in fullCalendar as being part of the structure required for an event source object, which is documented here: https://fullcalendar.io/docs/event-source-object
Specifically it documents the structure for a google calendar to be the source:
{
googleCalendarId: 'abcd1234#group.calendar.google.com',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
So I suggest you change your code as follows, to match the documented object structure. Basically you just remove the erroneous events bit:
$('#calendar').fullCalendar("addEventSource", {
googleCalendarId: 'abcd1234#group.calendar.google.com',
});
Whenever the user selects the calendar I need to go back to the server and refresh the data for the dates they have selected - so on next, prev, etc. buttons. I tested that the event source works if defined on the calendar - but defined this way does not get the events. How do I hook up the views, next, prev buttons with the ajax call?
viewRender: function(view, element) {
var eventSource = {
url: '/JVCalendar/GetJVCalendarEvents',
type: 'POST',
data: {
start: "01/01/2015",
end: "01/31/2015",
calendarId: "1"
},
error: function() {
alert('there was an error while fetching events!');
}
}
$('#calendar').fullCalendar('addEventSource', eventSource);
$('#calendar').fullCalendar('refetchEvents');
}
I'll add this as an answer since it's only mentioned in the comments. Credits go to #smcd. Finally found this after a lot of hassle.
fullCalendar already sends the start and end date by default. When looking in the network logs I can see the parameters being added automatically.
api/v1/schedulings/fullcalendar?start=2016-02-28&end=2016-04-10&_=1458223901062
I'm having trouble adding events to fullCalendar when I specify a source parameter in the event I pass to renderEvent - what am I doing wrong?
If I specify a source, the event does not (ever) show on the calendar... Looking at fullcalendar.js v2.3.2 line 9348 Could it be that the cache.push(events) is incorrectly placed in the if statement just above?
(The scenario here is that when I add new events, I want them to become part of a particular source, not fullCalendar's internal "sticky" source).
Thanks!
Explanation
You should not specify a source property.
From event object documentation:
source: Event Source Object. Automatically populated.
A reference to the event source that this event came from
I've created a plunker with very Basic fullCalendar 2.3.2 with creation of event with source when you can check how the source property works:
So if you define an event like:
{
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
}
You can check, in the console of the plunkr, that the event receives a Source property, automatically populated, with the content:
event.source
{
events: Array[1],
className: Array[0],
origArray: Array[1]
}
Proposed solution
So for your goal you should define your events as items in an array source:
var mySource1 = [{
title : 'Source 1',
start : moment(),
allDay: false,
id: 1,
description: 'my event 1'
}];
var mySource2 = [{
title : 'Source 2',
start : moment().add(1, 'days'),
allDay: false,
id: 2,
description: 'my event from 2'
}];
And to attach them to the calendar you can:
Option a
Define in your calendar not your events, but your sources using eventSources as an array of your sources:
$('#calendar').fullCalendar({
(...)
eventSources:[mySource1, mySource2],
});
Option b
Add your source via add event source method
.fullCalendar( 'addEventSource', mySourceN );
Option c
Updating eventSource:
If you want to add dynamically an event to a specific source, the only way you can achieve it is removing and adding again the source:
So something like:
var myNewEvent: {
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
};
mySource.push(myNewEvent);
$('#myCalendar').fullCalendar( 'removeEventSource', mySource);
$('#myCalendar').fullCalendar( 'addEventSource', mySource);
Honestly, I dislike this C option, but maybe is what you need. There's an open issue with this situation in which Adam Shaw propose that solution.
I am using pnotify and loading callback function to show a notification when the fullcalendar plugin has loaded all events.
loading:function(isLoading, view){
if (isLoading === false){
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
My problems is that when ever I move to different dates it calls loading again so I am left with so many notifications shown on my screen that it becomes very unusable. How can I bypass this? Is there a way to check if a notification is active and just change the text and title of it?
You can add that logic based on the template you're using (check the template docs).
Your code would be something like
loading:function(isLoading, view){
var exists = false;
$(".ui-pnotify-title").each(function() {
if ($(this).html() == 'Finished loading events')
exists = true;
});
if (!exists) {
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
}
}
It would be better if you could use a specific id or class to detect if the notification is already shown, but this works.
Take a look at the working jsfiddle.
You can just store it in a variable, do your necessary code (like nullable/undefined checks, etc) and call "update()" (here: http://sciactive.com/pnotify/ - for example, find for 'Click Notice' and see the source)
var p = new PNotify({
title: 'Some title',
text: 'Check me out! I\'m a error.',
type: 'error',
icon: 'fa fa-times-circle'
});
// ... code ...
p.update({title: 'My new title'});
I need to fire FullCalendar on live() method. So, I tried this:
$('.full-calendar').live('fullCalendar', function(){
return { header : .... //options here }
});
But this doesn't work. Do you think is possible to achieve this?
fullcalendar is not a supported event by .live()ref. Actually, this is not an event at all (unless you created it by yourself but it wouldn't then be supported by .live().
Your full calendar creation must be triggered by a real event (click, double-click,...)
You could probably use something like:
$('.full-calendar').live('click', function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});