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.
Im new to javascript and I have this code where I should pass or convert to jQuery. I have tried some code but it doesn't work. How can I do it properly?
Here is what it should look like:
<script>
$('#calendar').fullCalendar({
defaultDate: '2017-10-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Juan Dela Cruz',
start: '2017-10-01T10:30:00',
},
{
title: 'Juan Dela Cruz',
start: '2017-10-12T10:30:00',
},
{
title: 'Juan Dela Cruz',
start: '2017-10-27T12:00:00'
}
]
});
and here is what I have tried:
<script>
var x = [];
#foreach(var item in Model)
{
#:x.push(title='#Html.DisplayFor(x=>item.Patient.LastName)', start='#Html.DisplayFor(x=>item.ScheduleDate)')
}
$('#calendar').fullCalendar({
defaultDate: '2017-10-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: x
});
You're iterating correct the Model using #foreach statement.
The problem is at this line:
#:x.push(title='#Html.DisplayFor(x=>item.Patient.LastName)', start='#Html.DisplayFor(x=>item.ScheduleDate)')
You have to push an object in following way:
#:x.push({title:'#item.Patient.LastName', start:'#item.ScheduleDate'});
The statement foreach in jQuery is $.each and this a simple sample to do that :
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
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 am working on a web app using the FullCalendar JQuery plugin to display the absence/presence of workers each day in a company.
I need to display several types (or fields) of information in each day. For example, I would like to display for each day: a Title (ex. "John is absent"), and Percentage(ex, "95% assistance"). And I would like this percentage to appear with a different format, on the bottom right corner of each day's box.
As far as I've seen, the possible fields to describe an event are basically these ones:
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true
}
]
Is there any way to add more fields (like the porcentage of assistance) to a FullCalendar day?
Edit: thanks to Henrique C's answer I managed to do it. Just to complete a little more the answer I would like to add that besides, doing what Henrique said in his answer, it is also necessary to do something like this:
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
});
Non-standard Fields This was taken from Fullcalendar website.
In addition to the fields above, you may also include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks such as eventRender.
You can add any fields you want, fullcalendar will not change them.
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true,
description: 'Hurrayyyyyyyyyy',
myotherspecialfield: ':P'
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true,
description: 'Hurrayyyyyyyyyy'
myotherspecialfield: ':P'
}
]