Range Picker for Event Creation
Use the range picker for a new event creation. Let people pick start and end dates when adding events.
Dynamically switch between date only and date-time entry based on an "all-day" switch by changing the controls to 'date' or 'datetime'.
Interested in an event calendar solution? Check out the event calendar →
Demo
html<mbsc-input label="Title" placeholder="Name of the event"></mbsc-input>
<mbsc-input label="Location" placeholder="Where will it be?"></mbsc-input>
<mbsc-switch label="All day" [(ngModel)]="allDay" (change)="allDayChange()"></mbsc-switch>
<mbsc-datepicker [controls]="controls" select="range" [startInput]="start" [endInput]="end"></mbsc-datepicker>
<mbsc-input #start label="Start" placeholder="Start event"></mbsc-input>
<mbsc-input #end label="End" placeholder="End event"></mbsc-input>
<mbsc-segmented-group [(ngModel)]="showAs">
<mbsc-segmented value="busy">Show as busy</mbsc-segmented>
<mbsc-segmented value="free">Show as free</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-textarea label="Notes" placeholder="Enter notes, URL, comments"></mbsc-textarea>
tsallDay = false;
showAs = 'busy';
controls = ['datetime'];
allDayChange() {
this.controls = this.allDay ? ['date'] : ['datetime'];
};
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
allDay = false;
showAs = 'busy';
controls = ['datetime'];
allDayChange(): void {
this.controls = this.allDay ? ['date'] : ['datetime'];
}
}
<mbsc-page>
<mbsc-input label="Title" placeholder="Name of the event"></mbsc-input>
<mbsc-input label="Location" placeholder="Where will it be?"></mbsc-input>
<mbsc-switch label="All day" [(ngModel)]="allDay" (change)="allDayChange()"></mbsc-switch>
<mbsc-datepicker [controls]="controls" select="range" [startInput]="start" [endInput]="end"></mbsc-datepicker>
<mbsc-input #start label="Start" placeholder="Start event"></mbsc-input>
<mbsc-input #end label="End" placeholder="End event"></mbsc-input>
<mbsc-segmented-group [(ngModel)]="showAs">
<mbsc-segmented value="busy">Show as busy</mbsc-segmented>
<mbsc-segmented value="free">Show as free</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-textarea label="Notes" placeholder="Enter notes, URL, comments"></mbsc-textarea>
</mbsc-page>