I'm trying to use FullCalendar.js in my application, the problem is that I'm going to add events to the calendar from db, and I don't know how to pass the json to it, example:
The way that works:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [
{
title: 'Event 1',
start: '2021-08-01'
},
{
title: 'Event 2',
start: '2021-08-07',
end: '2021-08-10'
},
],
selectable: true,
editable: true,
});
What I need to do is to manipulate the json to add my events to the calendar, I tried to do in this way, but it did not work:
var obj = [{title: 'Event 1',start: '2021-08-01'},{title: 'Event 2',start: '2021-08-07',},];
var json = JSON.stringify(obj);
$(document).ready(function() {
$('#calendar').fullCalendar({
events: json,
selectable: true,
editable: true,
});
Can someone help me with that ? Thanks a lot!
I'm using FullCalendar v3 (latest) with a PHP backend.
I'm returning a JSON array from the backend broken up into 2 arrays. The first contains event details (a list of orders for the day, with the order# as the title), and the second contains a daily summary (with a sum of orders and work hours as the title). The array looks like this:
{"events":[{"id":709989,"item_no":"ABC123","title":709989,"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5},{"id":709990,"title":709990,"item_no":"ABC345","color":"red","start":"2019-05-15","end":"2019-05-15","allDay":true,"total_hours":5.7,"remaining_hours":3.2}],"summary":[{"id":338823,"title":"Orders: 14\rHours:28.33\rRemaining Hours:13.33","start":"2019-05-14","end":"2019-05-14","allDay":true},{"id":338824,"title":"Orders: 3\rHours:14.2\rRemaining Hours: 12.2","start":"2019-05-15","end":"2019-05-15","allDay":true}]}
There are other properties but these are the basics.
What I'm trying to do is change the array that's used as the event source depending upon which view is selected. I've tried custom event rendering, custom view rendering, multiple event sources (even though it's expensive from a data point-of-view, the # of records aren't so numerous that it greatly effects performance).
The custom view name is customMonth. When this view is selected, I just want to render the summary data (from the summary array). If any of the other views are selected (I'm using basicWeek, month and listWeek), render the events array.
let vname;
$("#calendar").fullCalendar({
defaultDate: new Date(),
defaultView: 'month',
eventRender: function(eventObj, $el, view) {
let n = view.name;
if(n=='customMonth')
{
vname = 'customMonth';
$el.popover({
title: eventObj.title,
content: eventObj.total_hours,
html: true,
trigger: 'hover',
placement: 'auto',
container: 'body'
});
} else {
vname = n;
$el.popover({
title: "Work Order " + eventObj.title,
content: '<strong>Item#</strong>: ' + eventObj.item_no + '<br />' + '<strong>Total Hours</strong>: ' + eventObj.total_hours + '<br />' + '<strong>Remaining Hours</strong>: ' + eventObj.remaining_hours,
html: true,
trigger: 'hover',
placement: 'auto',
container: 'body'
});
}
},
events: function(start, end, timezone, callback){
$.ajax({
url: '/myendpoint',
type: 'POST',
dataType: 'json',
data: {
action: 'get-calendar-summary',
cell: selected_cell
},
success: function(data) {
let events = [];
if(vname=='customMonth') {
obj = data.summary;
$(obj).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('dept_due_dt'),
end: $(this).attr('dept_due_dt'),
total_hours: $(this).attr('total_hours'),
remaining_hours: $(this).attr('remaining_hours'),
order_count: $(this).attr('day_order_count'),
has_late_order: $(this).attr('has_late_order'),
allDay: true,
earliest_date: $(this).attr('earliest_date')
});
});
} else {
obj = data.event_results;
$(obj).each(function() {
events.push({
id: $(this).attr('id'),
color: $(this).attr('color'),
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
earliest_date: $(this).attr('earliest_date'),
item_no: $(this).attr('item_no'),
total_hours: $(this).attr('total_hours'),
remaining_hours: $(this).attr('remaining_hours')
});
});
}
callback(events);
},
error: function(err) {
console.log(err);
}
});
},
views: {
customMonth: {
type: 'month',
buttonText: 'overview'
}
},
viewRender: function(view, el) {
let lastview;
if(view.name=='customMonth') {
if(lastview == 'customMonth') {
return false;
} else {
view.unrenderDates();
view.renderDates();
$("#calendar").fullCalendar('rerenderEvents');
}
lastview = 'customMonth';
} else {
if(lastview=='customMonth') {
view.unrenderDates();
view.renderDates();
$("#calendar").fullCalendar('rerenderEvents');
}
lastview = view.name;
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month,listWeek,customMonth'
},
themeSystem: 'bootstrap3',
timeZone: false,
weekends: false,
//tried with and without lazyFetching
lazyFetching: true
});
I'd appreciate any guidance. I've searched StackOverflow (this seems like the closest, but I followed exactly and it didn't work (switching out viewDisplay for viewRender)), Github, and all other sources I can think of.
Here a simplified example of what you are trying to achieve (I hope I well understand your problem) :
HTML :
<div id='calendar'></div>
Javascript :
$(document).ready(function() {
var ev1 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 1',"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
var ev2 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 2',"color":"blue","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
$('#calendar').fullCalendar({
defaultDate: new Date(),
defaultView: 'month',
viewRender: function(view) {
if(view.type === 'basicWeek') {
$('#calendar').fullCalendar( 'removeEventSource', ev1 );
$('#calendar').fullCalendar( 'addEventSource', ev2 );
return;
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month,listWeek,customMonth'
},
});
$('#calendar').fullCalendar( 'addEventSource', ev1 );
});
And the codepen to try it.
It uses the callback function viewRender() to detect when a view change and addEventSource()/removeEventSource() to change the data. So when you change the view from month to week it will change the source events.
I like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
How do I add an event into another event?
example
$('#calendar').fullCalendar({
events: [
{
start: new Date(),
end: new Date(),
events: [ {}, {} ] // ???
}
]
});
see screenshot
This is not possible without heavy custom modifications. Very much beyond the scope of an SO question.
The closest you can get easily is to use background events as "parent" events and regular events as child events. Something like the following:
var sourceEvents = [
{
id: 1,
start: moment(),
end: moment().add(6,'h'),
childEvents: [{
start: moment().add(1,'h'),
end: moment().add(2,'h'),
}, {
start: moment().add(3,'h'),
end: moment().add(5,'h'),
}],
}
];
$("#calendar").fullCalendar({
defaultView: "agendaWeek",
events: function( start, end, timezone, callback ) {
var events = [];
sourceEvents.forEach(function(event){
event.rendering = "background";
events.push(event);
event.childEvents.forEach(function(childEvent){
// you could do some checks to make sure they are in bounds
// you could also do some color coding here
childEvent.parentId = event.id;
events.push(childEvent);
});
});
callback(events);
},
});
JSFiddle
I'm using the fullCalendar jQuery plugin and it has options for adding events to the calendar as such:
$('#calendar').fullCalendar({
editable: false,
events: [
{
title: 'Just some random event',
start: '2011-04-30'
},
{
title: 'Long Event',
start: '2011-05-01'
}
]
});
I'm trying to implement this into a Drupal 7 view. I will have loop through a list of elements and grab the hidden timestamp to populate the calendar. I know how to loop through the elements and grab the values, but I'm not sure how to add the values to an array I could use to populate the events option.
Create an empty array:
var events = [];
Then you can add objects to it in your loop:
var title = "Just some random event";
var start = "2011-04-30";
events.push({ title: title, start: start });
Now you can use the array in the calendar:
$('#calendar').fullCalendar({
editable: false,
events: events
});
Have you tried something like that?
var yourEventsArray = [];
$.each(data, function(index, value) {
yourEventsArray.push({
title: value.title,
start: value.timeStamp
});
});