Our pure JavaScript Scheduler component


Post by absox »

Wondering if there is a better way to disable all of the items in both Event and Column Context Menus. We've created the following workarounds:

features: {
	tree: true,
	scheduleContextMenu: {
		items: {
			addEvent: false
		}
	},

   contextMenu: {
	processCellItems: ({ record, items }) => {
		if (record.isParent) { return false; }
		items.length = 0;    // hack to remove delete event item
		items.push({
				text: 'Edit Booking',
				onItem: ({ record }) => { ... }
		});
	},
},

   eventContextMenu: {
	defaultItems: {
		deleteEvent: false,
	},
	processItems({ eventRecord, items }) {
		delete items._super; // hack to remove empty menu item
	},
	items: {
		editBooking: {
			text: 'Edit Booking',
			onItem: ({ eventRecord }) => { ... }
		},
	},
},
},

For contextMenu, I wasn't able to remove the "Delete Record" button without basically deleting the items array in processCellItems by setting the length to 0.

For eventContextMenu, setting deleteEvent to false does get rid of the buttons, however, there is an empty item that shows up.

Thanks for your help!


Post by pmiklashevich »

Please set showRemoveRowInContextMenu to false on the Scheduler.

For EventContextMenu please set deleteEvent item in items to false.

new Scheduler({
    showRemoveRowInContextMenu : false,
    features : {
        eventContextMenu : {
            items : {
                deleteEvent : false
            }
        },
        ....

In your case there is a config to remove items. But if you want to fine-tune items, or remove something from items that has no explicit config, processItems/processCellItems is a good place to mutate the items.

Please note, context menus are refactored in the next major release . You can find the changes in the changelog and in the upgrade guide.

Pavlo Miklashevych
Sr. Frontend Developer


Post by sanid »

Hi Guys, I have similar problem regarding contextmenus, since I am trying to add additional items inside contextmenus for events, empty scheduler space and resources on the left.
I am using Angular9 + Byrntum Scheduler 3.1.3 used as an Angular component loaded from scheduler.umd.min.js.
I've used this as an reference:
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/ScheduleContextMenu

Usage html:

<bry-scheduler #scheduler [rowHeight]=rowHeight [barMargin]="barMargin" [events]="events" [resources]="resources"
    [timeRanges]="timeRanges" [startDate]="startDate" [endDate]="endDate" [columns]="columns"
    [eventTooltipFeature]="false" [eventContextMenuFeature]="false" [features]="features"
    (onSchedulerEvents)="onSchedulerEvents($event)">
</bry-scheduler>

features property in component:

  features : {
    stripe : true,
    group  : 'planningAreaName',

   scheduleContextMenu : {
    // Extra items for all events
    items : [
      {
          text : 'Extra',
          icon : 'b-fa b-fa-fw b-fa-flag',
          onItem: (eventRecord) => {
            handleClickEvent(eventRecord);
          }
      }
  ]
  }
};

Result is this:

Byrnthum scheduler add event.PNG
Byrnthum scheduler add event.PNG (19.89 KiB) Viewed 976 times

Could you please tell me what am I missing and how to edit contextmenuitems?
Many Thanks :)


Post by pmiklashevich »

Hello @sanid

Please see this guide: https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md
See "Supported features" section. In angular wrapper features are configured as a separate property which consists of feature name + 'Feature' postfix.

Contextmenus for:

  • events: eventContextMenuFeature
  • empty scheduler space: scheduleContextMenuFeature
  • resources on the left: contextMenuFeature

Please have them configured and passed to the component
You can search in Scheduler/examples/angular folder by the feature names to see how we use them.

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply