The default behaviour of the editor is a pop up. I want to have the calendar on the left and the editor on the right. The default view should be calendar occupying the entire width of the screen. Upon editing an event the editor should slide in from the left resizing the calendar to 70% of the screen.
I'm thinking of setting up a splitter but I'm not sure where to start in Angular,
const calendar = new Calendar({
// Start life looking at this date
date : new Date(2020, 9, 12),
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
transport : {
load : {
url : 'data/data.json'
}
},
autoLoad : true
},
appendTo : 'wrapper',
listeners : {
beforeEventEdit({ eventRecord }) {
panel.expand();
panel.widgetMap.nameField.value = eventRecord.name
return false;
}
},
// Features named by the properties are included.
// An object is used to configure the feature.
features : {
eventTooltip : {
// Configuration options are passed on to the tooltip instance
// We want the tooltip's left edge aligned to the right edge of the event if possible.
align : 'l-r'
}
}
});
const panel = window.panel = new Panel({
appendTo : 'wrapper',
width : 0,
title : 'Event Edit',
collapsible : true,
collapsed : true,
items : {
nameField : {
type : 'text',
label : 'name',
}
},
bbar : {
items : {
saveButton : {
type : 'button',
text : 'save',
onAction() {
calendar.selectedEvents[0].set('name', panel.widgetMap.nameField.value);
// collapse the panel
panel.collapse();
// set the fields to empty
panel.widgetMap.nameField.value = '';
}
}
}
}
});
const calendar = new Calendar({
// Start life looking at this date
date : new Date(2020, 9, 12),
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
transport : {
load : {
url : 'data/data.json'
}
},
autoLoad : true
},
appendTo : 'wrapper',
listeners : {
beforeEventEdit({ eventRecord }) {
panel.expand();
panel.widgetMap.nameField.value = eventRecord.name
return false;
}
},
// Features named by the properties are included.
// An object is used to configure the feature.
features : {
eventTooltip : {
// Configuration options are passed on to the tooltip instance
// We want the tooltip's left edge aligned to the right edge of the event if possible.
align : 'l-r'
}
}
});
const panel = window.panel = new Panel({
appendTo : 'wrapper',
width : 0,
title : 'Event Edit',
collapsible : true,
collapsed : true,
items : {
nameField : {
type : 'text',
label : 'name',
}
},
bbar : {
items : {
saveButton : {
type : 'button',
text : 'save',
onAction() {
calendar.selectedEvents[0].set('name', panel.widgetMap.nameField.value);
// collapse the panel
panel.collapse();
// set the fields to empty
panel.widgetMap.nameField.value = '';
}
}
}
}
});