Hi!
I’m using the following stack:
- Angular 16.1.3
- Mobiscroll (angular-ivy package) 5.25.1
When creating an event with the allDay field set to true, the event renders one more day than expected.
Steps to reproduce:
1. Create a new Angular application:
npx @angular/cli@latest new test-app --skip-tests --standalone --skip-install --style scss --strict --minimal
2. Install Mobiscroll angular ivy package and luxon:
npm i @mobiscroll/angular-ivy luxon
npm i -D @types/luxon
3. [Optional] In case the following issue Angular CLI #25496 affects you, when you serve the app locally, add the following to the package.json:
"overrides": {
"@babel/traverse": "7.22.6"
}
4. In the main app.component.ts add the following:
import { Component } from '@angular/core';
import {
luxonTimezone,
MbscCalendarEvent,
MbscEventcalendarModule,
MbscEventcalendarOptions,
setOptions,
} from '@mobiscroll/angular-ivy';
import {
DateTime,
Duration,
IANAZone,
Info,
Interval,
Settings,
Zone,
} from 'luxon';
luxonTimezone.luxon = {DateTime, Zone, IANAZone, Duration, Interval, Settings, Info};
setOptions({
theme: 'material',
themeVariant: 'light',
});
@Component({
standalone: true,
selector: 'app-root',
imports: [
MbscEventcalendarModule,
],
template: `
<mbsc-eventcalendar
[data]="data"
[options]="options"
[timezonePlugin]="timeZonePlugin"
displayTimezone="Europe/Madrid"
[exclusiveEndDates]="true"
/>
`,
})
export class AppComponent {
data: MbscCalendarEvent[] = [
{
start: '2023-07-03T22:00:00+00:00',
end: '2023-07-04T22:00:00+00:00',
title: 'Test 0',
id: 0,
allDay: true,
},
{
start: '2023-07-03T22:00:00+00:00',
end: '2023-07-04T22:00:00+00:00',
title: 'Test 1',
id: 1,
allDay: false,
},
];
timeZonePlugin = luxonTimezone;
options: MbscEventcalendarOptions = {
view: {
schedule: {
type: 'week',
},
},
};
}
5. In the styles.scss file add the following:
$mbsc-eventcalendar: true;
$mbsc-material-theme: true;
$mbsc-popup: true;
@import "@mobiscroll/angular-ivy/dist/css/mobiscroll.modular";
6. Serve the application locally:
ng serve
7. You should be seeing the following:
See how the event with allDay set to true renders one more day. In the example I’m using Europe/Madrid as the display time zone which currently is UTC+02.
