Skip to content

This example demonstrates the usage of Angular Scheduler Component in Angular 10 application.

Notifications You must be signed in to change notification settings

maheshtps/ej2-angular-10-scheduler

 
 

Repository files navigation

Introduction to Angular Scheduler

The Angular Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, appointments rescheduling through editor pop-ups, drag and drop, and a resizing action. It includes wide variety of view modes with unique configuration options for each view.

Features and Benefits

Different view modes

The Angular Scheduler offers wide variety of view modes such as day, week, work week, month, agenda, month-agenda, and timeline views. It allows you to easily configure each individual view with different, view-specific options. Options also exist to display multiple days, weeks, and months by extending each view mode based on the interval count.

Data binding

Data binds seamlessly with various local and remote data sources such as: JSON, RESTful services, OData services, and WCF services.

Event handling options

There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. Easily configurable recurring events to repeat on a daily, weekly, monthly, or yearly basis. Change the look and feel of events by customizing their default appearance and style using templates.

Drag and drop events

Reschedule events and appointments easily by dragging them onto the required time slots. You can also see the live time updates over the dragged appointments.

Event resizing

Easily extend a Scheduler event’s time by resizing either its start or end handlers. You can also see the live time updates over the resized appointments.

Resource grouping

Built-in support is available for assigning resources to events as well as scheduling resources. Group events and appointments based on resources or dates. Grouping resources by date provides a quick overview of each resource’s availability. You can also set different working days for each resource. A new compact layout for displaying resources on a mobile screen, brings clear visibility of events of each individual resource.

Timeline scheduling

Timeline scheduling plays a major role in the Angular Scheduler, as it displays resources in rows in a hierarchical tree-like structure with expand and collapse options. Its feature-rich calendar options, compact resource scheduling, and clear event representation allows you to employ it in various real-time applications. You can also display the year, month, and week number text labels on each individual header row of timeline views with out-of-the-box templates.

Responsive and touch-friendly

The Angular Scheduler (event calendar) has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows 8 OS.

Customizable UI

The Angular Scheduler inherits almost all the calendar-specific features, such as first day of the week and timescale. Also, it allows you to customize the appearance of any part of the Scheduler interface using HTML and CSS styles.

User-friendly interactions

The modern and trendy UI design of the angular Scheduler makes the user interactions simpler and more efficient. It includes quick overview of event information, smooth date navigation, view navigation and easier selection of cells and events.

Real-time data synchronization

Real-time appointment data of Outlook and Google Calendar accurately synchronizes with our HTML5 angular Scheduler. It also supports bidirectional data communication through SignalR.

Web framework integration

As a pure JavaScript component, the event scheduler integrates easily with any web framework:

Steps to run above Angular10SchedulerApp

This project was generated with Angular CLI version 10.1.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Related Links

Learn More about Angular Scheduler
Download Free Trial
Pricing
Documentation
View Demos
Community Forums
Knowledge base
Suggest a feature

About Syncfusion Angular UI Components

Syncfusion's Angular Components library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI components in a single package. In addition to Scheduler, we provide popular Angular Components such as DataGrid, Charts, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview), and UWP, and Flutter). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.


[email protected] | Toll Free: 1-888-9 DOTNET

About

This example demonstrates the usage of Angular Scheduler Component in Angular 10 application.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 77.0%
  • JavaScript 17.7%
  • HTML 4.6%
  • CSS 0.7%