Hi,
we are using the calendar + scheduler, allmost 100% out of one of the demos.
using calendar and scheduler version 5.3.6 works as intended (see image)
but we are currently upgrading to 5.6.3 to get some of the new features.
when i upgrade the packages to this version, no events are rendered into timeline, the calendar views seem to work normal. (see image )
Hey ehc-between,
Do you have anything printed in the console, like an error or warning related to the Scheduler? With the screenshots is not very clear what could be causing that behavior, if you could provide a sample project or reproduce that in one of our demos, we can debug and check if it's a bug or something else.
Best regards,
Márcio
Im not able to create a small demo to descibe it because of some error when trying to add the timeLine mode into a basic example demo you have ( displayName : "Timeline", Object literal may only specify known properties, and 'displayName' does not exist in type 'Partial<SchedulerConfig>'.)
but here is my config that works in 5.3.6:
import {
DateHelper,
DomClassList,
EventModel,
EventModelConfig,
Slider,
StringHelper,
Tooltip,
Widget
} from "@bryntum/calendar";
import {OrderCompactResponse} from "../../../../@shared/models/order/order.module";
import {AddressCompactResponse} from "../../../../@shared/models/address/address.module";
import {ResourceResponse} from "../../../../@shared/models/resources/resources.module";
import {EventNoteResponse} from "../../../../@shared/models/events/events.module";
import {InternalUserResponse} from "../../../../@shared/models/user/user.module";
type CustomEventModelConfig = EventModelConfig & {
eventId: number;
eventName: string;
eventTypeId: number;
eventDescription?: string | null;
orderId?: number | null;
orderCompact?: OrderCompactResponse | null;
durationHours: number;
address?: AddressCompactResponse | null
approved?: number | null
eventResources?: ResourceResponse[] | null
notes?: EventNoteResponse[] | null;
users?: InternalUserResponse[] | null;
}
// ---------------------------- Custom EventModel - Extends EventModel ----------------------------
export default class CustomEventModel extends EventModel {
static get $name(): string {
return 'CustomEventModel';
}
static override get fields() : object[] {
return [
{ name : 'eventId' },
{ name : 'eventName' },
{ name : 'eventTypeId' },
{ name : 'eventDescription' },
{ name : 'orderId' },
{ name : 'orderCompact' },
{ name : 'durationHours' },
{ name : 'address' },
{ name : 'approved' },
{ name : 'eventResources' },
{ name : 'notes' },
{ name : 'users' },
];
}
public eventId: number
public eventName: string
public eventTypeId: number
public eventDescription: string
public orderId: number
public orderCompact: OrderCompactResponse
public durationHours: number
public address: AddressCompactResponse
public approved: number
public eventResources: ResourceResponse[]
public notes: EventNoteResponse[]
public users: InternalUserResponse[]
constructor(config: Partial<CustomEventModelConfig>) {
super(config);
}
}
// ---------------------------- Calendar Config ----------------------------
export const calendarConfig = {
// CrudManager Configuration
crudManager: {
autoLoad: true,
eventStore: {
// Sets Custom EventModel as the default model
eventModelClass: CustomEventModel,
}
},
// Default Configuration
date: new Date(),
filterEventResources: false,
filterResources: false,
weekStartDay : 1,
modeDefaults : {
timeFormat : 'HH:mm',
dayStartTime : 6,
hourHeight : 60,
},
modes : {
// Removes default modes that is not in use
day : null,
year : null,
agenda : null,
// Week mode configuration
week : {
type: 'week',
title: 'Week',
hideNonWorkingDays: false,
showResourceAvatars : 'last',
view : {
type : 'weekview',
weekStartDay : 1,
},
},
// Month mode configuration
month : {
type: 'month',
title: 'Month',
hideNonWorkingDays: false,
view : {
weekStartDay : 1,
}
},
// Resource week mode configuration
weekResources : {
type : 'resource',
title : Widget.L('Wk Emp'),
resourceWidth : '30em',
hideNonWorkingDays : false,
view : {
type : 'weekview',
weekStartDay : 1,
timeFormat : 'HH:mm',
dayStartTime : 6,
hourHeight : 60,
},
// Info to display below a resource name
meta : (resource: { title: any; }) => resource.title
},
// Resource month mode configuration
monthResources : {
type : 'resource',
title : Widget.L('Mo Emp'),
resourceWidth : '30em',
hideNonWorkingDays : false,
view : {
weekStartDay : 1,
type : 'monthview',
},
meta : (resource: { title: any; }) => resource.title
},
timeline : {
type: 'scheduler',
// Used by the Calendar's mode selector button
displayName: 'Timeline',
// Used by resourceInfo column to base src for image field:
// resourceImagePath: '../_shared/images/users/',
// Change default event style for Scheduler to better match Calendars look
eventStyle: 'calendar',
// Calendar does not use initial animations, match that
useInitialAnimation: false,
columns: [
{type: 'resourceInfo', field: 'name', text: 'Staff/Resource', width: 175}
],
features: {
nonWorkingTime: true,
timeRanges: true,
resourceTimeRanges: true
},
workingTime: {
fromHour: 7,
toHour: 22
},
// Uncomment to change the date range of the time axis
// range : 'month',
// Uncomment to change how much the next / previous buttons shift the time axis
stepUnit : 'day',
barMargin: 3,
viewPreset: {
base: 'hourAndDay',
headers: [{
unit: 'day',
dateFormat: 'ddd MM/DD'
}, {
unit: 'hour',
dateFormat: 'h a'
}]
},
// // Custom eventRenderer to match style used by Calendar
// eventRenderer(eventRecord: any, renderData: any) {
// if (eventRecord.isInterDay) {
// return StringHelper.encodeHtml(eventRecord.eventRecord.name);
// }
//
// return {
// class: 'b-cal-event-body',
// children: [
// {
// class: 'b-event-header',
// children: [
// {
// class: 'b-event-time',
// text: DateHelper.format(eventRecord.startDate, 'LST')
// }
// ]
// }, {
// class: 'b-cal-event-desc',
// text: eventRecord.name
// }
// ]
// };
// }
}
},
features : {
// Event right click placement
eventTooltip : {
align : 'l-r',
onBeforeShow(e: any) {
const { source } = e;
source.tools.delete = source.eventRecord.eventTypeId != 1;
}
},
// Event right click menu
eventMenu : {
items: {
duplicate : false,
delete : false,
}
}
},
// Top bar configuration
tbar : {
items : {
// Label for the resource width slider
label : {
type : 'label',
text : Widget.L('Resource width'),
weight : 630
},
// A slider controlling the width of each resource
viewWidth : {
type : 'slider',
weight : 640,
min : 20,
max : 100,
value : 30,
width : 90,
unit : 'em',
showValue : false,
showTooltip : true,
ref : 'resourceWidth',
},
}
},
// Left sidebar configuration
sidebar : {
items : {
resourceFilter : {
selectAllItem : true
},
showUnassigned : {
weight : 150,
type : 'slidetoggle',
label : Widget.L('Show unassigned'),
checked : true
},
}
}
}
Hey,
Just for demonstration purposes, you could remove that line, also, if you could add a sample of data and share a runnable project (like, the way that we're able to run npm i and npm run start to see what's happening).
Some points, just to pay attention, regarding the nameFeature structure (not use a features object to set features configuration), and some properties like view inside each mode are not available in the documentation https://bryntum.com/products/calendar/docs/api/Calendar/widget/AgendaView, where did you find that?
Best regards,
Márcio
copied code from this demo for time line:
https://bryntum.com/products/calendar/examples/calendar-scheduler/
Hey,
That displayName is missing, I created a ticket to fix that https://github.com/bryntum/support/issues/8070.
Besides that, we're waiting for the runnable project with some samples of data for us to debug. You can try to use a non-TS project, or add a @ts-ignore just for now.
Best regards,
Márcio