fullcalendar: resources with start and end date - fullcalendar-scheduler

Is it possible in fullcalendar-scheduler to pass start and end date of the view to the resources? eventSources are provided with these two parameters automatically, but resources not. I tried with
resources: {
url: '<?= $resourcesRoute ?>,
type: 'POST',
data: {
start: $('#calendarDaysoff').fullCalendar('getView').start,
}
},
eventSources: [
{
url: '<?= $eventsRoute ?>',
type: 'POST',
data: {
bla: 'bla'
},
error: function () {
alert('There was an error while fetching events!');
}
}
],
but this does not works.

I used this solution:
resources: function(callback){
setTimeout(function(){
var view = $('#calendar').fullCalendar('getView');
$.ajax({
url: 'feed.php',
dataType: 'json',
cache: false,
data: {
start: view.start.format(),
end: view.end.format(),
timezone: view.options.timezone
}
}).then(function(resources){callback(resources)});
},0);
},
This will add start and end parameters like when fetching events. You can add
$feed_start = $_GET['start']; to feed.php
and use the variable '$feed_start' in mysql select.
I got the input from https://github.com/fullcalendar/fullcalendar-scheduler/issues/246?_pjax=%23js-repo-pjax-container

V1.5.1 introduces a solution:
https://fullcalendar.io/docs/resource_data/refetchResourcesOnNavigate/
Since v1.5.1, if refetchResourcesOnNavigate is set to true a resources function will receive start, end, and timezone parameters

Related

JQuery DataTable data not available even data is received from server

