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.
Related
I'm not sure if what I'm trying to do is the correct/valid approach to what I'm trying to accomplish; essentially, I'm retrieving data from a db via an ajax call, I want this data to populate a js library where the layout is something like
data[
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
},
]
is there any way I can populate the code inside 'data' on the fly?
I was thinking with a loop to populate a variable which would hold the data and placing it like so
//this is hard coded, but the idea is that a loop would populate this with the necessary information
let items = "
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
}";
data[
items
]
Would this be a valid approach?
thanks in advance!
UPDATE:
For clarification, this what I have
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}
]
});
What im trying to achieve is something like this
let allEvents = "
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}";
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
allEvents;
]
});
Would this be possible?
So, closing this question, thanks to #DaveNewton for the insight, it really clarified what I was supposed to do; I apologize for the confusion, my thought process essentially revolved around 'echoing' or 'printing' code in php.
my approach was:
$.ajax({
type: "GET",
url: filethathandlesrequest.php,
data: {
data_to_be_sent: 'data',
},
success: function(response) {
response = JSON.parse(response);
eventsGotten = response.return_result;
//this is where I create the object
let eventsToDisplay = [];
for (let index = 0; index < eventsGotten.length; index++) {
const element = eventsGotten[index];
let singleEvent = {title: element.description, start: element.start_date, end: element.end_date};
eventsToDisplay.push(singleEvent);
}
if (response.return_code === 0) {
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function() {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: eventsToDisplay // <-- this is where I use it; and it works!
});
});
}
} else { //you can ignore this, this is just to not display anything if my ajax request fails
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function () {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: []
});
});
}
}
});
It seems you are asking if you can import data from a database and populate a JSON array in Javascript with it. The answer would be yes. In fact, I do this routinely to create Javascript front ends that can be quickly rendered and only talk to the database when necessary so you're not waiting on it. You can use Jquery ajax calls to retrieve and write data. I like to have local variables with JSON formatted data which I use to run the app. The app can quickly read and write changes to these JSON arrays. Keep in mind if the page is reloaded or fails all the data to that point will be lost and the user will have to start over so you need to store data to the database at strategic intervals. You can also use HTML localStorage to store data in the browser itself. I've found this an efficient way to build single-page Javascript apps without resorting to React or some of the other frameworks. It's not as efficient though, but easier to code and maintain.
The approach I would take is to define a particular DOM element as a parent / container for the DOM elements which will represent each item. Iterate over the items array in your ajax response, and create DOM elements with jquery for each item. Something along the lines of $('<div>${currentItem.name}>/div>').appendTo(containerDiv);
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'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.