Customizing Schedule Control Toolbar
Hi, I'm currently working with the Schedule control, and I'm attempting to modify the toolbar of this control. I've had varying levels of success. I can add an element to the toolbar (a containing div that then holds four dropdown controls) to the center element of the toolbar, however unlike with the Grid toolbar this toolbar when the window gets smaller all the elements get crushed together and overlap each other. is there a way to avoid this? I noticed that the center element appears to be larger than the rest and overlaps them completely when there are elements of significant size in the center toolbar div:
Also when using this toolbar as it shrinks it does not get the icons for paging left and right for additional contents in the toolbar, as it doesn't seem to resize in a similar way to the Grid toolbar.
an example of the behavior:
full screen
smaller window
Also, how do I properly user the toolbarItems property of the Schedule control? Setting toolbarItems: ['A list of items'] has no impact on it from what I can tell, such as
No matter what is changed here, the toolbar items remain the same. I have also tried it in the format of toolbarSettings: {
toolbarItems: ['list of items']
}
Thank you!
SIGN IN To post a reply.
4 Replies
I tried implementing the toolbarItems in the manner you showed in the demo, but now I am getting nothing in the toolbar at all. This is how I have it set up:
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '100%',
showQuickInfo: true,
quickInfoTemplates: {
content: '#EventEditorTemplate',
footer:'#footerTemplate',
},
enableAllDayScroll: true,
currentView: 'Week',
enablePersistence: true,
toolbarItems: [{ name: 'Previous', align: 'Left' },
{ name: 'Next', align: 'Left' },
{ name: 'DateRangeText', align: 'Left' },
{ name: 'Today', align: 'Right' },
{ align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon', click: onIconClick },
{
type: 'Input', align: 'Center', template: new ej.dropdowns.DropDownList({
value: 1, showClearButton: false, width: 125,
fields: { text: 'OwnerText', value: 'OwnerId' },
dataSource: ownerCollections,
})
},
{
type: 'Input', align: 'Center', template: new ej.dropdowns.DropDownList({
value: 1, showClearButton: false, width: 125,
fields: { text: 'OwnerText', value: 'OwnerId' },
dataSource: ownerCollections,
})
},
{
type: 'Input', align: 'Center', template: new ej.dropdowns.DropDownList({
value: 1, showClearButton: false, width: 125,
fields: { text: 'OwnerText', value: 'OwnerId' },
dataSource: ownerCollections,
})
},
{
type: 'Input', align: 'Center', template: new ej.dropdowns.DropDownList({
value: 1, showClearButton: false, width: 125,
fields: { text: 'OwnerText', value: 'OwnerId' },
dataSource: ownerCollections,
})
},],
eventRendered: function (args) {
window.applyCategoryColor(args, scheduleObj.currentView);
},
views: [
{
option: 'Day',
allowVirtualScrolling: true
},
{
option: 'Week',
allowVirtualScrolling: true
}]
});
scheduleObj.appendTo("#Schedule");
but the results come out like this:
I do have all the imports needed I just didn't include them in the code snippet. There are no javascript errors displaying. Previously I attempted to do it this way using the example code as a blueprint:
var data_url = '/appointments/api/v1/availability/'
ej.data.DataUtil.serverTimezoneOffset = 0;
var manager = new ej.data.DataManager({
url: data_url,
crossDomain: true,
adapter: new ej.data.UrlAdaptor()
});
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '100%',
showQuickInfo: true,
quickInfoTemplates: {
content: '#EventEditorTemplate',
footer:'#footerTemplate',
},
enableAllDayScroll: true,
currentView: 'Week',
enablePersistence: true,
toolbarItems: [
{ name: 'Previous', align: 'Left' },
{ name: 'Next', align: 'Left' },
{ name: 'Today', align: 'Left' },
{ name: 'Views', align: 'Left' },
{ name: 'DateRange', align: 'Left' },
{ name: 'Clear Filters', align: 'Right' },
{ type: 'Input', align: 'Center', id: 'type-select', template: new ej.dropdowns.DropDownList({
placeholder: 'Type',
floatLabelType: 'Never',
width: "20%",
dataSource: [{value: 'OUTBOUND', text: 'Pickup'}, {value: 'INBOUND', text: 'Dropoff'}],
fields: {value: 'value', text: 'text'},
change: function (e) {
scheduleObj.eventSettings.dataSource = manager;
scheduleObj.eventSettings.query = new ej.data.Query().addParams('type', type_select.value).addParams('carrier', carrier_select.value)
carrier_select.enabled = true;
}
})},
{ type: 'Input', align: 'Center', id: 'carrier-select' },
{ type: 'Input', align: 'Center', id: 'client-select' },
{ type: 'Input', align: 'Center', id: 'warehouse-select'}
],
views: [
{
option: 'Day',
allowVirtualScrolling: true
},
{
option: 'Week',
allowVirtualScrolling: true
}],
timeScale: {
enable: true,
interval: 60,
slotCount: 2
},
eventSettings: {
fields: {
id: { name: 'id' },
subject: { name: 'appointment' },
appointment: { name: 'appointment' },
warehouse: { name: 'warehouse' },
trailer_num: { name: 'trlr_num' },
trailer_id: { name: 'trlr_id' },
trailer_code: { name: 'trlr_cod' },
carrier_code: { name: 'carcod' },
car_move_id: { name: 'car_move_id' },
appointment_type: { name: 'appointment_type' },
slot: { name: 'slot' },
startTime: { name: 'start_date' },
endTime: { name: 'end_date' },
last_updated: { name: 'last_updated' },
isReadonly: 'notAvailable',
isAllDay:'IsAllDay',
somethingElse: 'somethingElse'
}
},
popupOpen: function (args) {
if (args.type === 'Editor') {
args.cancel = true;
}
if (args.type === 'QuickInfo') {
var appointment = args.element.querySelector('#appointment');
if(appointment != null && appointment != undefined){
if(!appointment.classList.contains('e-disabled')){
appointment.classList.add('e-disabled');
}
appointment.value = args.data['appointment'] || '';
}
var warehouse = args.element.querySelector('#warehouse');
if(warehouse != null && warehouse != undefined){
if(!warehouse.classList.contains('e-disabled')){
warehouse.classList.add('e-disabled');
}
var client = args.element.querySelector('#client');
if(!client.classList.contains('e-disabled')){
client.classList.add('e-disabled');
}
}
var trailer_num = args.element.querySelector('#trlr_num');
if(trailer_num != null && trailer_num != undefined){
trailer_num.value = args.data['trlr_num'] || '';
if(!trailer_num.classList.contains('e-disabled')){
trailer_num.classList.add('e-disabled');
}
}
var trailer_id = args.element.querySelector('#trlr_id');
if(trailer_id != null && trailer_id != undefined){
trailer_id.value = args.data['trlr_id'] || '';
if(!trailer_id.classList.contains('e-disabled')){
trailer_id.classList.add('e-disabled');
}
}
var trailer_code = args.element.querySelector('#trlr_cod');
if(trailer_code != null && trailer_code != undefined){
trailer_code.value = args.data['trlr_cod'] || '';
if(!trailer_code.classList.contains('e-disabled')){
trailer_code.classList.add('e-disabled');
}
}
var carrier_code = args.element.querySelector('#carcod');
if(carrier_code != null && carrier_code != undefined){
if(!carrier_code.classList.contains('e-disabled')){
carrier_code.classList.add('e-disabled');
}
carrier_code.value = args.data['carcod'] || '';
}
var car_move_id = args.element.querySelector('#car_move_id');
if(car_move_id != null && car_move_id != undefined){
if(!car_move_id.classList.contains('e-disabled')){
car_move_id.classList.add('e-disabled');
}
car_move_id.value = args.data['car_move_id'] || '';
}
var appointment_type = args.element.querySelector('#appointment_type');
if(appointment_type != null && appointment_type != undefined){
if(!appointment_type.classList.contains('e-disabled')){
appointment_type.classList.add('e-disabled');
}
appointment_type.value = args.data['appointment_type'] || '';
}
var slot = args.element.querySelector('#slot');
if(slot != null && slot != undefined){
if(!slot.classList.contains('e-disabled')){
slot.classList.add('e-disabled');
}
slot.value = args.data['slot'] || '';
}
var door = args.element.querySelector('#door');
if(door != null && door != undefined){
if(!door.classList.contains('e-disabled')){
door.classList.add('e-disabled');
}
door.value = args.data['door'] || '';
}
var last_updated = args.element.querySelector('#last_updated');
if(last_updated != null && last_updated != undefined){
if (!last_updated.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({
format: "yyyy-MM-dd hh:mm a",
value: args.data['last_updated'] || '' }, last_updated);
}
if(!last_updated.classList.contains('e-disabled')){
last_updated.classList.add('e-disabled');
}
}
var start_date = args.element.querySelector('#start_date');
if(start_date != null && start_date != undefined){
if (!start_date.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ format: "yyyy-MM-dd hh:mm a", value: args.data['start_date'] || '' }, start_date);
}
if(!start_date.classList.contains('e-disabled')){
start_date.classList.add('e-disabled');
}
}
var end_date = args.element.querySelector('#end_date');
if(end_date != null && end_date != undefined){
if (!end_date.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ format: "yyyy-MM-dd hh:mm a", value: args.data['end_date'] || '' }, end_date);
}
if(!end_date.classList.contains('e-disabled')){
end_date.classList.add('e-disabled');
}
}
}
},
actionBegin: function (args) {
},
eventRendered: function (args) {
if(args.data['notAvailable'] == true){
args.element.style.backgroundColor = '#a2a3a3';
args.element.style.textAlign = 'right';
args.element.style.width = '100%';
args.element.style.zIndex = '0';
args.element.style.left = '0px';
unavailables = document.querySelectorAll('.e-read-only');;
for (var i = 0; i < unavailables.length; i++) {
children = unavailables[i].querySelectorAll('.e-appointment-details');
for (var j = 0; j < children.length; j++) {
children[j].style.textAlign = 'right';
}
}
}
else{
args.element.style.backgroundColor = '#21a1ea';
args.element.style.zIndex = '1';
}
}
});
scheduleObj.appendTo("#Schedule");
but this is giving the same result of a completely empty center toolbar div. I'm not sure what I might be doing wrong
SIGN IN To post a reply.
