TimeAxisHeaderMenu
Feature

Adds scheduler specific menu items to the timeline header context menu.

Default time axis header menu items

Here is the list of menu items provided by this and other features:

Reference	Text	Weight	Feature	Description
`eventsFilter`	Filter tasks	100	EventFilter	Submenu for event filtering
>`nameFilter`	By name	110	EventFilter	Filter by `name`
			Removed when a mode of a `Calendar`
`zoomLevel`	Zoom	200	This feature	Submenu for timeline zooming
>`zoomSlider`	-	210	This feature	Changes current zoom level
`dateRange`	Date range	300	This feature	Submenu for timeline range
`setRange`	Time range	300	Only added when a `mode` of a `Calendar`	Sets the Scheduler's`range`
			Replaces the Date range menu item
>`startDateField`	Start date	310	This feature	Start date for the timeline
>`endDateField`	End date	320	This feature	End date for the timeline
>`leftShiftBtn`	<	330	This feature	Shift backward
>`todayBtn`	Today	340	This feature	Go to today
>`rightShiftBtn`	>	350	This feature	Shift forward
`currentTimeLine`	Show current timeline	400	TimeRanges	Show current time line

>: first level of submenu

Customizing the menu items

The menu items in the TimeAxis Header menu can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config of the feature.

Add extra items:

const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            items : {
                extraItem : {
                    text : 'Extra',
                    icon : 'fa fa-fw fa-flag',
                    onItem() {
                        ...
                    }
                }
            }
        }
    }
});

Remove existing items:

const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            items : {
                zoomLevel : false
            }
        }
    }
});

Customize existing item:

const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            items : {
                zoomLevel : {
                    text : 'Scale'
                }
            }
        }
    }
});

Customizing submenu items:

const scheduler = new Scheduler({
     features : {
         timeAxisHeaderMenu : {
             items : {
                 dateRange : {
                     menu : {
                         items : {
                             todayBtn : {
                                 text : 'Now'
                             }
                         }
                     }
                 }
             }
         }
     }
});

Manipulate existing items:

const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            // Process items before menu is shown
            processItems({ items }) {
                 // Add an extra item dynamically
                items.coolItem = {
                    text : 'Cool action',
                    onItem() {
                          // ...
                    }
                }
            }
        }
    }
});

The `processItems` implementation my be an `async` function which `awaits` a result to mutate the `items` object.

Full information of the menu customization can be found in the "Customizing the Event menu, the Schedule menu, and the TimeAxisHeader menu" guide.

Video guides

@youtube

This feature is enabled by default

Useful configs and functions

Member	Description
items	Menu items configuration object
timeAxisHeaderMenuBeforeShow	Fires before menu is shown
timeAxisHeaderMenuItem	Fires when item is clicked
timeAxisHeaderMenuShow	Fires after menu is shown

Configs

Configs are options you supply in a configuration object when creating an instance of this class

items : Object<String, MenuItemEntry>
This is a preconfigured set of items used to create the default context menu.

The items provided by this feature are listed in the intro section of this class. You can configure existing items by passing a configuration object to the keyed items.

To remove existing items, set corresponding keys null:
```
const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            items : {
                eventsFilter : null
            }
        }
    }
});
```
See the feature config in the above example for details.
processItems : Function
A function called before displaying the menu that allows manipulations of its items. Returning false from this function prevents the menu being shown.
```
  features         : {
      timeAxisHeaderMenu : {
          processItems({ items }) {
              // Add or hide existing items here as needed
              items.myAction = {
                  text   : 'Cool action',
                  icon   : 'fa fa-fw fa-ban',
                  onItem : () => console.log('Some coolness'),
                  weight : 300 // Move to end
              };

              // Hide zoom slider
              items.zoomLevel.hidden = true;
          }
      }
  },
```
Parameters
- context : Object
  
  An object with information about the menu being shown.
- feature : TimeAxisHeaderMenu
  
  A reference to this feature.
- domEvent : Event
  
  The initiating event.
- event : Event
  
  DEPRECATED: The initiating event.
- point : Number[]
  
  The client X and Y position of the initiating event.
- targetElement : HTMLElement
  
  The target to which the menu is being applied.
- items : Object<String, MenuItemEntry>
  
  An object containing the menu item configs keyed by their id.
Returns

Boolean/null
:

Returning false from this function prevents the menu being shown.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTimeAxisHeaderMenu : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TimeAxisHeaderMenu class, or subclass thereof.

isTimeAxisHeaderMenu : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimeAxisHeaderMenu class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

timeAxisHeaderMenuBeforeShow

PREVENTABLE

ON-OWNER

This event fires on the owning Scheduler or Gantt widget before the context menu is shown for the time axis header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Note that this event is triggered on the owning widget:
timeAxisHeaderMenuItem

ON-OWNER

This event fires on the owning Scheduler or Gantt widget when an item is selected in the header context menu.

Note that this event is triggered on the owning widget:
timeAxisHeaderMenuShow

ON-OWNER

This event fires on the owning Scheduler or Gantt widget after the context menu is shown for a header

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onTimeAxisHeaderMenuBeforeShow

PREVENTABLE

ON-OWNER

This handler is called on the owning Scheduler or Gantt widget before the context menu is shown for the time axis header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Note that this handler is called on the owning widget:
onTimeAxisHeaderMenuItem

ON-OWNER

This handler is called on the owning Scheduler or Gantt widget when an item is selected in the header context menu.

Note that this handler is called on the owning widget:
onTimeAxisHeaderMenuShow

ON-OWNER

This handler is called on the owning Scheduler or Gantt widget after the context menu is shown for a header

Note that this handler is called on the owning widget:

id: timeAxisHeaderMenu

Source path

Scheduler/feature/TimeAxisHeaderMenu.js

Demo

examples/basic

TimeAxisHeaderMenu
Feature

Default time axis header menu items

Customizing the menu items

Add extra items:

Remove existing items:

Customize existing item:

Customizing submenu items:

Manipulate existing items:

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

TimeAxisHeaderMenu Feature

Default time axis header menu items

Customizing the menu items

Add extra items:

Remove existing items:

Customize existing item:

Customizing submenu items:

Manipulate existing items:

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

TimeAxisHeaderMenu
Feature