PresetManager

Intro

This is a global Store of ViewPresets, required to supply initial data to Scheduler's presets.

You can provide new view presets globally or for a specific scheduler.

NOTE: You cannot modify existing records in the PresetManager store. You can either remove preset records from the store or add new records to the store. Also please keep in mind, all changes provided to the PresetManager store are not reflected to the presets of schedulers that already exist!

If you want to have just a few presets (also known as zoom levels) in your Scheduler, you can slice corresponding records from the PresetManager and apply them to the Scheduler presets config.

const newPresets = PresetManager.records.slice(10, 12);

const scheduler = new Scheduler({
    presets    : newPresets, // Only 2 zoom levels are available
    viewPreset : newPresets[0].id
});

If you want to adjust all default presets and assign to a specific scheduler you are going to create, you can extend them and pass as an array to the Scheduler presets config. Here is an example of how to set the same timeResolution to all ViewPresets.

const newPresets = PresetManager.map(preset => {
    return {
        id             : 'my_' + preset.id,
        base           : preset.id, // Based on an existing preset
        timeResolution : {
            unit      : 'day',
            increment : 1
        }
    };
});

const scheduler = new Scheduler({
    presets     : newPresets,
    viewPreset : 'my_hourAndDay'
});

If you want to do the same for all schedulers which will be created next, you can register new presets in a loop.

PresetManager.records.forEach(preset => {
    // Pass the same ID, so when a new preset is added to the store,
    // it will replace the current one.
    PresetManager.registerPreset(preset.id, {
       id             : preset.id,
       base           : preset.id,
       timeResolution : {
           unit      : 'day',
           increment : 1
       }
   });
});

Here is an example of how to add a new ViewPreset to the global PresetManager store and to the already created scheduler presets.

const scheduler = new Scheduler({...});

const newGlobalPresets = PresetManager.add({
    id              : 'myNewPreset',
    base            : 'hourAndDay', // Based on an existing preset
    columnLinesFor  : 0,
    // Override headers
    headers : [
        {
            unit       : 'day',
            // Use different date format for top header 01.10.2020
            dateFormat : 'DD.MM.YYYY'
        },
        {
            unit       : 'hour',
            dateFormat : 'LT'
        }
    ]
});

// Add new presets to the scheduler that has been created before changes
// to PresetManager are applied
scheduler.presets.add(newGlobalPresets);

Predefined presets

Predefined presets are:

secondAndMinute - creates a 2 level header - minutes and seconds:

Second and minute

//<code-header>
fiddle.title = 'Second and minute';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6, 10, 0),
    endDate   : new Date(2018, 4, 6, 10, 2),

    viewPreset : 'secondAndMinute',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

minuteAndHour - creates a 2 level header - hours and minutes:

Minute and hour

//<code-header>
fiddle.title = 'Minute and hour';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6, 10),
    endDate   : new Date(2018, 4, 6, 14),

    viewPreset : 'minuteAndHour',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

hourAndDay - creates a 2 level header - days and hours:

Hour and day

//<code-header>
fiddle.title = 'Hour and day';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 10),

    viewPreset : 'hourAndDay',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

dayAndWeek - creates a 2 level header - weeks and days:

Day and week

//<code-header>
fiddle.title = 'Day and week';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 20),

    viewPreset : 'dayAndWeek',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

dayAndMonth - creates a 2 level header - months and days:

Day and month

//<code-header>
fiddle.title = 'Day and month';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 15),
    endDate   : new Date(2018, 5, 14),

    viewPreset : 'dayAndMonth',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

weekAndDay - just like dayAndWeek but with different formatting:

Week and day

//<code-header>
fiddle.title = 'Week and day';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 20),

    viewPreset : 'weekAndDay',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

weekAndDayLetter - creates a 2 level header - weeks and day letters:

Week and day letter

//<code-header>
fiddle.title = 'Week and day letter';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 20),

    viewPreset : 'weekAndDayLetter',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

weekAndMonth - creates a 2 level header - months and weeks:

Week and month

//<code-header>
fiddle.title = 'Week and month';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 15),
    endDate   : new Date(2018, 5, 14),

    viewPreset : 'weekAndMonth',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

weekDateAndMonth - creates a 2 level header - months and weeks (weeks shown by first day only):

Week date and month

//<code-header>
fiddle.title = 'Week date and month';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 15),
    endDate   : new Date(2018, 5, 14),

    viewPreset : 'weekDateAndMonth',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

monthAndYear - creates a 2 level header - years and months:

Month and year

//<code-header>
fiddle.title = 'Month and year';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 4, 1),
    endDate   : new Date(2018, 12, 31),

    viewPreset : 'monthAndYear',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

year - creates a 2 level header - years and quarters:

Year

//<code-header>
fiddle.title = 'Year';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 0, 1),
    endDate   : new Date(2019, 11, 31),

    viewPreset : 'year',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

manyYears - creates a 2 level header - 5-years and years:

Many years

