I'm trying to use FullCalendar v2.4.0 (with jQuery 1.10.2 and moment.js 2.1) in order to display events that are stored in a database.
I'm using json to send events to FullCalendar.
I have some problems of duplicated events in the 'agendaWeek' view.
Everything is working properly for the other views ('month', 'basicWeek', 'basicDay', 'agendaDay').
As i read on stackoverflow, I tried to remove the event source, to remove events,... but i'm still facing the problem.
Here's how the code looks like :
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=date("Y-m-d")?>',
defaultView: 'agendaDay',
timeFormat: 'HH:mm',
displayEventEnd: true,
events: {
url: '/events_getlist_json.php',
type: 'GET',
cache: false,
error: function() {
alert('there was an error while fetching events!');
},
success: function(data) {
$(data).each(function(index) {
console.log( index + ": " + data[index].start );
})
}
}
});
$(document).ready(function() {
setTimeout(function(){
$('#calendar').fullCalendar('render');
}, 100);
});
The console log returns 2 events : "0: 2015-08-24T11:00:00" and "1: 2015-08-26T12:30:00" but i can see 4 of them on the calendar.
If you have any idea why duplicates happen in 'agendaWeek' view only, and how to remove them, it would be really nice to help.
Thank you in advance.
edit : added version of the 3 scripts
This was worked out in the comment between the OP and I.
Fullcalendar 2.4.0 conflicts with momentjs 2.1 causing duplicate events to appear in the agendaWeek view. Upgrade to the latest momentsjs to fix the issue.
Related
I am using full calendar in my angular 8 app. Everything is working fine, but I want to call a function whenever the currentView of calendar changes. that is, I want to call a function/event whenever I change its view from month to week, or week to days.
For clarity, I want to detect view template changes (not date range changes). And by detecting it I want to highlight the button of respective current view.
This is my html code.
<p-fullCalendar #fc [events]="allEvents" [options]="options"></p-fullCalendar>
This is my .ts code
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
defaultDate: moment().toDate(),
themeSystem: 'yeti',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}, dateClick: (e) => {
this.dateClicked(e);
}, eventClick: (e) => {
this.eventClicked(e);
},
}
In fullCalendar 4 you can use the viewSkeletonRender callback - this runs whenever a new view template is loaded.
viewSkeletonRender: function(info)
{
console.log(info); //replace with whatever code you need.
}
I'm using Fullcalendar v4 like this. Events are loaded correctly, but when I manually add a new one (it is also saved to SQL database via ajax call), then I change month and return back, this event is rendered twice. I'm not sure what cause this, because when I change months again, event is still doubled only, not trippled.
I've tried set lazyLoading or cache to false and also, for example, remove all events before rendering with $('.fc-event').remove(); but it did not help.
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
defaultView: 'resourceTimeline30',
views: {
resourceTimeline30: {
type: 'resourceTimeline',
duration: { days: 30 }
}
},
editable: false,
selectable: true,
resources: [ ... ],
events: 'https://www.example.com/?fullcalendar=load',
/*
// did not help
lazyLoading: true,
events: {
url: 'https://www.example.com/?fullcalendar=load',
cache: false,
extraParams: function() {
return {
cachebuster: new Date().valueOf()
};
}
}
*/
});
calendar.render();
So, if anybody needs it, according comments above, the working solution is:
Replace:
events: 'https://www.example.com/?fullcalendar=load',
With
eventSources: [{
'id': 1,
'url': 'https://www.example.com/?fullcalendar=load'
}],
And use that ID as second parameter in addEvent()
calendar.addEvent(event, 1);
Is it possible to send output to email instead of
<div id="fullCalendar" ></div>
after a full night, surfing the web, i cant find the solution, i'm no jquery programmer, so i realy hope some one can point me in the right direction
$(function() {
'use strict';
$('#fullCalendar').fullCalendar({
locale: 'nl',
defaultView: 'listWeek',
events: 'admin_app/kalender_load.php',
eventColor: '',
selectable:true,
selectHelper:true
});
});
$.post("email.php", { data : $("div#fullCalendar").html() }, function(result){
/* handle results */
});
I aspect to send the events from upcomming week true email,
but all i get is an empty mail
fullCalendar renders its content asynchronously - both the view and the events are rendered in separate asynchronous processes. You are trying to capture the content before it has been drawn (and in the case of the events, before the data has even been downloaded from your server).
You can use the viewRender callback to cause your code to wait until the calendar has been rendered.
Or if you need to include event data (which I guess you might) then you should use eventAfterAllRender instead, which waits until your events have been downloaded and drawn as well (this always occurs after the view has been rendered):
$(function() {
'use strict';
$('#fullCalendar').fullCalendar({
locale: 'nl',
defaultView: 'listWeek',
events: 'admin_app/kalender_load.php',
eventColor: '',
selectable: true,
selectHelper: true,
eventAfterAllRender: function(view) {
console.log($("div#fullCalendar").html())
$.post("email.php", {
data: $("div#fullCalendar").html()
}, function(result) {
/* handle results */
});
}
});
});
Demo: http://jsfiddle.net/baqdx94e/2/
I´ve recently changed my fullcalendar version v3.4 to v4 because there are some new options that i need, but i normally use ajax whenever i need to fetch something and i´m used to it. My problem is, i don´t know how to load the events after getting this way:
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pt',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
buttonText: {
today: 'Hoje',
listWeek: 'lista',
},
events: {
url: '/agenda/getEvents',
method: 'GET',
extraParams: {
data: { "_token": "{{ csrf_token() }}" }
},
}
});
calendar.render();
});
The events are being fetch correctly, but now what?!, where do i implement a then or success function in order to load them?
Thanks for your time, regards.
The documentation is not clear, but you need to have the result of /agenda/getEvents (or /myfeed.php from documentation) in a valid JSON format of Event Object's (https://fullcalendar.io/docs/v4/event-object), example:
[
{
"id": "a",
"title": "my event",
"start": "2018-09-01"
}
]
You can also have custom properties, but you'll then need to use the callback eventRender (https://fullcalendar.io/docs/eventRender) to manipulate the element with your event data.
There are also other callbacks that may be useful, see https://fullcalendar.io/docs/event-display and https://fullcalendar.io/docs/v4/event-parsing clarifies it much better.
Edit
OP was actually looking for https://fullcalendar.io/docs/v4/events-function, the v4 version registration of the callback is different from previous versions.
I am trying to display FullCalendar withing a certain date range. To do so I added the following visibleRange option to my code but it is not working. The calendar is simply not displaying.
this.$calendar.fullCalendar({
//other settings
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
},
duration: { days: 7 },
//other settings
});
Any idea how I can achieve this?
Thanks
Using momentjs 2.18.1, jquery 3.2.1, fullcalendar 3.4.0 this shows the view from 5/22 through 5/28:
$('#calendar').fullCalendar({
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
} // Don't use duration in combination with visibleRange? Appears to override
/*,
duration: {
days: 7
}*/
});
Demo # https://jsfiddle.net/ez33y8gv/