Related
I am trying to make events visually span over all the resources when 1 event is held in all the resources.
Here is a simplified pen of my data https://codepen.io/mike66187/pen/VwyONwa
and this is what i want to achieve with it resources with spanned event
code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var date = new Date();
date.setUTCHours(12)
date.setUTCMinutes(0)
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'resourceTimeGridDay',
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B'},
{ id: 'c', title: 'Room C' },
{ id: 'd', title: 'Room D' }
],
events: [ {
id: '1',
resourceIds: ['a', 'b', 'c', 'd'],
title: 'Meeting',
start: date
}]
});
calendar.render();
});
How can i achieve this?
I'm using fullcalendar-2.6.0 and fullcalendar-scheduler-1.2.0.
Below is my code:
$('#calendar').fullCalendar({
resourceAreaWidth: 230,
now: '2016-02-15',
lang: 'fr',
editable: true,
aspectRatio: 1.5,
scrollTime: '00:00',
header: {
left: 'promptResource today prev,next',
center: 'title',
},
customButtons: {
promptResource: {
text: '+ room',
click: function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
defaultView: 'timelineWeek',
views: {
timelineWeek: {
slotDuration: { days: 1 }
}
},
resourceLabelText: 'PK',
resources: [
{ id: 'a', title: '163+000' },
{ id: 'b', title: '164+000', eventColor: 'green' },
{ id: 'c', title: '165+000', eventColor: 'orange' },
{ id: 'd', title: '166+000' },
{ id: 'e', title: '167+000' },
{ id: 'f', title: '168+000', eventColor: 'red' },
{ id: 'g', title: '169+000' },
{ id: 'h', title: '170+000' },
{ id: 'i', title: '171+000' },
{ id: 'j', title: '172+000' },
{ id: 'k', title: '173+000' },
{ id: 'l', title: '174+000' }
],
events: [
{ id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
]
});
The result:
I want to switch the axis
I nedd to have resources on the top and time slots on the left axis.
Thank you very much for your help.
Set the defaultView property to agendaDay.
for e.g.
defaultView: 'agendaDay';
I read the link you just sent me.
Below is my code:
$('#calendar').fullCalendar({
defaultView: 'week',
defaultDate: '2016-02-15',
now: '2016-02-16',
lang: 'fr',
editable: true,
selectable: true,
eventLimit: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'week'
},
views: {
week: {
type: 'agenda',
duration: { days: 7 },
groupByResource: true
}
},
//// uncomment this line to hide the all-day slot
allDaySlot: false,
events: [
{ id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
],
resources: function (callBack) {
callBack([
{ id: 'a', title: '163+000', altTitle: '163+000' },
{ id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
{ id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
{ id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
]);
},
resourceRender: function (dataTds, eventTd) {
console.log('resourcerender');
console.log(eventTd);
console.log(dataTds);
var textElement = eventTd.empty();
textElement.append('<b>' + dataTds.altTitle + '</b>');
},
});
Below is the result:
I want days on the left side not hours
The result is much better than before but I still need to have days on the left side, not hours. I don't need days on the top side.
Thank you again for your help.
I have a meteor app using livestamp. However, I wish to represent a collection within a reactive-table. However, when I try the code below, it doesn't work (I see nothing in the updated column):
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (degC)' },
{ key: 'ts', label: 'updated', fn: (v,o) -> livestamp v }
]
}
but when I use it within a template, it works fine. How can I get the functionality of livestamp within my reactive table?
You can do that with https://atmospherejs.com/aldeed/tabular it's also datatables but it's different package (in my opinion better)
if you choose to use it here is an example, tabular has the option to render fields as a template and livestamp should work just as on the template itself.
TabularTables.Books = new Tabular.Table({
name: "Books",
collection: Books,
columns: [
{data: "_id", title: "id"},
{data: "_id", title: "Rack"},
{ data: 'ts', title: 'updated',
tmpl: Meteor.isClient && Template.liveStamp
}
]
});
// template
<template name="liveStamp">
<p>{{livestamp this.ts}}</p>
</template>
so i guess it helps to actually read the manual....
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (°C)' },
{ key: 'ts', label: 'updated', tmpl: Template.sensor_updated }
]
}
and then a template somewhere...
<template name="sensor_updated">
{{ livestamp ts }}
</template>
I have tried various ways to refresh the grid but everything I try doesn't work. Do I refresh the Grid or do I load the store??? You can see that the paging tool bar is still showing 50 pages after the filtering. If there are no dates on a given pag and it is empty then it will disable the tool bar and paging doesn't work after that page un less you refresh the browser and skip over the empty page. So, in my case page 15 has no rows so it breaks when u hit next and get that page. If you type in the page number 16 then all is good until you hit another's empty page.
My datepicker is in my viewport below and I have tried refreshing the gird and loading the store as well as other things which mostly result in undefined error. Not sure where to start with this one so I will show my code and screen shots below:
BEFORE DATE SELECTION:
AFTER DATE SELECTION:
STORE:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
//extraParams :{limit:1000},
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here maybe??
}
}
});
GRID PANEL:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
//buffered: true,
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
VIEWPORT:
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
//store.load();
//store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
CONTROLLER:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker Bullshit right fucking here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
// var grid = Ext.widget('userlist');
},
onUsersStoreDataChange: function(me)
{
//console.log('Hey the store data just changed!');
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
UPDATED VIEWPORT: Changes made only in datepicker handler
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// Load the store
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
This line is likely causing the issues.
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
I'm not sure why you are calling Ext.encode on whatever store.filter returns, but I don't think you want to do that (and it is likely causing the undefined errors).
As for the paging toolbar not updating the current count, it is likely you just aren't returning the correct information in your server response when updating the store. The server response should include the total number of records. According to the docs for Ext.toolbar.Paging, http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.toolbar.Paging:
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // ***Note:** this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}
I have a code as below,
window = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.applyIf(this,{
fbar: {
xtype: 'toolbar',
items: [{
xtype: 'button',
id: 'button1',
text: 'button1'
ref: ??
}
]
},
items:[{
xtype: 'form',
items: [{
layout: 'form',
items:[{
xtype: 'field'
id: 'field1'
ref: ??
}]
}]
}]
})
}
})
what can i have for ref property for field and button above, so that i can use with window variable? Please help me in this.
i tried with '../../button', but could not get access through window variable.
i figure it myself.
the ref for button1 will be "../button" and ref for field will be "../../fieldname"... The window is invoked as,
testWindow = new window();
And the button1 can be accessed as,
testWindow.button
and the field as
testWindow.fieldname