---
title: "Angular Scheduler Component with Time Grid | Mobiscroll"
component: "Scheduler"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/scheduler"
---

# Advanced Angular scheduler with configurable daily & weekly time grid

Build daily, weekly, and work-week scheduling interfaces with the Angular Scheduler — multi-resource support and drag-and-drop. Last update: Oct 30, 2026

Use it in **responsive mobile & desktop web apps** and **Ionic Angular projects**

## Description

The scheduler features a time grid - **vertically scrollable daily, weekly, monthly and custom views** with built-in resource support, templating and drag & drop.

The **four views - scheduler, calendar, timeline, agenda -** can be combined to create the user experience you need on **mobile, desktop and everything in-between**.

Capabilities like **recurring events, all-day and multi-day events, responsiveness and multiple timezones** are supported by all views.

## Setting up the scheduler

- [Mobile Day View](https://demo.mobiscroll.com/angular/scheduler/mobile-day-view.md) - View daily schedules in a mobile layout using the Angular Scheduler — fixed week strip, all-day event row, and a scrollable hourly time grid.
- [Daily View](https://demo.mobiscroll.com/angular/scheduler/desktop-day-view.md) - Build a daily scheduler with the Angular Scheduler — all-day events pinned above a scrollable hourly time grid.
- [Week View on Mobile](https://demo.mobiscroll.com/angular/scheduler/mobile-week-view.md) - Show a full week on mobile with the Angular Scheduler — fixed header, scrollable time grid, all-day and timed events.
- [Week View](https://demo.mobiscroll.com/angular/scheduler/desktop-week-view.md) - Show a full week in the Angular Scheduler with a fixed header, scrollable time grid, current-time indicator, and draggable, resizable events.
- [Responsive Behaviour](https://demo.mobiscroll.com/angular/scheduler/responsive-day-week-schedule.md) - Build a responsive Angular Scheduler with daily view on small screens, weekly on larger ones — use named breakpoints to control layout at every screen size.
- [Custom Column Widths](https://demo.mobiscroll.com/angular/scheduler/customize-scheduler-column-width.md) - Control column widths in an Angular Scheduler — set fixed or dynamic widths for resource columns or day columns to fit your layout.
- [Print and PDF Export](https://demo.mobiscroll.com/angular/scheduler/printing-the-view.md) - Add print support to the Angular Scheduler — use the print add-on to print the scheduler view or export to PDF via the browser print dialog.

## Common use cases

- [Work Week](https://demo.mobiscroll.com/angular/scheduler/work-week-hours.md) - Configure the Angular Scheduler with a Monday–Friday work-week layout, set business-hours, hide off-hours, and block lunch breaks.
- [Appointment Scheduling](https://demo.mobiscroll.com/angular/scheduler/doctors-appointment.md) - Build an Angular appointment scheduler — assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking.
- [Doctors Availability](https://demo.mobiscroll.com/angular/scheduler/doctors-availability-calendar-planner.md) - Show per-doctor availability in the Angular Scheduler — color-coded tracks mark open appointment slots, with each doctor's working hours.
- [Rota Planning](https://demo.mobiscroll.com/angular/scheduler/24-hour-manufacturing-shift-rota-planning.md) - Build a 24-hour rotating crew rota with the Angular Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.
- [Drop Assignee on Event](https://demo.mobiscroll.com/angular/scheduler/drop-assignee-on-event-from-list.md) - Drag team members from an external list onto existing meetings in the Angular Scheduler — with drop feedback and conflict validation.

## Configuring the view

- [Custom Range View](https://demo.mobiscroll.com/angular/scheduler/custom-range-view.md) - Configure the Angular Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day.
- [Limit Overlapping Events](https://demo.mobiscroll.com/angular/scheduler/control-number-of-concurrently-shown-events.md) - Set a max count or auto-fit overlapping events to available space in the Angular Scheduler — useful for appointment-heavy views.
- [Custom Date Range View](https://demo.mobiscroll.com/angular/scheduler/display-multiple-days-weeks.md) - Configure the Angular Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging.
- [Hide All-Day Section](https://demo.mobiscroll.com/angular/scheduler/disable-all-day-events.md) - Hide the all-day row in the Angular Scheduler to show only timed events — ideal for appointment booking, service scheduling, or shift-based views.
- [Color-Coded Time Blocks](https://demo.mobiscroll.com/angular/scheduler/colored-cell-background.md) - Color Angular Scheduler cell backgrounds for time ranges — mark lunch breaks, maintenance windows, or recurring schedules.
- [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.
- [Visible hours and days](https://demo.mobiscroll.com/angular/scheduler/show-hide-hours-days.md) - Keep your calendar focused. Trim your view. In Angular, you can show only weekdays and business hours, making schedules cleaner and faster.
- [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.
- [Event Buffer](https://demo.mobiscroll.com/angular/scheduler/event-buffer.md) - Add buffer time before or after events in the Angular Scheduler to visualize travel time, check-in/check-out, loading, or cleanup in the schedule grid.
- [Multiple Timezone Support](https://demo.mobiscroll.com/angular/scheduler/multiple-timezone-support.md) - Show the same events in different timezones in the Angular Scheduler — add a header dropdown to let users switch the display timezone at runtime.
- [Custom Event Order](https://demo.mobiscroll.com/angular/scheduler/custom-event-sort.md) - Control the event display order in an Angular Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.
- [Multi-Timezone](https://demo.mobiscroll.com/angular/scheduler/show-multiple-timezones.md) - Show multiple timezone panels side by side in the Angular Scheduler — set custom labels per track and compare event times across regions.
- [Event Search Sidebar](https://demo.mobiscroll.com/angular/scheduler/searching-events-in-sidebar.md) - Add a real-time event search sidebar to the Angular Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.
- [External Navigation](https://demo.mobiscroll.com/angular/scheduler/navigate-view-from-external-calendar.md) - Use a two-pane layout to sync a date picker and Angular Scheduler — selecting a date navigates the scheduler automatically.

## Templating

- [Custom Event Tooltip](https://demo.mobiscroll.com/angular/scheduler/custom-event-tooltip.md) - Show native, custom, or third-party tooltips on Angular Scheduler event hover — with appointment details and inline actions.
- [Event Rendering](https://demo.mobiscroll.com/angular/scheduler/customizing-events.md) - Render custom event cards in the Angular Scheduler — add color stripes, labels, avatars, action buttons, and travel-time buffers.
- [Custom Date Header](https://demo.mobiscroll.com/angular/scheduler/date-header-template.md) - Customize the date headers of the Angular Scheduler — add custom layouts, labels, and milestone badges to day columns.
- [Resource Headers](https://demo.mobiscroll.com/angular/scheduler/custom-resource-header-template.md) - Build an Angular resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance.
- [Cell Content Template](https://demo.mobiscroll.com/angular/scheduler/cell-content-template.md) - Add custom content to Angular Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data.
- [Custom Header](https://demo.mobiscroll.com/angular/scheduler/customizing-header.md) - Arrange navigation controls and add a scheduler/calendar view-switcher in a custom Angular Scheduler header.

## Drag & drop

- [Drag, Resize and Create Events](https://demo.mobiscroll.com/angular/scheduler/move-resize-drag-drop-to-create-events.md) - Control drag-to-create, move, resize, and delete independently in the Angular Scheduler — set snap interval and mark events as read-only.
- [Drag, Resize & Move Restrictions](https://demo.mobiscroll.com/angular/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, resize, and moves per event, per resource, or globally in the Angular Scheduler — fix length, lock time, or block cross-resource moves.
- [Instance Event Transfer](https://demo.mobiscroll.com/angular/scheduler/drag-drop-between-calendar-instances.md) - Drag and drop events between two Angular Scheduler instances — reassign appointments, tasks, or shifts across separate weekly views.
- [Blocked Time Ranges](https://demo.mobiscroll.com/angular/scheduler/time-off-blocked-ranges.md) - Block weekends, holidays, and lunch breaks in the Angular Scheduler using recurring unavailable ranges — choose strict or start-end validation.
- [Prevent Double Booking](https://demo.mobiscroll.com/angular/scheduler/prevent-double-booking-events.md) - Use the Angular Scheduler to block event overlaps per event, per resource, or globally — with toast notifications when a conflict is blocked.
- [External Drag and Drop](https://demo.mobiscroll.com/angular/scheduler/external-drag-drop-sortable-dragula.md) - Schedule events by dragging from Mobiscroll, SortableJS or Dragula lists onto the Angular Scheduler, and unschedule them by dragging out.
- [External Task Presets](https://demo.mobiscroll.com/angular/scheduler/external-event-presets.md) - Drag task templates from an external list onto the Angular Scheduler — schedule, assign a technician in a popup, and block drops on restricted slots.

## Resources

- [Multi-Resource View](https://demo.mobiscroll.com/angular/scheduler/resource-view.md) - Show multiple resources — people, rooms, or equipment — side by side in an Angular Scheduler weekly view.
- [Group by Resource or Date](https://demo.mobiscroll.com/angular/scheduler/group-by-resource-by-day.md) - Group resources or days as the primary view in the Angular Scheduler and toggle between layouts using the built-in segmented control.
- [Multi-Resource Shared Events](https://demo.mobiscroll.com/angular/scheduler/shared-events-across-resources.md) - Schedule event across multiple resources in the Angular Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.
- [Dynamic Resource Filtering](https://demo.mobiscroll.com/angular/scheduler/dynamic-add-remove-resources-filter.md) - Show or hide resources in an Angular Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data.
- [Dynamic Resource Widths](https://demo.mobiscroll.com/angular/scheduler/dynamic-content-based-resource-width.md) - Control individual resource column widths in the Angular Scheduler by assigning CSS classes based on each column's header content.
- [Multi-Resource Configuration](https://demo.mobiscroll.com/angular/scheduler/resource-data-structure.md) - Configure multiple resources in an Angular Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.
- [Hide Resources](https://demo.mobiscroll.com/angular/scheduler/hide-non-working-resources.md) - Show only available staff in an Angular Scheduler — hide resource columns for days when staff are off, with support for recurring.

## Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/angular/scheduler/event-data-structure.md) - Define event data in the Angular Scheduler — set base fields, recurring rules, resource links, drag/resize controls, and buffer times.
- [Date Input Formats](https://demo.mobiscroll.com/angular/scheduler/date-object-ISO-8601-moment.md) - Use JS date objects, ISO 8601 strings, or Moment.js objects as date input in the Angular Scheduler for events, colors, and labels.
- [Recurring Events](https://demo.mobiscroll.com/angular/scheduler/recurring-events.md) - Add recurring events to the Angular Scheduler — configure daily, weekly, monthly, or yearly rules with RRULE string support.

## Loading events & data sources

- [Inline Data](https://demo.mobiscroll.com/angular/scheduler/load-inline-data.md) - Pass a static event array to the Angular Scheduler to see how event data is structured — before connecting a live or on-demand data source.
- [Load Events from Remote API](https://demo.mobiscroll.com/angular/scheduler/load-events-from-remote-api.md) - Populate an Angular Scheduler from a remote API — fetch from your backend or third-party source and pass data in the format the scheduler expects.
- [Load Events on Demand](https://demo.mobiscroll.com/angular/scheduler/load-events-on-demand.md) - Load Angular scheduler events on demand — fetch events for the viewed date range from a remote or local source via a lifecycle callback.
- [Load Events on Scroll](https://demo.mobiscroll.com/angular/scheduler/load-events-on-scroll.md) - Load Angular scheduler events on demand as users scroll — fetch only events for visible date range for fast performance with large event counts.
- [Large Dataset Performance](https://demo.mobiscroll.com/angular/scheduler/loading-big-data-sets.md) - See how the Angular Scheduler handles large data sets— virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop.

## Third party calendar integrations

- [Google Calendar Integration](https://demo.mobiscroll.com/angular/scheduler/sync-events-google-calendar.md) - Connect the Angular Scheduler to Google Calendar — authenticate users, load their calendars, and sync create, edit, or delete events in real time.
- [Outlook Calendar Integration](https://demo.mobiscroll.com/angular/scheduler/sync-events-outlook-calendar.md) - Connect Outlook Calendar to an Angular Scheduler — authenticate with Microsoft sign-in, load Outlook events, and sync add, edit, and delete actions.
- [Public Google Calendar Integration](https://demo.mobiscroll.com/angular/scheduler/load-events-from-google-calendar.md) - Load public Google Calendar events into the Angular Scheduler — connect with your Calendar ID and API key via the integration plugin.

## CRUD operations

- [Create, Edit and Delete Events](https://demo.mobiscroll.com/angular/scheduler/create-read-update-delete-CRUD.md) - Implement full event CRUD in an Angular Scheduler — drag or click to create events, confirm via a custom dialog, then drag to move, resize, or delete.
- [Bulk Event Actions](https://demo.mobiscroll.com/angular/scheduler/event-bulk-actions-edit-delete-update.md) - Add bulk event actions to Angular Scheduler — select multiple events via shortcuts or select-all, apply bulk actions, and use right-click for per-event actions.
- [Recurring Event Add & Edit](https://demo.mobiscroll.com/angular/scheduler/recurring-event-add-edit-dialog.md) - Add a recurrence editor to the Angular Scheduler event dialog — with daily, weekly, monthly, and custom presets plus an RRULE builder.
- [Prevent Past Event Creation](https://demo.mobiscroll.com/angular/scheduler/disallow-past-event-creation.md) - Block event creation and editing on past dates in the Angular Scheduler — past dates are blocked, past events are locked, and failed attempts show a toast.

## Customizing the look & feel

- [CSS Classes for Cell Colors and Blocked Times](https://demo.mobiscroll.com/angular/scheduler/colors-invalids-css-class.md) - Apply custom CSS classes to color-code Angular Scheduler cells and style blocked times - add patterns or backgrounds for days or periods.
- [Resource Filtering in Header](https://demo.mobiscroll.com/angular/scheduler/resource-filtering-in-header.md) - Add a segmented resource filter to the Angular Scheduler header — place it between navigation buttons to let users switch resources inline.
- [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/angular/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the Angular Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.
- [Resource Background Styling](https://demo.mobiscroll.com/angular/scheduler/resource-background.md) - Color-code resources in an Angular Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource.
- [Cell Hover Summary](https://demo.mobiscroll.com/angular/scheduler/show-cell-summary-on-hover.md) - Hover over any cell in the Angular Scheduler to open a tooltip showing event count, invalid slots, and color ranges for that cell.

## Localization & tapping into the lifecycle

- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/angular/scheduler/gregorian-jalali-hijri.md) - Configure the Angular Scheduler to display Gregorian, Jalali, or Hijri dates — each calendar system loads its locale and language pack automatically.
- [Event Hooks](https://demo.mobiscroll.com/angular/scheduler/event-hooks.md) - Explore Angular Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.
- [Localization](https://demo.mobiscroll.com/angular/scheduler/localization.md) - Add multi-language support to the Angular Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings overridable.