//<code-header>
fiddle.title = 'Many years';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    autoHeight : true,

    startDate : new Date(2018, 0, 1),
    endDate   : new Date(2020, 11, 31),

    viewPreset : 'manyYears',

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ]
});

See the ViewPreset and ViewPresetHeaderRow classes for a description of the view preset properties.

Localizing View Presets

Bryntum Scheduler uses locales for translations including date formats for view presets.

To translate date format for view presets just define the date format for the specified region for your locale file, like this:

const locale = {

    localeName : 'En',

    // ... Other translations here ...

    PresetManager : {
        // Translation for the "weekAndDay" ViewPreset
        weekAndDay : {
            // Change the date format for the top and middle levels
            topDateFormat    : 'MMM',
            middleDateFormat : 'D'
        },
        // Translation for the "dayAndWeek" ViewPreset
        dayAndWeek : {
            // Change the date format for the top level
            topDateFormat : 'MMMM YYYY'
        }
    }
}

LocaleManager.applyLocale(locale);

Check the localization demo and this guide for more details.

Configs

Common

autoCommitStoreCRUD

autoLoadStore

dataStore

fieldsStore

groupersStoreGroup

idStore

lazyLoadStore

listenersEvents

modelClassStore

requestDataStore

sortersStoreSort

syncDataOnLoadStoreSync

Advanced

allowNoIdStore

applyChangesetFilterSortTargetStoreChanges

ignoreRemoteChangesInSTMStoreStm

startGroupsCollapsedStoreGroup

stmStoreStm

storageStore

storeClassStore

useLocaleSortStoreSort

useRawDataStore

Chained store

chainedFieldsStoreChained

chainedFilterFnStoreChained

chainFiltersStoreChained

dontRelayToMasterStoreChained

doRelayToMasterStoreChained

excludeCollapsedRecordsStoreChained

ignoreLinkRecordsStoreChained

masterStoreStoreChained

syncOrderStoreChained

syncSortStoreChained

Filtering

filtersStoreFilter

reapplyFilterOnAddStoreFilter

reapplyFilterOnUpdateStoreFilter

reapplySortersOnUpdateStoreSort

remoteFilterStoreFilter

Misc

bubbleEventsEvents

callOnFunctionsEvents

Other

catchEventHandlerExceptionsEvents

keepExpandedOnLoadStoreTree

useSparseIndexStoreSparseIndex

verifyNoGeneratedIdsStore

zoomOrderPresetStore

Paging

pageParamNameStorePaging

pageSizeStorePaging

pageSizeParamNameStorePaging

pageStartParamNameStorePaging

remotePagingStorePaging

treeStore

Properties

Common

idStore

lazyLoadStore

Advanced

applyChangesetFilterSortTargetStoreChanges

ignoreRemoteChangesInSTMStoreStm

isChainedStoreChained

StopBranchstaticStoreTree

Class hierarchy

isEventsEvents

isPresetStorePresetStore

isStoreStore

isStoreChainedStoreChained

isStoreChangesStoreChanges

isStoreCRUDStoreCRUD

isStoreFilterStoreFilter

isStoreGroupStoreGroup

isStorePagingStorePaging

isStoreRelationStoreRelation

isStoreSearchStoreSearch

isStoreSortStoreSort

isStoreSparseIndexStoreSparseIndex

isStoreStateStoreState

isStoreStmStoreStm

isStoreSumStoreSum

isStoreSyncStoreSync

isStoreTreeStoreTree

Filtering

reapplySortersOnUpdateStoreSort

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

Other

catchEventHandlerExceptionsEvents

currentPageStorePaging

formattedJSONStore

groupHeaderRecordsStoreGroup

jsonStore

storesstaticStore

verifyNoGeneratedIdsStore

Paging

isPagedStorePaging

lastPageStorePaging

pageSizeStorePaging

Records

allRecordsStore

autoCommitStoreCRUD

changesStoreCRUD

countStore

dataStore

firstStore

hasChangesStoreCRUD

lastStore

modelClassStore

recordsStore

totalCountStore

Sort, group & filter

filtersStoreFilter

groupersStoreGroup

isFilteredStoreFilter

isGroupedStoreGroup

isSortedStoreSort

sortersStoreSort

Tree

isTreeStoreTree

leavesStoreTree

rootNodeStore

Functions

101

Other

deletePreset

Deletes a view preset

Parameter	Type	Description
`id`	String	The id of the preset, or the preset instance.

normalizePreset

Applies preset customizations or fetches a preset view preset using its name.

Parameter	Type	Description
`presetOrId`	String \| ViewPresetConfig	Id of a predefined preset or a preset config object

Returns: ViewPreset -

Resulting ViewPreset instance

registerPreset

Registers a new view preset base to be used by any scheduler grid or tree on the page.

Parameter	Type	Description
`id`	String	The unique identifier for this preset
`config`	ViewPresetConfig	The configuration properties of the view preset (see ViewPreset for more information)