FullCalendar won't load events - fail to parse JSON - javascript

I had a previous version of fullCalendar and it was working perfectly, the code for it is below:
$('#calendar').fullCalendar({
events:
{
url: '/modules/ajax/ajax_handler.php',
method: 'POST',
data: {
action: 'getBookingEventInfo'
},
success: function(response) {
console.log(response);
},
failure: function() {
alert('there was an error while fetching events!');
},
},
header:
{
center: 'month,agendaWeek,list'
},
minTime: '9:00:00',
maxTime: '23:00:00',
allDaySlot: false,
aspectRatio: 2.5
});
But I have just upgraded to v5 and have attempted to get the events through the same method and i get a response of 0 which implies the php query didn't work but it is working. Here is the current code:
New calendar
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events:
{
url: '/modules/ajax/ajax_handler.php',
method: 'POST',
data: {
action: 'getBookingEventInfo'
},
failure: function() {
alert('there was an error while fetching events!');
},
},
header:
{
center: 'month,agendaWeek,list'
},
minTime: '9:00:00',
maxTime: '23:00:00',
allDaySlot: false,
aspectRatio: 2.5
});
calendar.render();
});
PHP:
function getBookingEventInfo($connection, $premisesCode) {
$dates = array();
$query = "SELECT reservation_date, count(*), r.start_time, r.end_time FROM bookings b JOIN reservation_time_data r ON r.id = b.reservation_time
WHERE premises_code = ? AND reservation_processed NOT IN ('no-show', 'removed') GROUP BY reservation_date";
if($stmt = $connection->prepare($query)){
$stmt->bind_param('s', $premisesCode);
$stmt->execute();
$stmt->bind_result($date, $count, $startTime, $endTime);
while($stmt->fetch()){
$dates[] = array(
"title" => $count." reservations.",
"start" => formatDate($date, 14)." ".$startTime,
"end" => formatDate($date, 14)." ".$endTime,
"url" => "/rapido/view-reservation-queue/".formatDate($date, 14)
);
}
$stmt->close();
}
return json_encode($dates);
}

Related

data through ajax for tagify whitelist

I'm trying to get the data through ajax for tagify whitelist. but I get the following mistake
ReferenceError: Can't find variable: clist
code is:
$.ajax({
url: '/ajaxget/tags',
method: 'GET',
data: {
<?= csrf_token() ?> : '<?=csrf_hash()?>'
},
success: function(response) {
var clist = response;
//alert(response);
}
});
var input = document.querySelector('input[name="tags"]');
tagify = new Tagify(input, {
enforceWhitelist: true,
whitelist: clist,
maxTags: 5,
dropdown: {
maxItems: 5,
classname: "tags-look",
enabled: 0,
closeOnSelect: false
}
});
when I test it with "alert (response);" displays the data - ['123','333','763',asd']

You are trying to access a local variable from callback response as global variable.
$.ajax({
url: '/ajaxget/tags',
method: 'GET',
data: {
<?= csrf_token() ?> : '<?=csrf_hash()?>'
},
success: function(response) {
var clist = response;
populateList(clist);
}
});
function populateList(clist) {
var input = document.querySelector('input[name="tags"]');
tagify = new Tagify(input, {
enforceWhitelist: true,
whitelist: clist,
maxTags: 5,
dropdown: {
maxItems: 5,
classname: "tags-look",
enabled: 0,
closeOnSelect: false
}
});
}

How to render events for selected user from select list on fullcalendar

I want to render only events assigned for a specific user. At start fullcalendar render events for logged user (it works). Further, I am using selectlist to send choosen userid to controller. In response I get json with all events of selected user.
I've tried to use 'eventSources', but when I try to call function with selected events, I can't use 'callback' cause of error in console: "Uncaught TypeError: callback is not a function at Object.success"
I do the following:
fullcalendar init
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 700,
header: {
left: 'agendaDay,agendaWeek,month',
right: 'none'
},
eventRender(event, $el) {
$el.qtip({
content: {
title: event.title,
},
hide: {
event: 'unfocus'
},
show: {
solo: true
},
position: {
my: 'top left',
at: 'bottom left',
viewport: $('#calendar-wrapper'),
adjust: {
method: 'shift'
}
}
});
},
eventSources: [
getEvents,
getAnotherUserEvents
],
});
Function with events of logged user:
function getEvents(start, end, timezone, callback) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
url: apiUrl + '/getevents',
type: 'GET',
dataType: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
color: entry.color,
user: entry.users,
id: entry.id
});
});
}
callback(events);
},
});
};
Function with events of selected user (data contains selected user Id)
function getAnotherUserEvents(start, end, timezone, callback, data) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
type: 'POST',
url: apiUrl + '/GetAnotherUserEvents',
dataType: 'json',
data: {
"Id": data.id,
},
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
});
});
}
callback(events);
},
})
}
Do you have any ideas how can I display only events of selected user?

justGage.js loading data with AJAX call and MySQL

