Hi,
For context, this is my environment:
- @angular/mobiscroll:
6.1.1 - @angular/*:
22.0.0
If I provide the events to the schedule view asynchronously, I can’t drag or resize them.
Steps to reproduce the issue:
1. Create a new angular application (for example with the command below or any other preferred method):
npx @angular/cli new test-app --zoneless --inline-style --inline-template --minimal --skip-git --skip-install --skip-tests --standalone --strict
2. Install dependencies and the latest mobiscroll version (one may need to configure credentials before):
npm i
npm i @mobiscroll/angular
3. Add mobiscroll styles in src/styles.css:
/* src/styles.css */
@import "../node_modules/@mobiscroll/angular/dist/css/mobiscroll.min.css";
4. Change src/app/app.ts for the following:
import { Component, signal } from '@angular/core';
import {
MbscEventcalendarModule,
setOptions,
localeEn,
MbscEventcalendarOptions,
MbscCalendarEvent,
} from '@mobiscroll/angular';
setOptions({
locale: localeEn,
theme: 'material',
themeVariant: 'light',
});
@Component({
selector: 'app-root',
imports: [MbscEventcalendarModule],
template: `<mbsc-eventcalendar [data]="data()" [options]="options" />`,
})
export class App {
options: MbscEventcalendarOptions = {
view: {
schedule: {
type: 'week',
},
},
dragToResize: true,
dragToMove: true,
dragTimeStep: 15,
};
data = signal<MbscCalendarEvent[]>([]);
constructor() {
window.setTimeout(() => {
this.data.set([
{
id: 1,
title: 'Example 1',
start: '2026-06-09T08:00:00',
end: '2026-06-09T09:00:00',
},
{
id: 2,
title: 'Example 2',
start: '2026-06-12T10:00:00',
end: '2026-06-12T11:00:00',
},
]);
}, 5_000);
}
}
5. Start the local server to see the application in the browser:
npx ng serve
You should be able to see the application in “http://localhost:4200”.
6. Wait 5 seconds for the events to load and then try to drag or resize them. You should observe that it’s not possible.
Now you can change the code and instead of providing the events asynchronously, provide them instantly:
data = signal<MbscCalendarEvent[]>([
{
id: 1,
title: 'example 1',
start: '2026-06-09t08:00:00',
end: '2026-06-09t09:00:00',
},
{
id: 2,
title: 'example 2',
start: '2026-06-12t10:00:00',
end: '2026-06-12t11:00:00',
},
]);
// constructor() {
// window.setTimeout(() => {
// this.data.set([
// {
// id: 1,
// title: 'example 1',
// start: '2026-06-09t08:00:00',
// end: '2026-06-09t09:00:00',
// },
// {
// id: 2,
// title: 'example 2',
// start: '2026-06-12t10:00:00',
// end: '2026-06-12t11:00:00',
// },
// ]);
// }, 5_000);
// }
Now you should be able to drag or resize them.
This also affects when one provides the events instantly but then it updates them (it adds a new event for example). In this case one can’t drag or resize the events.