Premium support for our pure JavaScript UI components


Post by era »

I want to have my header to always look like this:
Image

But instead, they look like this:
Image

How do I specify my headers? Zooming changes the headers, does the viewPreset also change then?... Seems like I dont have any control over this. Do I need to specify my headers for a specific ZoomLevel? No matter what zoomLevel I'm at, I can't figure out how to render all hours between 8-15

This is my config for viewPreset.

viewPreset={{
		base: 'weekAndDay',
		displayDateFormat: 'HH:mm',    // Controls how dates will be displayed in tooltips etc
		weekStartDay: 1,
		shiftIncrement: 1,             // Controls how much time to skip when calling shiftNext and shiftPrevious.
		shiftUnit: 'day',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
		defaultSpan: 6,            // By default, if no end date is supplied to a view it will show 12 hours

	timeResolution: {              // Dates will be snapped to this resolution
		unit: 'minute',       // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
		increment: 15
	},

	headers: [                     // This defines your header rows from top to bottom
		{                           // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
			unit: 'd',
			dateFormat: 'dddd D. MMM'
		},
		{
			unit: 'h',
			dateFormat: 'HH:mm'
		}
	],

	columnLinesFor: 1              // Defines header level column lines will be drawn for. Defaults to the last level.
}}

Post by pmiklashevich »

Hello,

Yes, exactly. You're right! Zooming is just switching between view presets specified for the scheduler. Please see presets config for details. To have all header the same you need to specify the same headers for all presets. You can extract records from the PresetManager store, copy them, modify the copy and assign to the scheduler.presets. Then select one of those to set to the viewPreset config.

You can find how custom view presets are configured in the Configuration demo.

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by era »

Where would you modify the presets in a react app that uses the scheduler?... Having a little trouble translating the example to a React app logic that uses the wrapper.


Post by alex.l »

Hi era,

To use it, you need to add presets string into examples/react/_shared/src/lib/BryntumScheduler.js wrapper, in the configs[] section.
After that you might set it in schedulerConfig.js as you did for all the rest of Scheduler's props.
Here is a link to our docs: https://www.bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-presets
We will update the wrapper it in our codebase as well.

All best,
Alex

All the best,
Alex


Post Reply