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