I'm a little bit new with justGage.js and I would like to load some data from MySQL. this is my gage code:
var g3 = new JustGage({
id: "g3",
value: 0,
min: 0,
max: 1000,
title: "Scripts Started Today",
label: "",
levelColors: ['#1ab394'],
levelColorsGradient: false
});
...and the AJAX call is this:
(function updateScripts() {
$.ajax({
type: "GET",
url: '#Url.Action("GetQueryResult")',
context: document.body,
data: {
querySetName: 'dashboard-script-statistics',
queryName: 'NumOfStartedScript'
},
success: function (serveData) {
serveData = JSON.parse(serveData);
if (serveData.Success) {
$("#stat-7-value").html(serveData.Result.NUM_SCRIPT_STARTED_TODAY);
g3.refresh(serveData.Result.NUM_SCRIPT_STARTED_TODAY);
} else {
$("#stat-7-value").prop(serveData.ErrorMessage);
}
},
error: function (xhr) {
$("#stat-7-value").attr('title', 'Error Status: ' + err.status);
},
complete: function () {
setTimeout(updateScripts, 2000);
}
});
})();
It's putting a 0 instead of 3. I checked the data and it's fine. But the value presented is 0.

How to add resources in jQuery full calendar dynamically through a JSON Array

I have a updateCalendar() function which adds the events dynamically but I'm unable to do it for resources. I have a JSON resource Array which I need to load in the resources[] but there is no way I can do it. I have tried it by getting the resource array through URL but it also not working.
Here is my piece of code:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'resourceDay',
editable: true,
droppable: true,
resources: {
url: "${pageContext.request.contextPath}/protected/appointment/getResourceList",
type: "GET"
},
events: [],
// the 'ev' parameter is the mouse event rather than the resource 'event'
// the ev.data is the resource column clicked upon
selectable: true,
selectHelper: true,
select: function(start, end, ev) {
console.log(start);
console.log(end);
console.log(ev.data); // resources
},
eventClick: function(event) {
var value = '${scheduleByLocationPage}';
document.getElementById("scheduleByLocation").action = 'FetchAppointmentDetails?id=' + event.id
+ '&problemAppointment1=' + event.problemCode + '&referredFrom=' + value;
document.getElementById("scheduleByLocation").submit();
console.log(event);
},
eventDrop: function(event, delta, revertFunc) {
console.log(event);
}
});
updateCalender();
$('#locationID').change(function() {
updateCalender();
});
$('#searchDate').datepicker({
onSelect: function() {
updateCalender();
}
});
function updateCalender() {
var selectBox = document.getElementById("locationID");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
var serviceName = selectBox.options[selectBox.selectedIndex].text;
var date = document.getElementById("searchDate").value;
var eventArray = [ [] ];
var title = '';
var start = '';
var end = '';
var allDay = '';
var date1 = '';
var id = '';
var problemCode = '';
var d = new Date();
var n = d.getTimezoneOffset();
var goCalndarDate = '';
$('#calendar').fullCalendar('removeEvents');
$('#scheduleFor').html('Schedule for ' + serviceName + ' on ' + date);
$('#calendar').fullCalendar('removeEvents');
$.ajax({
type: "GET",
url: "${pageContext.request.contextPath}/protected/appointment/ScheduleByLocation",
data: {
locationID: selectedValue,
filterDate: date,
browserTimeZone: n
},
success: function(response, status, xhr) {
eventArray = JSON.parse(xhr.getResponseHeader('eventArray'));
goCalndarDate = eventArray[0].searchDate;
$('#calendar').fullCalendar('gotoDate', goCalndarDate);
for (var x = 1; x < eventArray.length; x++) {
title = eventArray[x].title;
start = new Date(eventArray[x].start);
end = new Date(eventArray[x].end);
allDay = eventArray[x].allDay;
date1 = eventArray[x].date;
id = eventArray[x].id;
problemCode = eventArray[x].problemCode;
offset = eventArray[x].offset;
var newEvent = {
id: id,
problemCode: problemCode,
title: title,
start: start,
end: end,
allDay: allDay,
resources: ['resource2'],
color: '#ffffff',
backgroundColor: '#000000'
};
$('#calendar').fullCalendar('gotoDate', date1);
$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');
}
},
error: function(error) {
console.log("Ajax error " + eval(error));
}
});
}
});

Before initiating the full calendar, make an ajax call to your resource URL and then initiate the full calendar on the success function of the ajax call
$.ajax({
url: 'your resource url here',
type 'GET',
success: function(data) {
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'resourceDay',
editable: true,
droppable: true,
resources: {
id: data.id, // Or whatever object properties you need from data
title: data.tile
},
events: [],
// the 'ev' parameter is the mouse event rather than the resource 'event'
// the ev.data is the resource column clicked upon
selectable: true,
selectHelper: true,
select: function(start, end, ev) {
console.log(start);
console.log(end);
console.log(ev.data); // resources
},
eventClick: function(event) {
var value = '${scheduleByLocationPage}';
document.getElementById("scheduleByLocation").action = 'FetchAppointmentDetails?id=' + event.id
+ '&problemAppointment1=' + event.problemCode + '&referredFrom=' + value;
document.getElementById("scheduleByLocation").submit();
console.log(event);
},
eventDrop: function(event, delta, revertFunc) {
console.log(event);
}
});
}
});

