We Keep Coding

Failure parsing JSON FullCalendar when adding events (as a json feed)

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.

Get BusinessHours in FullCalendar v 4.0

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

Adding 2 weeks view in Calendar ExtJs 6

I want to add 2 weeks view in Calendar but so i have failed to do that. That my code so far, its not displaying the calendar giving following error:
Uncaught TypeError: view.getView is not a function
at constructor.recalculate (Multi.js?_dc=20180710185310:227)...
{
[...]
day: {
addForm: null,
editForm: null,
listeners: {
eventtap: 'onEventClick',
//click: 'onDayClick'
}
},
week: {
xtype: 'calendar-week'// This shows the one week view
},
weeks:{
xtype: 'calendar-weeksview'// but this give error
}
},
bind: {
store: '{calendars}'
}

You always have to use great care with components that are two components underneath - which, like grids, are composed from one panel and one view.
xtype: 'calendar-weeksview' is not in the same folder as xtype: 'calendar-week', while xtype: 'calendar-weeks' is. You may want to try that.

how to set local notification in cordova every day at a particular time

I want to give local notification at 7:00 am every day using cordova local notification plugin but in the documentation it is not specified how to set time for a repeating notification
$cordovaLocalNotification.schedule({
id: 3,
title: 'Warning',
text: 'Dont fall asleep',
every: 'minute'
}).then(function (result) {
console.log('Notification 3 triggered');
});

If you are using cordova-plugin-local-notifications, I think It should be:
var date = new Date()
date.setDate(date.getDate()+1);
date.setHours(7);
date.setMinutes(0);
date.setSeconds(0);
$cordovaLocalNotification.schedule({
id: 3,
title: 'Warning',
text: 'Dont fall asleep',
at: date,
every: 'day'
}).then(function (result) {
console.log('Notification 3 triggered');
});
This should schedule a notification the next day at 7, that will be repeated every day, but I couldn't try it, I'm sorry.

The property for setting the time is firstAt. You can find out the documentation about the plugin here.

Full calendar loading eventSource, Days are presented not in correct place

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...