```
### Switch between week and month view
Use a segmented component for creating a view switcher.
```html
```
```ts
view = 'week';
changeView() {
setTimeout(() => {
switch (this.view) {
case 'week':
this.calendarType = 'week';
break;
case 'month':
this.calendarType = 'month';
break;
}
});
}
```
### Preview the selection
Above all that you can give instructions or show the selected `{value}` in the header
```html
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`calendarType`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarType) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`calendarSize`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarSize) - option
- [`calendarHeaderTemplate`](https://mobiscroll.com/docs/angular/datepicker/api#template-calendarHeaderTemplate) - template
- [`headerText`](https://mobiscroll.com/docs/angular/datepicker/api#opt-headerText) - option
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
view = 'week';
calendarType: any = 'week';
changeView(): void {
setTimeout(() => {
switch (this.view) {
case 'week':
this.calendarType = 'week';
break;
case 'month':
this.calendarType = 'month';
break;
}
});
}
}
```
### Template
```html
```
### CSS
```css
.custom-buttons,
.custom-view,
.custom-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-moz-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.custom-buttons {
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.custom-view,
.custom-nav {
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
.custom-view .mbsc-segmented {
margin: 0;
}
.custom-view .mbsc-segmented.mbsc-material,
.custom-view .mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.custom-view .mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.custom-view .mbsc-segmented-button.mbsc-windows {
border: 0;
}
```
## Implementation notes
- Use `controls: ['calendar']` and `display: 'inline'`; the compact multi-row examples add `calendarType: 'week'` and `calendarSize: 2`.
- **Default header**: no extra option needed - it renders the nav label on the left and the prev/next arrows on the right.
- **Custom arrangement**: pass `renderCalendarHeader` (Angular: `calendarHeaderTemplate`, Vue: `#header` slot) returning custom markup that composes the predefined header sub-components - `mbsc-calendar-nav` (Vue: `MbscCalendarNav`, React: `CalendarNav`), `mbsc-calendar-prev`/`mbsc-calendar-next` (Vue: `MbscCalendarPrev`/`MbscCalendarNext`, React: `CalendarPrev`/`CalendarNext`) - in any order/position.
- **Today button**: include `mbsc-calendar-today` (Vue: `MbscCalendarToday`, React: `CalendarToday`) alongside the prev/next controls inside the same custom header markup.
- `calendarType` can be switched at runtime between `'week'` and `'month'`. React/Vue/Angular update it as a controlled value (`useState`, `v-model`, `[(ngModel)]`) bound to the datepicker's `calendarType` prop; JS/jQuery call `.setOptions({ calendarType: 'week' | 'month' })` on the instance.
- **Selected-date preview**: set `headerText` to a template string containing `{value}` (e.g. `'You selected {value}'`) - it's substituted with the current selection and rendered in the header automatically, no custom renderer needed.
- To hide the header entirely, return empty/no markup from `renderCalendarHeader` - pair with a compact layout when month/year navigation isn't needed.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-angular.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config angular
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
ng serve
```
On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation
## Related demos
- Previous: [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/angular/calendar/themes-ios-material-windows.md) - Style the Angular calendar date picker with iOS, Material, or Windows themes — switch light/dark mode, use the theme builder, or apply custom CSS.
- Next: [Mark Days with Custom Shapes](https://demo.mobiscroll.com/angular/calendar/customize-marked-day-shapes.md) - Add custom-shaped day markers to an Angular calendar date picker — use the marked option for colored dots, then override styles.