Render JSON events on full calendar - javascript

I'm trying to render events on the fullcalendar from the json response,
$.ajax({
url : $("body").attr("data-link")+'/calendar/events',
type : 'post',
dataType: 'json',
success: function(e){
if(e.success){
var events = [];
$.each(e.events,function(index,value){
events.push({
title : value.title,
start : moment(value.start_date).format('YYYY-MM-DD'),
end : moment(value.end_date).format('YYYY-MM-DD'),
});
});
calendar.fullCalendar( 'renderEvent', events , true);
console.log(events);
}
}
});
here's my fullcalendar set up
var calendar = $('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'Add Event',
click: function() {
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable : false,
eventLimit: true,
eventClick: function(calEvent, jsEvent, view, element) {
},
eventRender: function(event, element) {
element.attr("data-id",event.id);
},
});
In the console log.
and then it gives me this error,
Uncaught TypeError: Cannot read property 'hasTime' of undefined
any ideas, help please?

You could either call renderEvent for each event in events or add entire array as datasource
$.ajax({
url : $("body").attr("data-link")+'/calendar/events',
type : 'post',
dataType: 'json',
success: function(e){
if(e.success){
var events = [];
$.each(e.events,function(index,value){
events.push({
title : value.title,
start : moment(value.start_date).format('YYYY-MM-DD'),
end : moment(value.end_date).format('YYYY-MM-DD'),
});
});
calendar.fullCalendar( 'addEventSource', events);
}
}
});

Related

FullCalendar error : Uncaught TypeError: calendar.fullCalendar is not a function

I have been getting an error when I want to add an event on fullcalendar, my code is correct because the console detects the day I click on it.
I looked at the topics that dealt with the same error but none of them allowed me to solve this error.
Except that an error occurs:
console
And here is my code :
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
editable: true,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
events: 'http://127.0.0.1:8000/calendar',
displayEventTime: false,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Nom événement :');
if (title) {
var start = new Date().toISOString().slice(0, 10);
var end = new Date().toISOString().slice(0, 10);
$.ajax({
url: 'http://127.0.0.1:8000/calendarAjax',
data: {
title: title,
start: start,
end: end,
type: 'add',
},
type: 'POST',
success: function(donnees) {
calendar.fullCalendar('renderEvent', {
id: donnees.id,
title: title,
start: start,
end: end,
allDay: allDay
}, true);
calendar.fullCalendar('unselect');
}
});
}
},
});
calendar.on('dateClick', function(info) {
console.log('clicked on ' + info.dateStr);
});
calendar.render();
});
</script>
Thank you.

Cannot read property 'event' of undefined FullCalandar.js

https://jsfiddle.net/studovey/jvrwfzea/21/
Im getting the following error in FullCalendar.js every time I select Day view I get this error. There is an event on the below date so it throws the error.
I thought that it could be something to do with the formatting perhaps. I have looked online for solution but to no avail.
Can anyone share any throughts?
My code is the following:
function GetAppointments() {
var initialLocaleCode = 'en';
$('#calender').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
footer: true,
selectable: true,
height: 650,
events: function (start, end, timezone, callback) {
$.ajax({
type: "GET",
contentType: "application/json",
url: '#Url.Action("GetAppointmentData", "Admin")',
dataType: "JSON",
selectable: true,
locale: 'en',
titleFormat: "YYYY-MM-DD HH:mm:ss",
success: function (data) {
var events = [];
$.each(data, function (i, data) {
var start = data.start;
var end = data.end;
events.push({
eventID: data.Id,
title: data.title,
description: data.description,
start: start,
end: end,
backgroundColor: data.type.TypeColour,
textColor: 'white',
borderColor: 'white',
allDay: false,
});
});
callback(events);
}
})
},
nextDayThreshold: '00:00:00',
editable: true,
droppale: true,
nowIndicator: true,
eventClick: function (info) {
GetEventDetailByEventId(info);
}
});
$(".fc-day-header").addClass("bg-success");
$(".fc-day-header").css("color", "white");
$(".fc-button, .fc-agendaWeek-button, .fc-state-hover").addClass("bg-success");
}
// Grab individual elements from the combined HTML string. Use each as the default rendering.
// Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
$(html).each(function (i, node) {
var seg = segs[i];
var el = view.resolveEventEl(seg.event, $(node));
if (el) {
el.data('fc-seg', seg); // used by handlers
seg.el = el;
renderedSegs.push(seg);
}
});
}
function GetEventDetailByEventId(eventinfo) {
$.ajax({
type: "POST",
url: '#Url.Action("GetAppointmentById", "Admin")',
dataType: "JSON",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
'id': eventinfo.id
}),
success: function (data) {
$('#appointmentHeader').removeClass('bg-success');
$('#appointmentHeader').addClass('bg-info');
$('#btnUpdate').removeClass('d-none');
$('#btnDelete').removeClass('d-none');
$('#btnAdd').addClass('d-none');
$('#headerText').html('Update Appointment');
$('#btnBackAdd').removeClass('d-none');
$('#txtTitle').val(data.Name);
$('#txtName').val(data.Info);
$('#txtStartDate').val(moment(data.StartTime).format("DD-MM-YYYY HH:mm"));
$('#txtEndDate').val(moment(data.EndTime).format("DD-MM-YYYY HH:mm"));
$('#hdnAppointmentId').val(data.Id);
$('#drptype').val(data.type.Id);
}
})
}
Did you check whether you are getting the expected values for data.StartTime and data.EndTime that you are passing into the function? The error event of undefined might be coming from moment. I faced that once.

FullCalendar v3 - Change Event Source on View Change

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.

FullCalendar load events from JSON feed on viewRender

FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});

I´m having an issue with FullCalendar control of http://fullcalendar.io/ when having multiples "all day events"

Seems that on several entries, provides me with a link to show the remain items "+## more".
Currently when clicking on link to expand and view all items, its returning an empty dialogue.
The versión fullCalendar is: 2.1.1
The problem is with these propertys: allDayDefault: true, or in event allDay:true, when clicking on link to expand and view all items.
Im started the calendar with:
<script type="text/javascript">
$('#calendar').fullCalendar
({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
selectable: true,
selectHelper: true,
allDayDefault: true,
eventSources: [getCalData()],
});
function getCalData() {
var urlAux = baseUrl + '/pagweb/WSAgenda.asmx/test';
var source = [{}];
$.ajax({
async: false,
type: "POST",
contentType: "application/json",
data: "{}",
url: urlAux,
dataType: "json",
success: function (data) {
if (data.d != null) {
for (var i = 0; i < data.d.length; i++) {
source.push({
id: data.d[i].id,
start: new Date(data.d[i].start),
end: new Date(data.d[i].end),
title: data.d[i].title,
className: data.d[i].color,
});
};
}
else {
return null;
}
}
});
return source;
}
});
</script>
getCalData is a json request.

Categories

Resources