I'm feeding my Fullcalendar instance on Angular with a JSON from a URL.
The GET returns 200 with well-formed JSON data, but no events are shown in the calendar.
Here is my CalendarOptions:
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
plugins: [interactionPlugin,
dayGridPlugin,
timeGridPlugin,
listPlugin,],
editable: true,
selectable: true,
select: this.handleDateSelect.bind(this),
eventClick: this.handleEventClick.bind(this),
eventsSet: this.handleEvents.bind(this),
events: 'http://127.0.0.1:8097/event',
startParam: 'startTime',
endParam: 'endTime',
timeZoneParam: 'local'
};
No errors on console, just no events in the month view.
Here the JSON response of the GET API call:
[
{"id":1510,"description":null,"doctorId":1,"endTime":"2021-01-09T16:15","healthServiceId":3,"isEventDone":false,"isRecurring":false,"patientId":null,"patientName":null,"patientSurname":null,"phoneNumber":"338-3248104","startTime":"2021-01-09T16:00"},
{"id":1512,"description":null,"doctorId":1,"endTime":"2021-01-09T16:45","healthServiceId":1,"isEventDone":false,"isRecurring":false,"patientId":467,"patientName":null,"patientSurname":null,"phoneNumber":"329-9590677","startTime":"2021-01-09T16:15"},
{"id":1513,"description":null,"doctorId":1,"endTime":"2021-01-09T17:00","healthServiceId":2,"isEventDone":false,"isRecurring":false,"patientId":748,"patientName":null,"patientSurname":null,"phoneNumber":"327-4571259","startTime":"2021-01-09T16:45"},
{"id":1514,"description":null,"doctorId":1,"endTime":"2021-01-09T17:15","healthServiceId":2,"isEventDone":false,"isRecurring":false,"patientId":592,"patientName":null,"patientSurname":null,"phoneNumber":"348-1588967","startTime":"2021-01-09T17:00"},
{"id":1515,"description":null,"doctorId":1,"endTime":"2021-01-09T16:00","healthServiceId":32,"isEventDone":false,"isRecurring":false,"patientId":112,"patientName":null,"patientSurname":null,"phoneNumber":"338-5994091","startTime":"2021-01-09T15:45"},
{"id":1516,"description":null,"doctorId":1,"endTime":"2021-01-09T17:30","healthServiceId":2,"isEventDone":false,"isRecurring":false,"patientId":423,"patientName":null,"patientSurname":null,"phoneNumber":"389-4895518","startTime":"2021-01-09T17:15"},
{"id":1517,"description":null,"doctorId":1,"endTime":"2021-01-09T17:45","healthServiceId":7,"isEventDone":false,"isRecurring":false,"patientId":60,"patientName":null,"patientSurname":null,"phoneNumber":"380-4559938","startTime":"2021-01-09T17:30"},
{"id":1518,"description":null,"doctorId":1,"endTime":"2021-01-09T15:45","healthServiceId":3,"isEventDone":false,"isRecurring":false,"patientId":829,"patientName":null,"patientSurname":null,"phoneNumber":"349-8027366","startTime":"2021-01-09T15:30"},
{"id":1519,"description":null,"doctorId":1,"endTime":"2021-01-09T15:30","healthServiceId":32,"isEventDone":false,"isRecurring":false,"patientId":129,"patientName":null,"patientSurname":null,"phoneNumber":"349-3404658","startTime":"2021-01-09T15:20"},
{"id":1520,"description":null,"doctorId":1,"endTime":"2021-01-09T18:10","healthServiceId":1,"isEventDone":false,"isRecurring":false,"patientId":null,"patientName":null,"patientSurname":null,"phoneNumber":"0873-547325","startTime":"2021-01-09T17:45"},
{"id":1521,"description":null,"doctorId":1,"endTime":"2021-01-09T18:30","healthServiceId":2,"isEventDone":false,"isRecurring":false,"patientId":716,"patientName":null,"patientSurname":null,"phoneNumber":"328-4331424","startTime":"2021-01-09T18:10"}
]
As per fullcalendar's event parsing documentation the dates you put in your event data must be in properties called start and end.
You've put them in startTime and endTime - which isn't valid unless it's a recurring event.
Related
I am using fullCalendar in my MVC project. I downloaded fullCalendar from Nuget but it doesn't display my data on the calendar. I can get my data but it is not displaying.
What is going wrong in my code?
MVC action method:
public JsonResult GetEvents()
{
dbContext = new Context();
var events = dbContext.Schedule.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
View:
I think the GenerateCalendar function is not working.
<link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
<script src="~/Content/PanelJS/jquery.min.js"></script>
<script src="~/Content/PanelJS/moment.min.js"></script>
<script src="~/Scripts/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url:"#Url.Action("GetEvents","Schedule")",
success: function (data) {
$.each(data,function(i,v)
{
events.push({
title: v.Name,
start: v.Date,
end: v.EndDate,
location:v.Location
});
console.log(events);
})
GenerateCalendar(events);
},
error:function(error)
{
alert('Error');
}
});
function GenerateCalendar(events)
{
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar(
{
contentHeight: 400,
defaultDate: new Date(),
color:'lightBlue',
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right:'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events:events
})
}
});
</script>
Console result ;
end: "10/05/2018 "location: "Chicago" start: "09/05/2018" title: "MyEvent"
From the console output it looks like your dates are being supplied as strings in an ambiguous format. fullCalendar / momentJS will not understand that without being explicitly told what you format is being used. It could be dd/mm/yyyy or mm/dd/yyyy. There is no way for the parser to know what to do with it.
Therefore fullCalendar will not be able to use this data as an event, because it doesn't understand the start and end dates.
The date and time formats accepted by fullCalendar are the same as those accepted by momentJS (since it uses momentJS to work with dates). This is documented here: https://fullcalendar.io/docs/moment and in more detail here: http://momentjs.com/docs/#/parsing/
Therefor, you can either
1) (recommended) Re-write your server-side code so that it returns dates in ISO format. Generally if you are using DateTime objects in your C# code, then the .NET JSON serialiser will do that for you automatically. Since you're directly serialising the result of an Entity Framework query into JSON, then I would suspect that the Date and EndDate properties of your Schedule class are strings rather than DateTimes, which in turn means that you may be storing dates as strings within your database. If so, that is a bad practice which you should fix immediately by storing dates as datetime columns. Dates are not strings, they are dates. What you see on screen (e.g. 09/05/2018) is merely one of many possible representations of that date in a human-readable form. It is not a good format for actually storing the date information.
OR
2) (alternative) If that's not the case, or not possible for some reason, then tell momentJS to parse the dates according to the format you're supplying and then pass the data to fullCalendar as a moment object, e.g.
events.push({
title: v.Name,
start: moment(v.Date, "DD/MM/YYYY"),
end: moment(v.EndDate, "DD/MM/YYYY"),
location: v.Location
});
In-depth documentation of the format-specific parsing functionality in momentJS can be found here: http://momentjs.com/docs/#/parsing/string-format/
When calling JsonRest using dojo, how can I pass parameters with it.
var rest = new JsonRest({
target: "/path/to/service"
});
JsonRest example:
require(["dojo/store/JsonRest"], function(JsonRest){
// create a store with target your service
var store = new JsonRest({
target: "/path/to/service"
});
// make a get request passing some options
store.query("foo=bar", {
start: 5,
count: 5,
sort: [
{ attribute: "color", descending: true }
]
}).then(function(results){
// result here
});
});
The function to use in your case is query with signature query(query, options)
When called, query will trigger a GET request to {target}?{query}, as described in dojo docs.
Please keep in mind that:
If query is an object, it will be serialized.
If query is a string, it is appended to the URL as-is.
If options includes a sort property, it will be serialized as a query parameter as well;
Your service/API should:
Return a array of objects in JSON format.
Return an empty array if no match is found.
I am new to Angle and am finding it very nice, my problem is this:
have a ng-repeat running straight when caught the data source of a variable javascript like this:
var alertsq = [
{
"alert":"mediun",
"nt":"28",
"nu":"28",
"no":"34",
"dtini":"2012/Jul/23",
"no":"3",
"dtoc":"23/7/2012",
"dtuo":"25/7/2012",
"id":"227529436529033216",
"msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
},
{
"alert":"mediun",
"nt":"28",
"nu":"28",
"no":"34",
"dtini":"2012/Jul/23",
"no":"3",
"dtoc":"23/7/2012",
"dtuo":"25/7/2012",
"id":"227529436529033216",
"msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
}];
My controller that takes the variable alertsq and arrow on the scope is as follows:
app.controller("alertsController",function(){
console.log(alertsq);
this.alerts =alertsq;
});
The cool thing is that it works and my list in *ng-repeat* is filled beautifully, but when I use the $http to load a JSON content of a file does not meet the same list: O controller code is so :
app.controller("alertsController", function($http,$scope){
$http({
url: "data/alerts.json",
dataType: "json",
method: "GET",
headers: {
"Content-Type": "application/json"
}
}).success(function(data){
$scope.alerts= data;
console.log($scope.alerts);
}).error(function(error){
console.log(data);
console.log(error);
});
});
The cool thing is that JSON is coming just right the browser output in the first case
that the list is filled is as follows:
mainController controller.js:7
[Object, Object, Object, Object, Object, Object, Object]
0: Object
$$hashKey:"object:4"
alert: "mediun"
dtini: "2012/Jul/23"
dtoc: "23/7/2012"
dtuo: "25/7/2012"
id: "227529436529033216"
msg: "Uh oh, this could be bad. Check the
door lock vendor before you book you next hotel room:
http://example.co/n56emZf2"
no:"3"
nt: "28"
nu: "28"__proto__:
Object1:
Object2:
And this is the console output when I seek for $http JSON:
[Object, Object, Object, Object, Object, Object, Object]
0: Object
alert: "mediun"
dtini: "2012/Jul/23"
dtoc: "23/7/2012"
dtuo: "25/7/2012"
id: "227529436529033216"
msg: "Uh oh, this could be bad. Check the
door lock vendor before you book you next hotel room:
http://example.co/n56emZf2"
no:"3"
nt: "28"
nu: "28"__proto__:
Object1:
Object2:
The detail is that the output obtained by the JSON via $http there is no attribute $$HashKey, and so the list in the ng-repeat is not filled :(, can anyone help me solve this?
When you updated your controller constructor function to include $http, you also added $scope. Changing from inferred to explicit dependency injection could be a problem for several reasons.
For example, the following html will display the alerts using your original controller.
<div ng-controller="CtrlOne as vm">
<div ng-repeat="alert in vm.alerts">
{{alert.alert}} - {{alert.msg}}
</div>
</div>
However, your updated controller (in which you inject $scope explicitly) won't work with the "controller as" syntax. The controller alias must be removed to be compatible with your new controller constructor function:
<div ng-controller="CtrlOne">
<div ng-repeat="alert in alerts">
{{alert.alert}} - {{alert.msg}}
</div>
</div>
Here's a demo of both methods: http://plnkr.co/edit/TrTFV36kQ8Llz3n2NChB?p=preview
Alternatively, you can remove $scope from the dependency injection, and go back to using this.alerts in the controller.
I try to display some data in my Sencha touch application, but it doesn't work... and i can't find what I'm doing wrong.
My webSiste return a json object who look like this
[{"name":"a","id":1}]
the script is getting the Json and display it:
Ext.regApplication({ name: 'Command',
phoneStartupScreen: 'phone-startup.png',
phoneIcon: 'apple-touch-icon.png',
launch: function(){
this.viewport = new Ext.Panel(
{
layout: 'fit',
fullscreen: true,
items: [{xtype: 'list',
itemTpl: new Ext.XTemplate('<div>{name}</div>'),
store: stores
}],
dockedItems: [{xtype: "toolbar",
dock: "top",
title: 'MovieCommand',
items: [{ui: 'back',text: 'back',handler: function(){}}]
}]
});
}
});
Ext.regModel('Commands', {
fields: ['name', 'id' ]
});
var stores = new Ext.data.Store(
{model: 'Commands',
proxy: {type: 'scripttag',
url: 'http://localhost:8080/GTI710/commandes/liste.htm',
format: 'sencha',
reader: new Ext.data.JsonReader ({
type: 'json',
})
},
});
stores.load();
I don't have any error in the java script but nothing is displayed.
I just want to have the "a" displayed but it doesn't work, I don't know why...
The ScriptTagProxy, which you are using, requires a response from server that's composed of legitimate Javascript code.
Specifically, the code is a callback function with the desired JSON data you what as the its first argument:
someCallback([{"name":"a","id":1}]);
The name of someCallback is generated dynamically by Sencha Touch when the request is sent. In other words, your attempt to store the response with a static file will not work.
The name of someCallback is passed as a parameter in the GET request sent by Sencha Touch, the key of which defaults to callback.
If you don't want to have a web server as the data source, checkout Ext.util.JSONP.
I found the very nice demo by Oleg (http://www.ok-soft-gmbh.com/jqGrid/FillToolbarSearchFilter.htm) which shows a "jqGrid toolbar search with autocomplete using local data" but have trouble to get this to work for json via ajax. Is there a good reason why the autocomplete feature won't work - even if I force the grid to be local after loading?
$(document).ready(function() {
var mygrid = $("#mylist"),
mygetUniqueNames = function(columnName) {
var texts = mygrid.jqGrid('getCol',columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i=0;i<textsLength;i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
};
mygrid.jqGrid({
url:'autocompleteTest.php',
datatype: "json",
colNames:['name', 'City','stateCd'],
colModel:[
{name:'name',index:'name',width:225, search: true},
{name:'City',index:'City',width:125},
{name:'stateCd',index:'stateCd',width:75},
],
rowNum: 100,
loadonce : true,
sortname: 'name',
sortorder: 'desc',
sortable: true,
viewrecords: true,
rownumbers: true,
sortorder: "desc",
ignoreCase: true,
pager: '#mypager',
height: "auto",
caption: "How to use filterToolbar better with data from server"
}).jqGrid('navGrid','#mypager',
{edit:false, add:false, del:false, search:false, refresh:false});
mygrid.jqGrid('setColProp', 'name',
{
searchoptions: {
sopt:['bw'],
dataInit: function(elem) {
$(elem).autocomplete({
source:mygetUniqueNames('name'),
delay:0,
minLength:0
});
}
}
});
mygrid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:"bw"});
});
It is difficult to provide an example in case of the usage of remote source parameter of jQuery UI Autocomplete. The main problem is that your question is about jqGrid which is pure JavaScript solution. If we would discuss the server part of tha solution we would have too options. Many users uses different languages: Java, C#, VB, PHP and so on. For example I personally prefer C#. Then we would have to choose the technology which we use: ASP.NET MVC, WCF, ASPX web service and so on. For example I would choose WCF. Then we should define the database access technology, for example, Entity Framework, LINQ to SQL, SqlDataReader, SqlDataAdapter and so on. Let us I would choose Entity Framework and would provide you the corresponding code example, but it would help you not really if you use for example PHP and MySQL.
So I just describe which interface should have the server for the remote source parameter of jQuery UI Autocomplete without any code.
You should replace in my example the source parameter to your server url like following:
dataInit: function(elem) {
$(elem).autocomplete({
source:'yourSearchUrl.php',
minLength:2
});
}
If the user types two characters (the value can be changed by minLength option), for example 'ab' then the autocomplete will make HTTP GET request with the parameter term=ab:
yourSearchUrl.php?term=ab
your server should answer with the JSON data in the same format as for the local source. I used the string array format in my previous example. Another supported format is array of objects with label/value/both properties like
[
{
"id": "Dromas ardeola",
"label": "Crab-Plover",
"value": "Crab-Plover"
},
{
"id": "Larus sabini",
"label": "Sabine`s Gull",
"value": "Sabine`s Gull"
},
{
"id": "Vanellus gregarius",
"label": "Sociable Lapwing",
"value": "Sociable Lapwing"
},
{
"id": "Oenanthe isabellina",
"label": "Isabelline Wheatear",
"value": "Isabelline Wheatear"
}
]
read the documentation for more information.
If you need to implement more complex scenario and send some additional data to the server or convert the server response in any way you can use custom source callback function. In the case you should use source: function(request, response) {/*your implementation*/}, where the request would be an object having term property (request.term). Inside of your implementation your should make ajax request to the server manually. The response would be callback function which you should call after your custom ajax request will be finished (inside of success event handler). The response function should be called with the parameter which should be array in the same format as mygetUniqueNames returns. I recommend you to examine the source code from the jQuery Autocomplete demo.
To de able to provide unique data from one column of tabele you should just use SELECT DISTINCT SQL statement which are supported in the most databases.
I hope that my description would help you.
UPDATED: If you have the local source the solution you could find in my old answer which you already use. What you just need to do is to call the filterToolbar after the source array are filled. Because you load the data from the server your should move the call of filterToolbar inside of loadComplete. You use loadonce:true jqGrid option which switch the datatype from 'json' to 'local' after the first data loading. So you can include in the loadComplete event handler of your grid the code like the following:
var grid = $('#list');
grid({
url:'autocompleteTest.php',
datatype: 'json',
loadonce: true,
// ... other parameters
loadComplete: function(data) {
if (grid.getGridParam('datatype') === 'json') {
// build the set 'source' parameter of the autocomplete
grid.jqGrid('setColProp', 'name', {
searchoptions: {
sopt:['bw'],
dataInit: function(elem) {
$(elem).autocomplete({
source:mygetUniqueNames('name'),
delay:0,
minLength:0
});
}
}
});
mygrid.jqGrid('filterToolbar',
{stringResult:true,searchOnEnter:true,
defaultSearch:"bw"});
}
}
});
If you will need to reload the data from the server (change the datatype to 'json' and call grid.trigger('reloadGrid')) you will have to change the code above so that you first destroy the autocomplete widget with $('#gs_name').autocomplete('destroy') and then create it one more time with the same code like inside of dataInit.