I want to draw a table to show users data from my server.
First I am using Ajex to get the users data:
var usersList = {};
usersList.users = ["Afthieleanmah", "Hadulmahsanran","tabletest1"];
var dataSet1=[];
var i;
$.ajax({
url: '../users',
type: 'POST',
contentType: 'application/json',
cache: false,
data: JSON.stringify(usersList),
success:function(response, text){
if(response.users !== undefined){
dataSet1 = response.users;
}
}
});
I can successfully get the users data and save the data in dataSet1 as a JSON array contains Objects. Its format is like this:
[
{
username: "Tiger Nixon",
job_title: "System Architect",
city: "Edinburgh",
extn: "5421"
},
{
username: "Tiger Nixon2",
job_title: "System Architect",
city: "Edinburgh",
extn: "5421"
}
]
Then I create a table and pass in configuration:
// table confirgurations
var tableConfig={
pageLength: 5,
bLengthChange: false,
columns:[
{data: "username", title: "Name"},
{data: "job_title", title: "Position"},
{data: "city", title: "City"}
],
data:dataSet1
};
// create table
var userTable=$('#table-id').DataTable(tableConfig);
I am sure that I can get users data from API "/users" and save it into dataSet1. But everytime I load the page containing the table, the table always shows "No data available in table". I set a breakpoint on this line :
var tableConfig={
and let it continue to run. The weird things happen. The Table shows the data.............. No idea why
You should initialize your table after you receive response from the server in the success function. Also use destroy in case you're performin your Ajax request multiple times.
For example:
$.ajax({
// ... skipped ...
success:function(response, text){
if(response.users !== undefined){
dataSet1 = response.users;
}
// table confirgurations
var tableConfig={
// ... skippped ...
destroy: true
};
// ... skippped ...
var userTable=$('#table-id').DataTable(tableConfig);
}
});
However ideally you should let jQuery DataTables do the Ajax request using ajax option.

BreezeJS create complex enity

I am using ServiceStack to get JSON data to the client. I have setup for BreezeJS to map the ServiceStack calls.
Data return by web service is in format like this:
Meta: {Path:[{"Name":"Root","Id":"00000000000000000000000000000000"}], Duration:145}
Duration: "145"
Path: "[{"Name":"Root","Id":"00000000000000000000000000000000"}]"
Offset: 0
Results: [,…]
0: {Description:SLO, InternalKey:SLO, IsActive:true, Name:SLO, ParentId:00000000000000000000000000000000,…}
ChildCount: 2
CreatedById: "ed85f2b9c0bf46729cbb17cee25e3287"
CreatedDate: "2014-09-06T06:23:16.6000000"
Description: "SLO"
HasChildren: true
Id: "9b636028e3f04535a5147a2df375adaa"
InstanceType: "Container"
InternalKey: "SLO"
IsActive: true
ModifiedDate: "2014-09-17T11:04:23.1553432"
Name: "SLO"
ParentId: "00000000000000000000000000000000"
Total: 1
If I create entity manually for node "Result" the data gets mapped and I can read it in my view.
Entity definition:
define(function (require) {
var breeze = require('breeze');
var ctor = function () {
var self = this;
self.DT = breeze.DataType;
};
ctor.prototype.instanceCreate = function (nameSpace) {
var self = this;
return self.instance = {
shortName: "instances",
namespace: nameSpace,
autoGeneratedKeyType: breeze.AutoGeneratedKeyType.Identity,
defaultResourceName: "instances",
dataProperties: {
ConnectionString: { dataType: self.String },
Description: { dataType: self.String },
InternalKey: { dataType: self.String },
IsActive: { dataType: self.Boolean },
Name: { dataType: self.String },
ParentId: { dataType: self.Int32 },
InstanceType: { dataType: self.String },
ChildCount: { dataType: self.Int32 },
HasChildren: { dataType: self.Boolean },
Uid: { dataType: self.Guid },
ETag: { dataType: self.String },
Id: { dataType: self.Int32, isPartOfKey: true },
CreatedDate: { dataType: self.DateTime },
CreatedById: { dataType: self.String },
ModifiedDate: { dataType: self.DateTime },
ModifiedById: { dataType: self.String },
DeletedDate: { dataType: self.DateTime },
DeletedById: { dataType: self.Int32 },
}
};
};
return new ctor();
});
The question is: is it possible in Breeze to define entity so I can read both the "Result" node and the "Meta" from JSON into single entity definition. So I can access data something like:
data.results and data.Meta? Or is there any other way to solve this problem.
I am not sure I fully understand your question. I THINK you're asking if there is a way to map the JSON into an entity by flattening out some of the data and cherry-picking from different nodes.
If so, the answer is ... absolutely. You'll want to create a custom JsonResultsAdapter and probably a custom DataServiceAdapter (which has its own JsonResultsAdapter for handling server responses to a save such as a new instance).
You'll find examples of both adapters in breeze.js itself and in various of the Breeze Labs.
I wish I could point you to documentation and a guide to writing these adapters. It's on our backlog.
FWIW, I would NOT locate persistence metadata such as etag among the entity properties. That's metadata that you need under the covers to make persistence work; it's not "business data" and not something the application developer should see or care about. Which is why in our OData and SharePoint DataService Adapters, we move that kind of thing to the node's result.extraMetadata property. Breeze picks that up and moves it to the entityAspect which is the place to keep persistence info (e.g., change state). Breeze recognizes entityAspect.extraMetadata as a property bag to which you can add anything that you can JSON.stringify.

Generic component

i need to define a set of generic component in Extjs4:
for example i want to define a single generic store and when i need a store in my code is necessary to create a store just define and pass to him the model and the url for get the data.
This is my store:
Ext.define('base.common.store.BaseStore',{
extend:'Ext.data.Store',
remoteSort: true,
proxy: {
//url:this.url,
type: 'ajax',
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
reader: {
type: 'json',
id: 'id',
root: 'list'
}
}
})
and this is when i create an instance of it:
var dsGroups = Ext.create('base.common.store.BaseStore',{
model:'base.common.model.Group'
//proxy:{url:"Group.getGroups"}
});
dsGroups.getProxy().url = "Group.getGroups";
This question is: There is a way to do this job for inject the proxy.url property in the Ext.create call? (i don't want to use the last statement)
Anytype of help or idea is usefull.
Ext.define('base.common.store.BaseStore',{
extend:'Ext.data.Store',
remoteSort: true,
defaultProxyCfg: {
type: 'ajax',
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
reader: {
type: 'json',
id: 'id',
root: 'list'
}
}
constructor: function(config){
config = Ext.apply({}, config);
config.proxy = Ext.apply({
url: config.url
}, this.defaultProxyCfg);
this.callParent([config]);
}
});

Sending down additional Parameters in jqGrid url option

I need to send down an extra parameter or two to my url method in jqGrid. Is there a way to do that?
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
url: '/Encounters/GetAjaxPagedGridData/'+ #TempData["POPULATIONID"]+'',
...
This would be the method that I am trying to hit...
public string GetAjaxPagedGridData(int page, int rows, int popId) {
return "";
}
I was thinking something like this
url: '#Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })'
use post data option for example do the following:
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
url: '/Encounters/GetAjaxPagedGridData/',
postdata: {popId : TempData["POPULATIONID"],
// and any other parameters that you need to pass}

Sencha touch: JSONP parsing

Model:
app.models.Category = Ext.regModel("Category", {
fields: [
{ name: 'CategoryId', type: 'int' },
{ name: 'ImageUrl', type: 'string' },
{ name: 'ImageUrlFile', type: 'string' },
{ name: 'CategoyName', type: 'string' }
]
});
Storage:
app.stores.CategoryStore = new Ext.data.Store({
id: 'CategoryStore',
model: 'Category',
autoLoad: true,
proxy: {
type: 'scripttag',
url: 'http://localhost:1303/admin/categoriesservice/getcategories',
mehod: 'GET', //not needed
callbackKey: 'callback', //not needed
reader: {
type: 'json',
root: 'categories'//not needed with my JSONP
},
afterRequest: function (request, success) {
console.log("afterRequest");
if (success) {
console.log("success");
} else {
console.log("failed");
}
console.log(request);
}
}
});
Controller:
Ext.regController('Home', {
index: function () {
if (!this.indexView) {
this.indexView = this.render({
xtype: 'HomeIndex'
});
this.items = [app.views.HomeIndex];
}
app.viewport.setActiveItem(this.indexView);//this what i've missed
}
});
View
app.views.HomeIndex = Ext.extend(Ext.DataView, {
html: '<div class="gallery-view" style="display: block;width: 300px;border: 1px solid #fff;height: 300px;"></div>',
store: app.stores.CategoryStore, //full namespace needed
itemSelector: 'div.node',
initComponent: function () {
this.tpl = new Ext.XTemplate(
'<div style="padding:10px 5px 5px 5px;">',
'<tpl for=".">',
'<div class="node" style="background:url({ImageUrl});">',
'</div>',
'</tpl>',
'</div>'
);
//appened to successful solution
this.dataView = new Ext.DataView({
store: this.store,
tpl: this.xtpl,
itemSelector: 'div.node'
});
this.items = [this.dataView];
app.views.HomeIndex.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('HomeIndex', app.views.HomeIndex);
JSONP Result:
GetCategories([{"CategoryId":101,"CategoyName":"אוכל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/rest.png","ImageUrlFile":null,"InsertDate":"\/Date(1314507534000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":99,"CategoyName":"הצגות ומופעים","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/shows.png","ImageUrlFile":null,"InsertDate":"\/Date(1314442037000)\/","IsActive":true,"ApplicationId":100,"Applications":null},{"CategoryId":111,"CategoyName":"בריאות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/spa.png","ImageUrlFile":null,"InsertDate":"\/Date(1314856845000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":142,"CategoyName":"נופש ותיירות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/vacation.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":143,"CategoyName":"ביגוד","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/clothes.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":144,"CategoyName":"אתרים ואטרקציות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/attraction.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":105,"CategoyName":"חשמל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/elctronic.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null}]);
The exception:
Uncaught TypeError: Cannot read property 'length' of undefined
Question:
Help how can i parse via storage or any other way the JSONP issue???
You have set this in your reader
reader: {
type: 'json',
root: 'categories'
}
And I can't see categories element in your json data. Check if this is correct or add this to your json in order to be working probably
{"categories":[ ...//old json //..]}
when I tried to define
function GetCategories(data){console.log(data);}
and then invoking the jsonp response (by ctrl+c/ctrl+v into the console), I was successful, meaning the the data is a valid json string.
but when I inspected your code, I haven't seen a mechanisem that defines that function (GetCategories).
I must say that i'm unfamilier with sencha. but I aswsome that problem is that no callback function was ever created.
I see that you define a 'callbackKey: 'callback''
is there somewhere in sencha documentation that allows you to define a 'callbackValue: 'GetCategories'' or such? try and check into that direction.
Try removing "autoLoad: true" from your code. It resolved my issues on the same matter as yours.