Hi!
I'm working on work scheduling management. I'm sorry for long topic and multiple questions, I think it's more clear as it needs the context for understanding.
Every event has attribute hours
says is how many hour per day should person spent on this task (MyEventModel
).
export class MyEventModel extends EventModel {
public hours: number; // hours per day
}
Every (Person) ResourceModel
has working hours - which says how many hours is available on day:
availability: [
{
resourceId: 23,
availabilities: {
"2021-06-01": 8,
"2021-06-02": 8,
"2021-06-03": 4,
"2021-06-04": 0,
}
},
{
resourceId: 24,
availabilities: {
"2021-06-01": 0,
"2021-06-02": 2,
"2021-06-03": 4,
"2021-06-04": 0,
}
},
...
];
I need to visualise this information:
- Set default fix height of each resource row with default height (150px)
const schedulerConfiguration = { rowHeight: 150, ... }
- Set height of each event based on formula
MyEventModel.hours * 20
= height - this steps works with
const schedulerConfiguration = { ... eventRenderer: (data) => { data.renderData.height = data.eventRecord.hours * 20; ... } ... }
the issue:
The events are sized based on the set data.renderData.height =
but spaces between events are not correct (small event has big space, but larger events are covering each other):
my questions:
how to fix the issue above?
When
availability
of the person on specific day is smaller than sum of hours of events on this day, I need to make the resource row higher -300px
.How to put a content into column which is not an
Event
? I need to show in the right bottom corner how many hours person is available on specific day.
Thank you very much!
David