I'm working with Codeigniter 4, JQuery and AJAX
I added a calendar to my page using FullCalendar, the basic structure goes like this:
var base_url = $("#base_url").val();
var calendarEl = $("#calendar")[0];
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left:'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: base_url + '/calendar/fetch_activities',
editable: true,
buttonText: {
today: "Today",
month: "Month",
week: "Week",
day: "Day",
list: "List",
prev: "Prev",
next: "Next"
},
dateClick: function(info) {
// console.table(info);
}
});
I tried to fetch the events using
events: base_url + '/calendar/fetch_activities', which in theory should work as the structure it accepts is:
events: [
{
id: 'a',
title: 'my event',
start: '2018-09-01'
}
]
and my output from events: base_url + '/calendar/fetch_activities', is:
[{
"title":"Meeting with Mike",
"start":"2021-04-08 11:00:00",
"end":"2021-04-08 00:00:00"
},
{
"title":"Meeting with Mike",
"start":"2021-04-13 00:00:00",
"end":"2021-04-13 00:00:00"
}]
yet still I get this error for whatever reason
What could be the issue here?
==edit
+Is the error generated in FullCalendar code?
Yes.
+Does leaving out the event feed property in calendar options prevent the error?
Yes.
+Did testing confirm that the JSON posted is what the server returns from a GET request to the server with start and end values in the query component?
Yes.
+Did you test other things to rule them out as contributing to the error?
I've run out of ideas.
I've done a bit more digging and found out that this message doesn't always show because of a JSON error;
https://github.com/fullcalendar/fullcalendar/issues/4692
https://github.com/fullcalendar/fullcalendar/issues/4952
I rechecked the files, turns out the JSON file is at fault since it somehow includes a script tag sent by CodeIgniter's debugbar.
[{"title":"aaa22","start":"2021-04-01","end":"2021-04-01","id":"4"},{"title":"aaaeeee","start":"2021-03-30","end":"2021-03-30","id":"48"},{"title":"beep boop","start":"2021-03-31","end":"2021-03-31","id":"54"},{"title":"lorem ipsum edit","start":"2021-04-06","end":"2021-04-06","id":"55"}]
<script type="text/javascript" id="debugbar_loader" data-time="1618658976" src="localhost/myapp/?debugbar"></script><script type="text/javascript" id="debugbar_dynamic_script"></script><style type="text/css" id="debugbar_dynamic_style"></style>
I have no idea how this is happening but I'll have to look into it.
EDIT:
You can turn of debugging by going in Config/Boot/development.php and adding define('CI_DEBUG', false). It's running fine now.
Related
I'm using jqgrid to display different data entries in my frontend. In one column I display a timestamp and would like to enable the user to edit date and time using a datetimepicker. I started with a datepicker and everything worked.
Now I'm using a datetimepicker sometimes when I open the edit-dialog the field that is supposed to display date and time is blank. For example the timestamp "30.11.2022 00:00" is not displayed in the edit-dialog and the timestamp "05.11.2022 00:00" is displayed. When I use a simple datepicker everything works fine. In the grid overview all data entries' timestamps are displayed correctly.
Furthermore the datetimepicker doesn't open, neither for the data entries where the field for timestamp is blank, nor for the data entries where the timestamp is displayed correctly.
There are no logs in the console so I don't really know where to start looking for a solution.
Here is my code:
{
label: "Valid Until",
name: 'validUntil',
width: intColumnWidth,
headerTitle: "Valid Until",
editrules: {
required: true
},
editable: true,
formatter: 'date',
editoptions: {
dataInit: function (element) {
jQuery(element).datetimepicker({
});
}
}
}
From the backend I receive the timestamp as a string and in the format dd.MM.yyyy HH:mm. Therefore I tried adding the formatoptions property and also the dateformat property like so:
{
label: "Valid from",
name: 'validUntil',
width: intColumnWidth,
headerTitle: "Valid from",
editrules: {
required: true
},
editable: true,
formatter: 'date',
formatoptions: {
srcformat: 'd.m.Y H:i',
newformat: 'd.m.Y H:i'
},
editoptions: {
dataInit: function (element) {
jQuery(element).datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: "HH:mm"
});
}
}
}
I read that a common mistake ist that not all necessary libraries are imported or that they are imported in the wrong order. I imported the following libraries in the following order:
jquery-ui/1.13.0/jquery-ui.css
free-jqgrid/4.15.5/css/ui.jqgrid.css
bootstrap/4.4.1/css/bootstrap.min.css
ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css
jquery/3.5.1/jquery.min.js
jquery-ui/1.13.0/jquery-ui.js
ajax/libs/popper.js/1.16.0/umd/popper.min.js
bootstrap/4.4.1/js/bootstrap.min.js
ajax/libs/moment.js/2.22.2/moment.min.js
ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js
free-jqgrid/4.15.5/js/i18n/grid.locale-de.js
ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"
Other things I tried:
I verified that I receive the timestamp string as expected from the backend.
I changed dataIntit to loadComplete like this post suggests. When I do that all timestamps are displayed correctly but the datetimepicker still doesn't open
I changed dataIntit to onInitializeForm like this post suggests. When I do that all timestamps are displayed correctly but the datetimepicker still doesn't open
Does anyone know a solution??
The Setup
I'm using Fullcalendar v4, and I'm having some trouble with extraParams and sending them to server via AJAX.
What I'm trying to do (and failing) is to use this:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
eventSources: [{
url: 'ajax/fc.php?dropdown='+$("#dropdown").val(),
method: 'POST',
cache: false,
extraParams: {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
},
}],
......
});
Values for month, dropdown, person, phone are picked up from a form.
The Problem
Dumping both the GET and the POST variables (sever-side), just to check what I've received gives back 0 / empty strings for everything other than the month parameter - it's shown correctly.
The GET parameter is there just for testing purposes, and so is document.getElementById bit - I wanted to see if anything would show up if I used them (nothing did).
The issue persists even if I change the code to use events instead of eventSources.
Upon further experimenting, it seems that the calendar is affected by the element values present upon its initialization - if I hardcode the values for dropdown, person, and other inputs / select elements, they, and only they get sent (any change in values is ignored). The same thing happens if I just set the initial value (ie <input id="person" name="person" value="Joe">).
The question
How can I force the calendar (short of destroying and recreating it) to actually notice changes in the input values I want to use as extraParams?
If I'm misunderstanding the use of extraParams, what are my alternatives? I need to be able to send various data to the server, in order to get a specific set of events.
Figured it out in the meantime, thanks to this SO answer. Since the parameters are dynamic, they need to be sent as stated in the documentation (part Dynamic extraParams parameter):
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
extraParams: function() { // a function that returns an object
return {
dynamic_value: Math.random()
};
}
}
});
Which, in my case, would become:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
event: {
url: 'ajax/fc.php',
method: 'POST',
cache: false,
extraParams: function() {
return {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
}
},
},
......
});
i'm updating from FullCalendar v3 to v4 and have a problem getting the businessHours from the clicked resource.
In v3 i'm getting the businessHours this way:
select: function (eventClickInfo) {
console.log(eventClickInfo.resource)
}
Resource data:
...
businessHours: [
start: XXX
end: XXX
], [
start: XXX
end: XXX
]
...
But in V4 the resource Object got this structure:
_resource:
businessHours:
defs:
203:
allDay: false
defId: "203"
extendedProps:
end: {ms: 43200000, __edmType: "Edm.Time"}
groupId: "_businessHours"
hasEnd: true
...
204:
allDay: false
defId: "204"
extendedProps:
end: {ms: 72000000, __edmType: "Edm.Time"}
groupId: "_businessHours"
hasEnd: true
...
There is no start time and no way getting the business hours like .getResource("XXX").getBusinessHours()
Any ideas?
If you are intending to use the businessHours values to check that the user's selection of start/end times is within the defined hours, then you don't actually need any custom code for that, or to retrieve the businessHours values at all.
If you set the option
selectConstraint: "businessHours"
in your fullCalendar setup, then the calendar code will prevent the user from choosing any time outside the business hours automatically. They cannot even attempt to select it.
Demo: https://codepen.io/anon/pen/BEvoVN?&editable=true&editors=001
Documentation: https://fullcalendar.io/docs/selectConstraint
I load the data to the eventSource through Ajax call,
then i retrieve the data as..
eventSources:
[
// your event source
{
url: '/ajax-load-holidaysExtra',// use the `url` property
type: 'POST',
datatype: "JSON",
data : function()
{ // a function that returns an object
var date = new Date($('#calendar1').fullCalendar('getDate'));
month_integer = date.getMonth();
year_integer = date.getFullYear();
return {
month: month_integer,
year: year_integer
}
},
error: function() {
alert('there was an error while fetching eventsin hol!');
},
color: 'rgba(244, 221, 38, 0.20)', // a non-ajax option
textColor: 'blue' // a non-ajax option
}
],
but i get the days which are shown in the calendar is not correct, it shows a date 1 or 2 days before the date which i intend to take from the eventSource..
I am new to full calendar please can anyone help...it will be grateful
I found the answer
Even the data was correct the format was not okay with the calendar...
events: [
{
title: 'Event1',
start: '2011-04-04'
},
{
title: 'Event2',
start: '2011-05-05'
}
// etc...
],
as in the documentation the month should be come as 2011-04-04 , but in my data it is 2011-4-4 so the result comes but full calendar shows a another day.
..hope this might be useful to someone, So that's why i keep this Question..if any suggestion open for discussion...
We're trying to load our events to Full Calendar from a URL, but the events won't load. I've included th JS below, as well the JSON response from our URL/API.
Thanks so much!
URL/API JSON Response:
[{"start":"2016-04-012T15:30:00","end":"2016-04-12T16:30:00","title":"Calendar 1","allDay":"false","id":"a41380d1fbbaa819"}]
JS:
$(document).ready(function() {
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format("YYYY-MM-DD"),
editable: true,
events: {
url: 'MY URL, I DIDN\'T POST IT HERE TO KEEP IT PRIVATE',
error: function() {
$('#script-warning').show();
},
success: function(){
alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Well, it was tricky to figure out but your JSON is indeed ill-formed.
Check out the "start" property in you object and see how the date is written - it's not a Date string.
You have this: 2016-04-012T15:30:00
should be : 2016-04-12T15:30:00 (note the highlight).
Also see this answer: Javascript object Vs JSON
Your problem seems to be having a JSON string when you need a Javascript object.
Also, see my JSBIN here to see what's happening.
The problem is the date format:
[{"start":"2016-04-012T15:30:00","end":"2016-04-12T16:30:00","title":"Calendar 1","allDay":"false","id":"a41380d1fbbaa819"}]
According to ISO_8601 the date "2016-04-012T15:30:00" must be changed in: "2016-04-12T15:30:00"
For more details see start parameter in Event_Object