Hello Mats,
Is there any way to put week start date(date/Month) instead of week number in event editor ui. I have tried different ways but could not succeed. Can you please help?
Support Forum
Ext.ns('App');
var employeeType;
var empId;
var resourceStore;
Ext.apply(Ext.form.VTypes, {
EngagementStatus: function(value,field)
{
var engTyp = Ext.getCmp('Engagement');
var engStat = Ext.getCmp('EngagementStatus');
if(engTyp.getValue().trim().toLowerCase()=='project' && engStat.getValue().trim().length ==0)
{
this.EngagementStatusText = 'Engagement status is srequired';
engStat.markInvalid("Engagement status is required");
return false;
}
else
{
engStat.clearInvalid();
return true;
}
},
EngagementStatusText : 'Engagement status is srequired'
});
Ext.onReady(function() {
Ext.QuickTips.init();
if (typeof console === 'undefined') {
console = {
log : Ext.log,
error : Ext.log
};
}
App.Scheduler.init();
});
var eventStore;
App.Scheduler = {
// Bootstrap function
init : function() {
setEmployeeType();
this.grid = this.createGrid();
this.initGridEvents();
this.initStoreEvents();
this.grid.render(Ext.get("scheduler-editor"));
},
onEventContextMenu : function(g, rec, e) {
e.stopEvent();
if (!g.gCtx) {
g.gCtx = new Ext.menu.Menu({
items : [
{
id : 'context-delete',
text : 'Delete event',
iconCls : 'icon-delete'
}
]
});
g.gCtx.on('itemclick', function(item, e) {
switch (item.id) {
case 'context-delete':
// alert("g.gCtx.rec.get(creatorId).trim()---"+g.gCtx.rec.get("creatorId"));
// if((isPartOfEmployeeStore(g.gCtx.rec.get("Engagement").trim()) && employeeType.trim() == 'employee') || !(employeeType.trim() == 'employee'))
if(isEventCreator(g.gCtx.rec.get("creatorId")) || (employeeType.trim() == 'admin'))
{
Ext.Ajax.request
({
url:"deleteSchedule.do",
params:
{
id:g.gCtx.rec.get("Id")
},
success: function(objServerResponse)
{
}
});
g.eventStore.remove(g.gCtx.rec);
}
else
{
Ext.MessageBox.alert('Message', "You don't have permission to delete the event.");
}
break;
default:
throw item.id + ' is not a valid menu action';
break;
}
}, this);
}
g.gCtx.rec = rec;
g.gCtx.showAt(e.getXY());
},
// Don't show tooltip if editor is visible
beforeTooltipShow : function(g, r) {
return this.editor.collapsed;
},
initStoreEvents : function() {
var g = this.grid;
g.eventStore.on('update', function (store, bookingRecord, operation) {
if (operation !== Ext.data.Record.EDIT) return;
// Simulate server delay 1.5 seconds
bookingRecord.commit.defer(1500, bookingRecord);
});
},
initGridEvents : function() {
var g = this.grid;
g.on('eventcontextmenu', this.onEventContextMenu, this);
g.on('beforetooltipshow', this.beforeTooltipShow, this);
g.on('drop', function(g, rs) {
this.editor.show(rs[0]);
}, this);
// g.on('beforeexpand',this.beforeExpandEd,this);
},
renderer : function (item, resourceRec, row, col, ds) {
var bookingStart = item.get('StartDate');
return {
headerText : item.get('Title') || ' ',
footerText : item.get('Location'),
cls : item.get('Engagement')
};
},
createGrid : function() {
// Store holding all the resources
resourceStore = new Ext.data.JsonStore({
root : 'row',
sortInfo:{field: 'Id', direction: "ASC"},
idProperty : 'Id',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "LoadResourceData.do"
}),
fields : [
'Id',
'Name',
'Emp Id',
'Email',
'Designation',
'Location',
'Sector',
'Skills',
'Education',
'Experience',
'Gender'
]
});
resourceStore.on("load",function()
{
loadEventStore();
});
resourceStore.load(
{
params :
{
searchAll : "yes"
}
}
);
// alert("som 2");
//paging for resource store
var _resourcePagingBar = new Ext.PagingToolbar(
{
pageSize : 10,
border :false,
id: '_resourceStorePagingBar',
store : resourceStore,
displayInfo : true,
displayMsg : 'Displaying Users {0} - {1} of {2}',
emptyMsg : "Records not found"
});
//alert("som 3");
// Store holding all the events
eventStore = new Ext.data.JsonStore({
sortInfo:{field: 'ResourceId', direction: "ASC"},
idProperty : 'Id',
proxy : new Ext.data.HttpProxy({
url : "LoadScheduleData.do"
}),
fields : [
{name: 'Id', type:'string'},
{name: 'creatorName'},
{name: 'creatorId'},
{name: 'ResourceId'},
{name: 'Title'},
{name: 'StartDate', type : 'date', dateFormat : 'Y-m-d'},
{name: 'EndDate', type : 'date', dateFormat : 'Y-m-d'},
{name: 'Location'},
{name: 'Engagement'},
{name: 'EngagementStatus'},
{name: 'Description'}
]
});
// eventStore.load(
// {
// params:
// {
// resourceIds:'1'
// }
// }
//
// );
var currentTime = new Date(); //TODO should start with first day of the week
var month = currentTime.getMonth();
var day = currentTime.getDate();
var year = currentTime.getFullYear();
// var start = new Date(2010, 4, 22, 6);
var start = new Date(year, month, day, 6);
var g = new Sch.EditorSchedulerPanel({
width : 1000,
height:400,
// resizeHandles : 'none',
// enableEventDragDrop : false,
// enableDragCreation : false,
allowOverlap : false,
clicksToEdit : 1,
columns : [
{header : 'Name', sortable:true, width:130, dataIndex : 'Name',menuDisabled: false},
{header : 'Emp Id', sortable:true, width:50,hidden:true,dataIndex : 'Emp Id',menuDisabled: true},
{header : 'Designation', sortable:true, width:130, dataIndex : 'Designation',menuDisabled: true},
{header : 'Location', sortable:true,width:130, dataIndex : 'Location',menuDisabled: true},
{header : 'Sector', sortable:true,hidden:true, width:130, dataIndex : 'Sector',menuDisabled: true},
{header : 'Skills', sortable:true,hidden:true, width:130, dataIndex : 'Skills',menuDisabled: true},
{header : 'Education', sortable:true,hidden:true, width:130, dataIndex : 'Education',menuDisabled: true},
{header : 'Exp', sortable:true, width:30, dataIndex : 'Experience',menuDisabled: true},
{header : 'Gender', sortable:true,hidden:true, width:130, dataIndex : 'Gender',menuDisabled: true}
],
// Setup view configuration
viewModel : {
start : start,
end : start.add(Date.MONTH, 3),
columnType : 'weekAndMonths',
viewBehaviour : Sch.ViewBehaviour.MonthView,
renderer : this.renderer
},
// Specialized template with header and footer
eventTemplate : new Ext.Template(
'<div id="{id}" style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">' +
'<div class="sch-event-inner">' +
'<span class="sch-event-header">{headerText}</span>' +
'<div class="sch-event-footer">{footerText}</div>' +
'</div>' +
String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'east'),
'</div>').compile(),
viewConfig: {
forceFit:true
},
store : resourceStore,
eventStore : eventStore,
border : true,
tbar : [
_resourcePagingBar,
' ',
{
text: 'Search',
handler: onSearch,
scope : this
},
'-',
'->',
{
iconCls : 'icon-prev',
scale : 'medium',
handler : function() {
var start = g.getStart(), end=g.getEnd();
if (Ext.getCmp('span1').pressed) {
start = start.add(Date.WEEK, -3);
end = end.add(Date.WEEK, -3);
}
else if (Ext.getCmp('span2').pressed)
{
//var days = Math.max(Date.getDurationInDays(start, end), 1);
start = start.add(Date.MONTH, -3);
end = end.add(Date.MONTH, -3);
}
else
{
start = start.add(Date.MONTH, -6);
end = end.add(Date.MONTH, -6);
}
g.setView(start, end);
}
},
{
id : 'span1',
enableToggle : true,
text: 'Weekly',
enableToggle : true,
toggleGroup: 'span',
handler : function() {
g.setView(g.getStart(), g.getStart().add(Date.WEEK, 3), 'dayAndWeeks', Sch.ViewBehaviour.WeekView, this.renderer);
}
},
{
id : 'span2',
text: 'Monthly',
enableToggle : true,
pressed: true,
toggleGroup: 'span',
inputValue: 'red',
handler : function() {
var start = g.getStart();
start.clearTime();
start.setHours(6);
g.setView(start, start.add(Date.MONTH, 3), 'weekAndMonths', Sch.ViewBehaviour.MonthView, this.renderer);
}
},
{
id : 'span3',
enableToggle : true,
text: 'Quarterly',
toggleGroup: 'span',
handler : function() {
g.setView(g.getStart(), g.getStart().add(Date.MONTH,6), 'monthAndQuarters', Sch.ViewBehaviour.MonthView, this.renderer);
}
},
// {
// xtype: 'tbspacer',
// width:8
// }
// ,
/* {
iconCls : 'icon-cleardatabase',
tooltip: 'Clear database',
scale : 'medium',
handler : function() {
g.eventStore.removeAll();
}
},
*/
{
iconCls : 'icon-next',
scale : 'medium',
handler : function() {
var start = g.getStart(), end=g.getEnd();
if (Ext.getCmp('span1').pressed)
{
start = start.add(Date.WEEK, 3);
end = end.add(Date.WEEK, 3);
}
else if (Ext.getCmp('span2').pressed)
{
//var days = Math.max(Date.getDurationInDays(start, end), 1);
start = start.add(Date.MONTH, 3);
end = end.add(Date.MONTH, 3);
}
else
{
start = start.add(Date.MONTH, 6);
end = end.add(Date.MONTH, 6);
}
g.setView(start,end);
}
}
],
tooltipTpl : new Ext.XTemplate(
'<dl class="eventTip">',
'<dt >Creator</dt><dd>{creatorName}</dd>',
'<dt class="icon-clock">Start Date</dt><dd>{[values.StartDate.format("d-M-Y")]}</dd>',
'<dt class="icon-task">Assignment</dt><dd>{Title}</dd>',
'<dt class="icon-earth">Assignment Location</dt><dd>{Location} </dd>',
'</dl>').compile(),
plugins : [
this.editor = new Sch.plugins.MyEditor()
/* this.editor = new Sch.plugins.EventEditor({
height : 320,
width : 350,
buttonAlign : 'left',
saveHandler : this.onSave,
saveHandlerScope : this,
fieldsPanelConfig : {
layout : 'form',
style:'background:#fff',
border : false,
cls : 'editorpanel',
labelAlign : 'left',
defaults : {
width : 135
},
items : [
engagementField = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
editable:false,
// vtype: 'EngagementStatus',
mode: 'local',
emptyText :'Select Engagement',
store:managerEngagementTypeStore,
valueField: 'dataFieldName',
displayField: 'displayFieldName',
name : 'Engagement',
id : 'Engagement',
fieldLabel : 'Engagement Type',
initialengagementStatusField: 'Engagement',
allowBlank:false
}),
titleField = new Ext.form.TextField({
name : 'Title',
id:'title',
fieldLabel : 'Engagement Name',
allowBlank:false
}),
locationField = new Ext.form.TextField({
name : 'Location',
fieldLabel : 'Engagement Location'
}),
engagementStatusField = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
editable:false,
// vtype: 'EngagementStatus',
mode: 'local',
emptyText :'Select Status',
store:engagementStatusStore,
valueField: 'dataFieldName',
displayField: 'displayFieldName',
name : 'EngagementStatus',
id : 'EngagementStatus',
fieldLabel : 'Engagement Status'
// allowBlank:false
}),
descriptionField = new Ext.form.TextArea({
name : 'Description',
fieldLabel : 'Description'
}),
creatorIdField = new Ext.form.Hidden({
name : 'creatorId',
fieldLabel : 'creatorId',
value : empId
})
]
},
listeners : {
expand : function() {
titleField.focus(true);
},
beforeexpand: function() {
// alert('(engagementField.getValue() == Leave)---'+(engagementField.getValue().trim().length));
// if(!(engagementField.getValue().trim() == 'leave') && employeeType.trim() == 'employee' && engagementField.getValue().trim().length > 0)
if(!(employeeType.trim()=='admin'))
{
if((!(isPartOfEmployeeStore(engagementField.getValue().trim())) && employeeType.trim() == 'employee' && engagementField.getValue().trim().length > 0) || !(isEventCreator(creatorIdField.getValue())))
{
engagementField.store = managerEngagementTypeStore;
titleField.setReadOnly(true);
engagementField.setReadOnly(true);
descriptionField.setReadOnly(true);
locationField.setReadOnly(true);
engagementStatusField.setReadOnly(true);
}
else
{
if(employeeType.trim() == 'employee')
engagementField.store = employeeEngagementTypeStore;
titleField.setReadOnly(false);
engagementField.setReadOnly(false);
descriptionField.setReadOnly(false);
locationField.setReadOnly(false);
engagementStatusField.setReadOnly(false);
}
}
}
}
})
*/
],
listeners : {
dragcreateend : {
fn : function(p, data, e) {
var newRec = new this.grid.eventStore.recordType({
Title: '',
Location : '',
Engagement : '',
Description : '',
EngagementStatus : '',
creatorId : empId,
ResourceId : data.record.get('Id'),
StartDate : data.startDate,
EndDate : data.endDate
});
this.grid.eventStore.add(newRec);
// Enter edit mode right away
this.editor.show(newRec);
},
scope : this
}
},
trackMouseOver : false
});
return g;
},
onSave : function(formPanel, newStart, newEnd, record)
{
record.beginEdit();
formPanel.getForm().updateRecord(record);
record.set('StartDate', newStart);
record.set('EndDate', newEnd);
record.endEdit();
formPanel.collapse();
// Ext.Ajax.on("requestcomplete", RequestComplete);
// formPanel.getForm().submit
// ({
Ext.Ajax.request
({
url:"schedule.do",
params:
{
id:record.get("Id"),
resourceId:record.get("ResourceId"),
title:record.get("Title"),
location:record.get("Location"),
engagement:record.get("Engagement"),
startDate:newStart,
description:record.get("Description"),
engagementStatus:record.get("EngagementStatus"),
endDate:newEnd
},
success: function(objServerResponse)
{
eval("var resultSet = " +objServerResponse.responseText);
record.beginEdit();
formPanel.getForm().updateRecord(record);
record.set('Id',resultSet.id);
record.endEdit();
}
});
// });
}
};
var designationStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_DESIGNATION
}),
fields : ['id','name'],
autoLoad: true
});
var employeeCodeStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_EMPID
}),
fields : ['id','name'],
autoLoad: true
});
var sectorStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_SECTOR
}),
fields : ['id','name'],
autoLoad: true
});
getSearchForm = Ext.extend(Ext.form.FormPanel, {
constructor : function(_config)
{
_config = (_config == null) ? {} : _config;
Ext.apply(this, _config);
getSearchForm.superclass.constructor.call(this,
{
autoHeight: true,
labelWidth : 100,
bodyStyle:'padding:5px 5px 0',
errorReader : new Ext.data.XmlReader({record : ""}, []),
items:
[{
xtype:'fieldset',
title: 'Basic Search',
autoHeight:true,
items:
[{
xtype: 'multiselect',
fieldLabel: 'Designation',
name: 'designation',
border:true,
width: 270,
height :50,
mode: 'remote',
store: designationStore,
valueField :'id',
displayField :'name'
},
{
xtype:'textfield',
fieldLabel : 'Location',
width: 270,
name :"location"
},
{
xtype: 'multiselect',
fieldLabel : 'Education',
mode: 'remote',
border:true,
store: designationStore,
height: 50,
name : "education",
valueField :'id',
displayField :'name',
width: 270
}]
},
{
xtype:'fieldset',
checkboxToggle:true,
title: 'Advance Search',
autoHeight:true,
collapsed: true,
items:
[{
xtype:'textfield',
fieldLabel : 'Employee Name',
name : "name",
width: 270
},
{
xtype: 'multiselect',
fieldLabel : 'Skill Set',
mode: 'remote',
border:true,
store: designationStore,
height: 50,
name : "skillSet",
valueField :'id',
displayField :'name',
width: 270
},
{
xtype : 'textfield',
width:100,
maxLength:'2',
fieldLabel : 'Start Experience',
name:"startExp"
},
{
xtype : 'textfield',
//id:'endExp',
width:100,
maxLength:'2',
fieldLabel : 'End Experience' ,
name : "endExp"
}
/*{
layout:'column',
border :false,
items:
[{
columnWidth:.27,
layout: 'form',
border :false,
items:
[{
xtype : 'label',
fieldLabel : 'Experience',
anchor:'100%'
}]
},
{
columnWidth:.10,
//layout: 'form',
border :false,
items:
[{
xtype : 'textfield',
width:30,
labelWidth:200,
fieldLabel : 'Start',
anchor:'99%',
name:"startExp"
}]
},
{
columnWidth:.10,
layout: 'form',
border :false,
items:
[{
xtype : 'label',
fieldLabel : 'To',
anchor:'100%'
}]
},
{
columnWidth:.10,
//layout: 'form',
border :false,
items:
[{
xtype : 'textfield',
//id:'endExp',
width:30,
labelWidth:10,
fieldLabel : 'End' ,
anchor:'100%',
name : "endExp"
}]
}]
}*/,
{
xtype: 'multiselect',
fieldLabel: 'Sector',
border:true,
width: 270,
height :80,
store: sectorStore,
valueField :'id',
hiddenName : 'id',
displayField :'name',
name :"sector"
},
{
xtype : 'combo',
fieldLabel : 'Gender',
typeAhead : true,
editable : false,
mode: 'local',
triggerAction: 'all' ,
selectOnFocus : true,
listWidth : 270,
emptyText :'Select Gender',
store: genderTypeStore,
valueField :'dataFieldName',
hiddenName : 'gender',
displayField :'displayFieldName',
width: 270
},
{
xtype : 'datefield',
fieldLabel : 'Start Date',
width: 100,
name : "scheduleStartDate"
},
{
xtype : 'datefield',
fieldLabel : 'End Date',
width: 100,
name : "scheduleEndDate"
},
{
xtype: 'radiogroup',
fieldLabel: 'Schedule',
itemCls: 'x-check-group-alt',
columns: 3,
name: 'schedule1',
items:
[{boxLabel: 'Assigned', name: 'schedule',inputValue:'yes'},
{boxLabel: 'Unassigned', name: 'schedule',inputValue:'no'},
{boxLabel: 'Both', name: 'schedule',inputValue:'all'}]
}]
}]
})
}
});
onSearch = function()
{
var _form = new getSearchForm();
var _window = new Ext.Window({
title : 'Search',
width : 450,
resizable : true,
plain : true,
modal : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'right',
layout:'fit',
items : _form,
buttons :
[{
text : 'Search',
handler : function()
{
//alert("before remove "+resourceStore.getCount());
resourceStore.removeAll();
//alert("after remove "+resourceStore.getCount());
resourceStore.load(
{
params :
{
searchAll : "no",
empName :_form.getForm().findField('name').getValue(),
//empId : _form.getForm().findField('empId').getValue(),
designation : _form.getForm().findField("designation").getValue(),
education: _form.getForm().findField("education").getValue(),
skillSet: _form.getForm().findField("skillSet").getValue(),
startExp: _form.getForm().findField("startExp").getValue(),
endExp: _form.getForm().findField("endExp").getValue(),
sector: _form.getForm().findField("sector").getValue(),
gender: _form.getForm().findField("gender").getValue(),
empLocation: _form.getForm().findField("location").getValue(),
scheduleStartDate: _form.getForm().findField("scheduleStartDate").getValue(),
scheduleEndDate: _form.getForm().findField("scheduleEndDate").getValue(),
schedule: getRadioValue(_form)
}
});
_window.setVisible(false);
_window.close();
}
},
{
text : 'Reset',
handler : function()
{
_form.getForm().reset();
}
},
{
text : 'Cancel',
handler : function()
{
_window.close();
}
}]
});
_window.show();
}
function setEmployeeType()
{
Ext.Ajax.request
({
url:"getEmployeeType.do",
params:
{
test:"test"
},
success: function(result,response)
{
// eval("var result = " +objServerResponse);
var empDetails = (result.responseText).split("#");
employeeType = empDetails[0];
empId = empDetails[1];
// alert("server response employeeType---"+employeeType); // outputs whatever was returned from the server in an alert window
}
});
}
loadEventStore = function(_conn, _response, _options)
{
//alert("bredge - after request "+resourceStore.getCount());
Ext.Ajax.removeListener("requestcomplete", loadEventStore);
var resourceIds = getResourceIdForEvent();
eventStore.removeAll();
eventStore.load(
{
params:
{
resourceIds:resourceIds
}
});
}
function getRadioValue(_form)
{
var radioGroupEle = _form.getForm().findField("schedule1");
//alert(radioGroupEle.items.length);
for( var i=0; i < radioGroupEle.items.length; i++ )
{
if( radioGroupEle.items.get(i).getValue() )
{
return radioGroupEle.items.get(i).getGroupValue();
}
}
}
function getResourceIdForEvent()
{
var eventId ="";
var storeCount = resourceStore.getCount();
//alert("bredge "+storeCount);
for( var i=0; i < storeCount; i++ )
{
var record = resourceStore.getAt(i);
//alert(record.get("Id"))
eventId += record.get("Id");
if(i<storeCount-1)
{
eventId+=",";
}
}
return eventId;
}
function isPartOfEmployeeStore(val)
{
if(employeeEngagementTypeStore.find('dataFieldName',val)==-1)
return false;
else
return true;
}
function isEventCreator(creatorId)
{
if(creatorId.length==0)
return true;
else
return (parseInt(creatorId)==parseInt(empId));
}