Uncaught TypeError: object is not a function in Fullcalendar

I'm trying to get fullcalendar to render data from my db, when something is dropped. I can see the data is passed correctly by ajax. But when the callback is called, I get the error message Uncaught TypeError: object is not a function.
Below you find my code:
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
var events = [];
for (order in data) {
var allday_data = data[order].allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: data[order].id,
title: [data[order].initials] + [data[order].last_name],
start: data[order].start,
end: data[order].end,
allDay: allday_data,
color: data[order].calendar_color
});
};
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
}
});
}
Anyone any sugestions to solve the error message?
below the results from ajax, to callback
[{"id":"136","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-05 09:00:00","end":"2014-08-05 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"138","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-04 09:00:00","end":"2014-08-04 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"139","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-07 07:30:00","end":"2014-08-07 11:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"142","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 00:00:00","end":"0000-00-00 00:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"143","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 11:30:00","end":"2014-08-06 15:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"155","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-10 09:00:00","end":"2014-08-10 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"170","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-28 10:00:00","end":"2014-08-28 15:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"171","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-26 08:00:00","end":"2014-08-26 12:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"175","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-30 07:00:00","end":"2014-08-30 14:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"183","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-29 07:30:00","end":"2014-08-29 13:00:00","allday":null,"calendar_color":"#00ffff"}]
I tried the solution you described, but I still get the same error message object is not a function. Below you find the compleat JS file. Anyone any other suggestions?
$(document).ready(function() {
function resource_base_url() {
return base_url() + '/resource_controller/';
}
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
firstDay: 1, // Sunday=0, Monday=1, Tuesday=2, etc.
aspectRatio: 2.5,
eventTextColor: 'black',
theme: true, // false, true
handleWindowResize: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
// Determines which icons are displayed in buttons of the header when theming is on.
themeButtonIcons:{ // Check http://api.jqueryui.com/theming/icons/ for avalible icon names
prev: 'ui-icon ui-icon-circle-triangle-w',
next: 'ui-icon ui-icon-circle-triangle-e'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//events: calendar_base_url() + '/events',
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
$.each(data, function(key, val){
var events = [];
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: val.initials + val.last_name,
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
});
}
});
}
});
});

You trying to do the loop trough json Object, try to do this like this with each function.
hope it help's
You must put event in global scope of window like this
<script>
var events = new Array();
</script>
And all your functions in document ready function.
drop: function (start, end, timezone, callback) {
var resource_id = $(this).attr('id');
var id = resource_id.substring(resource_id.lastIndexOf('_') + 1, resource_id.length);
var events_uri = '/get_resource_events';
$.ajax({
url: resource_base_url() + events_uri,
data: {
id: id
},
type: "GET",
dataType: 'json',
success: function(data) {
$.each(data, function(key, val){
var events = [];
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: val.initials + val.last_name,
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
callback(events);
$('#calendar').fullCalendar('rerenderEvents');
)}
}
});
}
Here is working example :
var events = new Array();
$(document).ready(function(){
var data = [{"id":"136","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-05 09:00:00","end":"2014-08-05 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"138","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-04 09:00:00","end":"2014-08-04 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"139","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-07 07:30:00","end":"2014-08-07 11:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"142","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 00:00:00","end":"0000-00-00 00:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"143","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-06 11:30:00","end":"2014-08-06 15:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"155","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-10 09:00:00","end":"2014-08-10 13:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"170","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-28 10:00:00","end":"2014-08-28 15:00:00","allday":null,"calendar_color":"#00ffff"},{"id":"171","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-26 08:00:00","end":"2014-08-26 12:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"175","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-30 07:00:00","end":"2014-08-30 14:30:00","allday":null,"calendar_color":"#00ffff"},{"id":"183","initials":"M.H.","last_name":"Tjon-Sien-Fat","start":"2014-08-29 07:30:00","end":"2014-08-29 13:00:00","allday":null,"calendar_color":"#00ffff"}];
$.each(data, function(key, val){
var allday_data = val.allday;
if (allday_data === 'true') {
allday_data = true;
} else {
allday_data = false;
};
events.push({
id: val.id,
title: [val.initials] + [val.last_name],
start: val.start,
end: val.end,
allDay: allday_data,
color: val.calendar_color
});
})
console.log(events);
});
Here is the output
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
Object0: ObjectallDay: falsecolor: "#00ffff", end: "2014-08-05 13:00:00", id: "136", start: "2014-08-05 09:00:00", title: "M.H.Tjon-Sien-Fat";

Categories