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);
Related
I was trying to set startParam option dynamically.
But it seems working weird by updating the key rather update value.
calendarEvents.setOption('startParam', moment().format());
calendarEvents.refetchEvents();
If I run the methods and check the form data, then the startParam will be look like the following.
2021-02-15T19:09:13-07:00: 2021-01-01T00:00:00-07:00
end: 2030-01-01T00:00:00-07:00
I guess the setOption method updates the key not value for the start params.
Why does this happen and how to fix this?
UPDATE: My calendar code
calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
headerToolbar: false,
contentHeight: 300,
initialView: 'listAll',
views: {
listAll: {
type: 'listYear',
duration: { years: 9 },
},
},
navLinks: false,
eventDidMount: function (arg) {
...
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: 'short'
},
eventSources: [{
method: 'POST',
url: '/calendar/get_all_by_id/' + id,
}],
eventSourceSuccess: function(content, xhr) {
...
return events;
}
});
calendarEvents.render();
})
It's working properly.
The startParam option sets the name of the parameter which fullCalendar sends to the server for the start value, when fetching events. It doesn't set the value. The value which is sent is always the start date of the range which the user has just navigated to. You don't need to change that value yourself, and anyway it makes no sense to try and give it a fixed value - it is adjusted dynamically by fullCalendar every time events need fetching.
What are you actually trying to achieve with this code? Are you trying to change the current date on the calendar programmatically? If so then use https://fullcalendar.io/docs/Calendar-gotoDate
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 want to set authorities on my calendar. Only certain users can update the data. While all users can only see the event and are not allowed to make any changes. I'm using select function to popup modals. Can fullcalendar be disabled? I want it to be like readonly function. Which means all users can read the data. I try to do like this :
if(#ViewBag.User == "Admin")
{
editable = true,
}
But it doesn't work. The events can still be edited since I also set that attribute inside my JSON codes for events. Is there any way to solve this? Thanks
Try this,
editable = false
and set URL for the event as
url: '/Event/Create/'
if you do not want any redirection to add use below link
url: 'Javascript:'
User this URL in events section. like this
$('#calendar').fullCalendar({
editable = false,
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-01',
url: 'Javascript:'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});
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.