Schedule Calendar Timeline Virtualization

Hi, I’m testing the angular calendar with timline views and we want to switch different timelines (day, weeks, month) with different sizes, like a zoom feature.
I managed to do it changing the view property dynamically with pre configured views but the change is very slow, takes like 1 or 2 second. Is there a way to make it faster or the calendar support some kind of virtualization to improve performance?

Here is my code:

BlockquotesetOptions({
locale: localeEn,
theme: ‘material’,
themeVariant: ‘light’,
});

@Component({
selector: ‘scs-gantt-mobi’,
template: <div class="d-flex flex-inline"> <mat-form-field appearance="fill"> <mat-label>VIEWS</mat-label> <mat-select [(value)]="view"> <mat-option *ngFor="let v of viewDataSource" [value]="v.def"> {{ v.label }} </mat-option> </mat-select> </mat-form-field> </div> <div style="height: 800px"> <mbsc-eventcalendar [data]="events" [selectedDate]="selectedDate" [view]="view" [resources]="resources" [colors]="colors" [refDate]="startRangeDate" [dragToMove]="true" [dragToResize]="true" [dragToCreate]="true" ></mbsc-eventcalendar> </div>,
styles: [],
})
export class GanttMobiComponent implements OnInit {
@Input() events: MbscCalendarEvent[];
@Input() resources: MbscResource[];

viewDataSource = GANTT_VIEWS;
view: MbscEventcalendarView = GANTT_VIEWS[1].def;
startRangeDate = new Date(2019, 5, 1, 0, 0, 0, 0);
selectedDate = new Date(2019, 5, 15, 0, 0, 0, 0);

colors = [{ start: new Date(2019, 5, 16, 8, 30, 0, 0), end: new Date(2019, 5, 16, 9, 30, 0, 0), background: 'blue' }];

constructor() {}

ngOnInit(): void {}

handleViewComboChange(args: any) {
    console.log('ARGS', args);
}

}

Blockquote

const YearView: MbscEventcalendarView = {
timeline: {
type: ‘month’,
size: 12,
},
};

const MonthView: MbscEventcalendarView = {
timeline: {
type: ‘month’,
size: 3,
},
};

const WeekView: MbscEventcalendarView = {
timeline: {
type: ‘week’,
size: 12,
},
};

const DayView: MbscEventcalendarView = {
timeline: {
type: ‘day’,
size: 12 * 7,
},
};

export type GanttViewDef = {
id: string;
label: string;
def: MbscEventcalendarView;
};
export const GANTT_VIEWS: GanttViewDef[] = [
{
id: ‘year’,
label: ‘Year’,
def: YearView,
},
{
id: ‘month’,
label: ‘Month’,
def: MonthView,
},
{
id: ‘week’,
label: ‘Week’,
def: WeekView,
},
{
id: ‘day’,
label: ‘Day’,
def: DayView,
},
];

Thanks

Hi Cesar,

Thanks for reaching out!

We are aware of this problem, actually the timeline virtualization is on our list and we are working on it to improve the performance.

Does every view change take up seconds to load? Do you have large amount of data?

I’m asking because initially smaller views shouldn’t take seconds to reload(but the loading times can be impacted by the larger amount of resource/slot/event data).