--- title: "Angular Scheduler Visible hours and days Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.2.0" url: "https://demo.mobiscroll.com/angular/scheduler/show-hide-hours-days" --- # Visible hours and days - Angular Scheduler demo Keep your calendar focused. Trim your view. In Angular, you can show only weekdays and business hours, making schedules cleaner and faster. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/show-hide-hours-days) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/show-hide-hours-days) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/show-hide-hours-days.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/show-hide-hours-days.md), [React](https://demo.mobiscroll.com/react/scheduler/show-hide-hours-days.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/show-hide-hours-days.md) ## Description Customize the visible days and hours along with the scale of the time grid through the `scheduler` object under the [`view` option](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view). You can control the days to display (eg. Weekdays), the visible time range (eg. 8AM to 6PM), set the time scale (eg. 30 minutes) and set the labels shown (eg. every 15 minutes). - **Specify the first and last day** - Use the `startDay` and `endDay` properties - **Set the visible time range** - Use the `startTime` and `endTime` properties - **Shift the visible time window** - Use the `startTime` and `endTime` properties to include ranges that extend into the previous or next day - **Control the visibility of empty columns** - Use the `hideEmptyColumns` property - **Control the visibility of fully invalid columns** - Use the `hideInvalidColumns` property - **Control the granularity of the time grid** - Use the `timeCellStep` and `timeLabelStep` properties **Building a work calendar?** [Check out this example →](https://demo.mobiscroll.com/angular/scheduler/work-week-hours) ## What this demo shows - A desktop weekly scheduler from Sunday to Saturday, with a fixed resource and week strip, repeated resources for each week, and a vertically scrollable time grid running from 9 AM to 5 PM. - **View controls** A configuration panel beside the scheduler lets users choose from a segmented button between `Day`, `Week`, and `Month` views, with `Week` view selected by default. - **Days configuration** Below the segmented button, there is the following text: Display days from [day selection dropdown] to [day selection dropdow] - and users can select from the day selection dropdown from which to which day to be displayed on the scheduler. By default the start day is Sunday and the end day is Saturday. - **Hours configuration** Below the day configuration line, there is the following text: Display hours from [hour selection dropdown] to [hour selection dropdow] - and users can select from the hour selection dropdown from which to which hour to be displayed on the time grid. By default the start hour is 9 AM and the end hour is 5 PM. - **Time scale control** Below the hour configuration line, there is the following text: Set the time scale to [hour selection dropdow] - and users can set the time scale on the time grid from the hour selection dropdown. - **Time labels control** Below the time scale configuration line, there is the following text: Show time lables for every [hour selection dropdow] - and users can set the time labels on the time grid from the hour selection dropdown. - **Hide controls** Below the time label configuration line, there are tree switchable buttons: Hide empty columns (disabled by default), Hide invalid columns (disabled by default) and Show current time indicator (enabled by default). - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Resources with week view** The fixed strip below the header displays resources at the top and below that the weeks so in this case resources are grouped by resource which means for each resources appears the selected week. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler shows 8-hours range from 9 AM to 5 PM and can be scrolled vertically. - **Weekends** Saturdays and Sundays are disabled so the time grids for those days appears with a grey background and can't create or move events to those periods. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Employee scheduling and availability management** Display team schedules, vacations, days off, and availability across multiple employees in a single weekly calendar view. - **Resource and shift planning** Organize shifts, assignments, and workload distribution while keeping meetings, tasks, and absences visible. - **Team operations and project coordination** Track recurring meetings, deadlines, field activities, and employee commitments alongside personal time-off information. ## Tutorial - ( ) Day - (x) Week - ( ) Month - Display days from `Sunday` to `Saturday` This defines which weekdays to display. To set the first day of the week, use the [`firstDay`](https://mobiscroll.com/docs/angular/eventcalendar/api#localization-firstDay) option instead. - Display hours from `09:00` to `17:00` - Set the time scale to `1 hour` - Show time labels for every `1 hour` - [ ] Hide empty columns - [ ] Hide invalid columns - [x] Show current time indicator ```html ``` With "Day": ```html ``` With "Month": ```html ``` With "Tuesday": ```html ``` With "Wednesday": ```html ``` With "Thursday": ```html ``` With "Friday": ```html ``` With "Saturday": ```html ``` With "Sunday": ```html ``` With "Monday": ```html ``` With "Tuesday": ```html ``` With "Wednesday": ```html ``` With "Thursday": ```html ``` With "00:00 (the day before)": ```html ``` With "01:00 (the day before)": ```html ``` With "02:00 (the day before)": ```html ``` With "03:00 (the day before)": ```html ``` With "04:00 (the day before)": ```html ``` With "05:00 (the day before)": ```html ``` With "06:00 (the day before)": ```html ``` With "07:00 (the day before)": ```html ``` With "08:00 (the day before)": ```html ``` With "09:00 (the day before)": ```html ``` With "10:00 (the day before)": ```html ``` With "11:00 (the day before)": ```html ``` With "12:00 (the day before)": ```html ``` With "13:00 (the day before)": ```html ``` With "14:00 (the day before)": ```html ``` With "15:00 (the day before)": ```html ``` With "16:00 (the day before)": ```html ``` With "17:00 (the day before)": ```html ``` With "18:00 (the day before)": ```html ``` With "19:00 (the day before)": ```html ``` With "20:00 (the day before)": ```html ``` With "21:00 (the day before)": ```html ``` With "22:00 (the day before)": ```html ``` With "23:00 (the day before)": ```html ``` With "00:00": ```html ``` With "01:00": ```html ``` With "02:00": ```html ``` With "03:00": ```html ``` With "04:00": ```html ``` With "05:00": ```html ``` With "06:00": ```html ``` With "07:00": ```html ``` With "08:00": ```html ``` With "10:00": ```html ``` With "11:00": ```html ``` With "12:00": ```html ``` With "13:00": ```html ``` With "14:00": ```html ``` With "15:00": ```html ``` With "16:00": ```html ``` With "17:00": ```html ``` With "18:00": ```html ``` With "19:00": ```html ``` With "20:00": ```html ``` With "21:00": ```html ``` With "22:00": ```html ``` With "23:00": ```html ``` With "24:00": ```html ``` With "00:00": ```html ``` With "01:00": ```html ``` With "02:00": ```html ``` With "03:00": ```html ``` With "04:00": ```html ``` With "05:00": ```html ``` With "06:00": ```html ``` With "07:00": ```html ``` With "08:00": ```html ``` With "09:00": ```html ``` With "10:00": ```html ``` With "11:00": ```html ``` With "12:00": ```html ``` With "13:00": ```html ``` With "14:00": ```html ``` With "15:00": ```html ``` With "16:00": ```html ``` With "18:00": ```html ``` With "19:00": ```html ``` With "20:00": ```html ``` With "21:00": ```html ``` With "22:00": ```html ``` With "23:00": ```html ``` With "24:00": ```html ``` With "01:00 (the day after)": ```html ``` With "02:00 (the day after)": ```html ``` With "03:00 (the day after)": ```html ``` With "04:00 (the day after)": ```html ``` With "05:00 (the day after)": ```html ``` With "06:00 (the day after)": ```html ``` With "07:00 (the day after)": ```html ``` With "08:00 (the day after)": ```html ``` With "09:00 (the day after)": ```html ``` With "10:00 (the day after)": ```html ``` With "11:00 (the day after)": ```html ``` With "12:00 (the day after)": ```html ``` With "13:00 (the day after)": ```html ``` With "14:00 (the day after)": ```html ``` With "15:00 (the day after)": ```html ``` With "16:00 (the day after)": ```html ``` With "17:00 (the day after)": ```html ``` With "18:00 (the day after)": ```html ``` With "19:00 (the day after)": ```html ``` With "20:00 (the day after)": ```html ``` With "21:00 (the day after)": ```html ``` With "22:00 (the day after)": ```html ``` With "23:00 (the day after)": ```html ``` With "24:00 (the day after)": ```html ``` With "5 minutes": ```html ``` With "10 minutes": ```html ``` With "15 minutes": ```html ``` With "30 minutes": ```html ``` With "2 hours": ```html ``` With "3 hours": ```html ``` With "4 hours": ```html ``` With "6 hours": ```html ``` With "8 hours": ```html ``` With "12 hours": ```html ``` With "24 hours": ```html ``` With "5 minutes": ```html ``` With "10 minutes": ```html ``` With "15 minutes": ```html ``` With "30 minutes": ```html ``` With "2 hours": ```html ``` With "3 hours": ```html ``` With "4 hours": ```html ``` With "6 hours": ```html ``` With "8 hours": ```html ``` With "12 hours": ```html ``` With "24 hours": ```html ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, MbscModule], }) export class AppComponent implements OnInit { constructor(private http: HttpClient) {} events: any; eventSettings: MbscEventcalendarOptions = { clickToCreate: true, dragToCreate: true, dragToMove: true, dragToResize: true, eventDelete: true, view: { scheduler: { type: 'week', startDay: 1, endDay: 5, startTime: '09:00', endTime: '18:00', timeCellStep: 30, timeLabelStep: 30, }, }, }; ngOnInit() { this.http.jsonp('https://trial.mobiscroll.com//workday-events/?vers=5', 'callback').subscribe((resp: any) => { this.events = resp; }); } } ``` ### Template ```html ``` ## Implementation notes - Use `view: { scheduler: { type: 'week', startDay: 1, endDay: 5, startTime: '09:00', endTime: '18:00', timeCellStep: 30, timeLabelStep: 30 } }` - a Mon-Fri scheduler visible from 9 AM to 6 PM with 30-minute grid cells and labels. - `startDay`/`endDay`: first and last visible day (0 = Sunday ... 6 = Saturday) - `timeCellStep`: grid interval in minutes; `timeLabelStep`: interval between time axis labels - both set to 30 here, but they can differ (e.g. 15-minute cells with 60-minute labels) - React additionally defines a recurring `invalid` range (12:00-13:00, Mon-Fri, weekly) and passes it as the `invalid` prop to block the lunch hour across all weekdays. - Load events from `https://trial.mobiscroll.com/workday-events/?vers=5` via JSONP: React/Vue call `getJson(url, callback, 'jsonp')`; JS calls `mobiscroll.getJson(url, callback, 'jsonp')`; jQuery calls `$.getJSON(url + '&callback=?', callback)`; Angular uses `HttpClient.jsonp()`. Imperative API (JS/jQuery): call `inst.setEvents(events)` in the callback. ## 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: [Dynamic View Switching](https://demo.mobiscroll.com/angular/scheduler/switching-calendar-scheduler-agenda.md) - Switch between year, month, week, day, and agenda views in the Angular event calendar — via header control or programmatically. - Next: [Multi-Timezone Configuration](https://demo.mobiscroll.com/angular/scheduler/setting-the-timezone.md) - Set separate data and display timezones in the Angular Scheduler — let users switch visible timezones without changing event data.