JSON Won't get events in Full Calendar from URL - javascript

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

Related

Problems using bootstraps datetimepicker in jqgrid

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

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

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.

jQuery MapSvg binding data to regions parameter

In my MVC application, I am trying to create a SVG Map with data that comes from a database. Using jQuery, I call an action in the controller which returns data in the format that is expected in the MapSvg region's parameter.
The format that is expected goes as follows:
regions : {
'Yemen': {disabled: true},
'USA': {tooltip: 'USA: Click to go to Google.com', attr: {fill: '#ff0000', href: 'http://google.com', 'cursor': 'help'}}},
'France': {tooltip: 'This is France!', attr: {'cursor': 'help'}},
'Kazakhstan': {tooltip: 'Kazakhstan - the ninth largest country in the world.'}
},
In my controller, I have an action that will be called in the view by a jQuery ajax request
public ActionResult GetCountries()
{
List<ScratchMap> allitems = this.Worker.GetAllItems();
var allItemsAsArray = allitems.Select(x => string.Format("'{0}': {{ tooltip: 'Test', attr: {{ fill: '{1}' }} }}", x.PluginCountryName, x.Color)).ToArray();
return Json(allItemsAsArray, JsonRequestBehavior.AllowGet);
}
In the View, the following code is executed after the jQuery plugins and the MapSvg plugins are loaded:
$.get('/ScratchMap/GetCountries', {},
function (data) {
var regionsData = '{' + data + '}';
$('#map').mapSvg(
{
source: '#Url.Content("~/Content/Maps/world_high.svg")',
loadingText: 'Loading map...',
tooltipsMode: 'names',
responsive: true,
zoom: true,
pan: true,
zoomButtons: {
'show': true,
'location': 'right'
},
regions: regionsData
});
}), 'json';
When the page is rendered, the map does not fill any countries that were retrieved from the database. However, when I copy and assign the output of the regionsData variable directly to the regions parameter, the map loads everything correctly.
The following article teaches me that this could have something to do with the input data type. However, if I parse the regionsData to JSON, it tells me it is in a wrong format. But the given example by the creators of MapSvg is also in a wrong format.
Does anybody have any ideas for a workaround?
Thanks.
The problem is that even if the regions variable is edited the map plugin doesnt watch the change in its object contents so you must either wait till the data is returned before graphing the contents. Or re-graph with the method below.
If you wish to wait to graph till the data has been returned from your database call you can use a promise to delay the graphing of the object. Also important to know is the format in which the OPTS variables needs to have here is a sample.
var OPTS = {
source: sourcepath, // Path to SVG map
colors: {background: '#fff',base: '#0066FF', stroke: '#fff', selected: 10, disabled: '#ff0000'},
tooltipsMode: 'combined',
zoom: true,
pan: true,
responsive: true,
width: 1170,
zoomLimit: [0,100],
onClick: function (e, m) {
//do something here on each map click
},
regions:{
id_of_svg_path(the actual region you want to add data for):{
disabled:true,/*or whatever you need*/
tooltip:'<h4>Something to say</h4>'
}
}
}
In-order to re-graph I used the return object:
OPTS are just your specific chart options.
A variable javascript object that contains a regions variable.
var chartObj = $('#chart_container').mapSvg(OPTS);
chartObj.destroy();
This call will destroy then you re-graph it with OPTS that you have passed in.
Once you have destroyed it and passed in the new data you can just call.
var chartObj = $('#chart_container').mapSvg(OPTS);
Re-graphing it with the new data.
It turns out that it was an issue with the way I created the javascript output. The answer to this question can be found in this article.

Array (json) not passing into jqGrid's editoptions parameters

I've been trying to pass an array from a global variable (codata) to an option array of editoptions (jqGrid). My code stands as follows:
--------- countries_list.php throws the following json array -----------
["ABU","AD","AE","AF" .... "ZA","ZM","ZW"]
--------- PHP script with jqGrid Code ----------
jQuery(document).ready(function(){
var codata = new Array();
$.getJSON('countries_list.php', function(list){
$.each(list, function(val) {
codata.push("'"+val+"'");
# --- Here alert() displays 'codata' with all the elements ---
});
});
$("#datatable").jqGrid({
......
// some code until colMode specs
......
{ name:'guco',
index:'guco',
edittype:'select',
width:90,
editable: true,
editoptions: {
formatter:'select',
value: codata # --- array is not passed, it comes empty ---
},
sortable: true,
resizable: false
},
.....
--------- PHP script with jqGrid Code ----------
Any hint how to get this fixed?, thanx in advance.
Mario Benitez.-
Thanx a lot to all you guys, I learnt a lot with your contributions. Problem was fixed as follows:
(reading about) I found that getjson works an 'async mode' (I'm a jQuery newbie) and the code to fix the problem was:
jQuery(document).ready(function(){
var codata = (function () {
var list = null;
$.ajax({
'async': false,
'global': false,
'url': 'countries_list.php',
'dataType': 'json',
'success': function (data) {
list = data;
}
});
return list;
})();
$("#datatable").jqGrid({
... jqGrid settings ...
colModel: [
....
{ name:'guco',
index:'guco',
edittype:'select',
width:90,
editable: true,
editoptions: {
value: codata
},
sortable: true,
resizable: false
},
....
Thanx a lot once again, I hope this helps to someone else.
Mario Benitez.
From what i see your php script is passing valid js array, not json object. The most logic thing to do is to call jqGrid inside the ajax callback assigning $("#datatable").jqGrid({ ... editoptions: { value: list } ... });
I would recommend you to use dataUrl together with buildSelect instead of value of the editoptions. You can find the corresponding code example of buildSelect in the "UPDATED" part of the answer.
I tried both ways and the Answer given in Olegs links helped. Using the buildSelect param allows full control of the value. When I used value method it assigned simple integer values of 0 - n. You can also assign your own CSS classes in this paradigm too. +1 for buildSelect/dataurl.

Categories