We Keep Coding

Fullcalendar - extraParams in events and eventsources not being read from element.value

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'
}
},
},
......
});

How to change the format of field's value in a feature layer integrated with ArcGIS Esri map?

I have integrated a Parcel Layer in the ArcGIS Esri map inside Angular application. But now I want to change the format of some values coming up in the popup template when user clicks on certain Parcel.
Now my popup values looks like this.
ASSMT_YEAR - 2,017.00
ATTDATE - 20190130
BATHROOMS - 0.00
Requirement
ASSMT_YEAR and YEAR_BUILT value format should not include commas or decimals.
ATTDATE and REC_DATE value format should be in date format.(01/30/2019)
How can I achieve above requirement?
.ts file
const createEsriPopupTemplate = function(layer) {
const config = {
fields: layer.fields.map(field => (
{
name: field.name,
type: field.type,
}
)),
title: formatName(layer.title),
};
return popupUtils.createPopupTemplate(config);
}
for (const layer of esriLayers) {
view.whenLayerView(layer).then(function (layerView) {
const popupTemplate = createEsriPopupTemplate(layer)
if (!popupTemplate) {
console.log("FeatureLayer has no fields.")
} else {
layer.popupTemplate = popupTemplate;
}
});
}

To format the fields for the popup, you can use format property of popup fieldInfos.
ArcGIS JS API - Field Info Format
In your case I think this config should work,
fieldInfos: [
{
fieldName: "ASSMT_YEAR",
label: "ASSMT Year",
format: {
dateFormat: "short-date"
}
},
{
fieldName: "ATTDATE",
label: "Attendance Date",
format: {
dateFormat: "short-date"
}
},
{
fieldName: "BATHROOMS",
label: "Bathrooms"
format: {
digitSeparator: true,
places: 0
}
}
]
Now, you are generating the popup using popupUtils.createPopupTemplate function. So to continue in that path, you will need to change a bit.
First you need to know what fields to change, and in that regard you will have to use something, for example the field type.
Second, the easy change I think it would be instead of popupUtils.createPopupTemplate, use popupUtils.createFieldInfos and follow the doc example.

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.

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.

JSON Won't get events in Full Calendar from URL

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