Our pure JavaScript Scheduler component


Post by redbock »

Hi team,

We are using the scheduler-pro (trial at the moment) and integrating it in our application.
No I'm a bit confused about the behavior after clicking on a header day for example.

On the initial load I have a start date: 01.08.2022 and end date of 31.08.2022. (leads to a lot of horizontal scrolling)

see:

Image

when I click then on a header let' s say wednesday the 03.08. it loads a range from 09.10.2021-09.05.2023

see:

Image

how I can prevent this? my expected behavior would be to just zoom in, in the initial start/end date range (01.08.2022 end date of 31.08.2022).

My view preset config looks like:

presets: [
		{
			base: 'dayAndWeek',
			id: 'myNewTest',
			tickWidth: 10,
			headers: [
				{
					unit: 'week',
					renderer: (startDate) => `Week ${DateHelper.format(startDate, 'WW')}`
				},
				{
					unit: 'day',
					dateFormat: 'ddd DD.MM'
				}
			]
		}
	],
	viewPresets: 'myNewTest',

Thanks for your help!

Best regards,
Thomas


Post by alex.l »

Hi Thomas,

Could you please provide the code you used? If you try the same in one of our examples, do you see the same result?
just open this one as an option https://bryntum.com/examples/scheduler-pro/constraints/
There is a global variable schedulerPro which you can use in console for testing. It also possible to edit code at runtime in code editor (see </> button on toolbar) if you want apply your preset too.

All the best,
Alex


Post by redbock »

Hi Alex

Thanks for your answer. Well I can experience something similar. On initial it shows me the date:
'2020-03-23' - '2020-03-27'

Then I click on the "mo 23" header. an i get a horizontal scrolling from 19.03-26.03. Why it goes past to 19.03?. In my case it's just a lot more.

Here is my code:

implementing of scheduler-pro in html

<bryntum-scheduler-pro
		#schedulerpro
		style="height: 600px"
		[startDate]="schedulerConfig.startDate"
		[endDate]="schedulerConfig.endDate"
		(onTimeAxisChange)="onTimeAxisChange($event)"
		(onTimelineViewportResize)="onTimeLineViewportResize($event)"
		(onCatchAll)="onSchedulerProEvents($event)"
		(onEventClick)="onEventClick($event)"
		(onEventDrop)="onEventDrop($event)"
		(onEventResizeEnd)="onEventResize($event)"
		(onBeforeEventDelete)="onEventDelete($event)"
		[resources]="resources"
		[rowHeight]="rowHeight"
		[barMargin]="5"
		eventStyle="colored"
		[multiEventSelect]="false"
		[presets]="schedulerConfig.presets"
		[viewPreset]="schedulerConfig.viewPresets"
		[columns]="schedulerConfig.columns"
		(onTimeAxisHeaderClick)="onTimeAxisHeaderClick($event)"
		[eventRenderer]="schedulerConfig.eventRenderer"
		[eventTooltipFeature]="schedulerConfig.features.eventTooltip"
		[eventMenuFeature]  = "schedulerConfig.features.eventMenuFeature"
		[headerZoomFeature]="schedulerConfig.features.headerZoomFeature"
	>
	</bryntum-scheduler-pro>

the config file:

/**
 * Scheduler config file
 */
import moment from 'moment';
import { TranslateService } from '@ngx-translate/core';
import { StatusToColorPipe } from '../../../shared/pipes/transform-status-to-color.pipe';
import { AppInjector } from '../../../app.module';
import { DateHelper, EventModel } from '@bryntum/schedulerpro';

const translateService = AppInjector.get(TranslateService);
const statusToColorPipe = new StatusToColorPipe();

export const schedulerConfig = {
	rowHeight: 70,
	columns: [
		{ type: 'resourceCollapse' },
		{ type: 'resourceInfo', field: 'name', width: 230 }
	],

startDate: moment().subtract(5, 'd').toDate(),
endDate: moment().add(5, 'd').toDate(),
presets: [
	{
		base: 'dayAndWeek',
		id: 'myNewTest',
		tickWidth: 10,
		headers: [
			{
				unit: 'week',
				renderer: (startDate) => `Week ${DateHelper.format(startDate, 'WW')}`
			},
			{
				unit: 'day',
				dateFormat: 'ddd DD.MM'
			}
		]
	}
],
viewPresets: 'myNewTest',
eventRenderer: ({ eventRecord }): string => {

	const statusColor = eventRecord.status ? statusToColorPipe.transform(eventRecord.status) : null;

	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore
	return `
    <div class="info">
        <div class="name"><span *ngIf="eventRecord.status" style="background-color:${statusColor}" class="qs-scheduler-status"></span> ${eventRecord.name}</div>
    </div>
    `;
},
features: {
	resourceTimeRanges: true,
	eventTooltip: {
		// template returns a custom element created in app.module.ts
		template: ({ eventRecord, startClockHtml, endClockHtml }:
								 { eventRecord; startClockHtml: string; endClockHtml: string }): string => {
			const statusName = eventRecord.status ? translateService.instant(eventRecord.status.toUpperCase()) : null;
			const statusColor = eventRecord.status ? statusToColorPipe.transform(eventRecord.status) : null;

			const statusHTML = `
			<div class="tooltip-wrapper">
				<div class="tooltip-icon" style="text-align: center"><span *ngIf="eventRecord.status" style="background-color:${statusColor}" class="qs-scheduler-status"></span></div>
				<div class="tooltip-text">${statusName}</div>
			</div>
			`;

			return `<tooltip-renderer
                name="${eventRecord.name}"
                resource-name="${eventRecord.resource?.name}"
                >${statusHTML}${startClockHtml}${endClockHtml}</tooltip-renderer>`;
		}
	},
	eventMenuFeature: {

		items: {
			copyEvent: false,
			cutEvent: false
		}

	},
	headerZoomFeature:  false
}
};

Post by marcio »

Hey redbock,

I used your config file and the scheduler-pro in our example demo and worked with no issues, but in your code, you have several listeners that I had to remove because there they are not in the configuration (assuming that they are in the component code)

(onTimeAxisChange)="onTimeAxisChange($event)"
(onTimelineViewportResize)="onTimeLineViewportResize($event)"
(onCatchAll)="onSchedulerProEvents($event)"
(onEventClick)="onEventClick($event)"
(onEventDrop)="onEventDrop($event)"
(onEventResizeEnd)="onEventResize($event)"
(onBeforeEventDelete)="onEventDelete($event)"
(onTimeAxisHeaderClick)="onTimeAxisHeaderClick($event)"

Could you please share a sample project with all your configuration and component (you can add it to one of your demos), then zip it and share it here?? With all the info that you shared so far, it's not related to your configuration, maybe something in one of the timeaxis event listeners handlers, but need the full project code to confirm that to you.

Best regards,
Márcio


Post Reply