How to Add Appointments to the Angular Scheduler

Get a quick overview of adding appointments to the Angular Event Calendar by passing them either as local JSON data or remote service URLs. Also, get a glimpse of the advanced event-handling options.

To learn how to configure Angular Scheduler, check this video out: youtu.be/dE_9t5HJ8rc

The appointments of Angular Scheduler can be anything scheduled for specific time intervals that help you manage your time. So, in this video, you will learn how to pass the JSON data with relevant fields and the remote URL to the data source of Angular Scheduler. You will also get to see some of the advanced event-handling options of Angular Scheduler in this video.

IMPORTANT TOPICS
-------------------
Data binding: ej2.syncfusion.com/angular/documentation/schedu…
Advanced appointment settings: ej2.syncfusion.com/angular/documentation/schedu…
Timezones on appointments: ej2.syncfusion.com/angular/documentation/schedu…

ANGULAR SCHEDULER
--------------------
Product overview: syncfusion.com/angular-ui-components/angular-sc…
Examples: ej2.syncfusion.com/angular/demos/#/material/sch…
Documentation: ej2.syncfusion.com/angular/documentation/schedu…
Download free trial: syncfusion.com/angular-ui-components
GitHub source: github.com/syncfusion/ej2-angular-ui-components…
npmjs package: npmjs.com/package/@syncfusion/ej2-angular-sched…
--------------------
SUBSCRIBE

Syncfusion on YouTube: bit.ly/syncfusionyoutube
Sign up to receive email updates: bit.ly/syncfusionemail
---------------------
SOCIAL COMMUNITY

Facebook: facebook.com/Syncfusion/
Twitter: twitter.com/Syncfusion
LinkedIn: linkedin.com/company/syncfusion/
Instagram: instagram.com/syncfusion

TRANSCRIPT REFERENCE
----------------------
Some of the advanced event-handling options of Angular Scheduler:
• CRUD operations can be performed easily with any kind of appointment on the scheduler using DataManager.
• Select and delete multiple events all at once by holding the control key and simultaneously clicking on the events that you want to delete.
• Easily manage the recurring events in Angular Scheduler using its available repeat patterns offered by the built-in recurrence editor.
• Event customizations are simplified with the built-in template option.
• Display the appointments in your own required time zone by setting the proper time zone for Angular Scheduler.
• Display tooltips over appointments with additional information about the events.
• Add additional custom fields to your appointment data with no additional steps to manipulate such custom fields.
• Edit appointments easily through intuitive drag and resize actions.
• Make specific appointments display in read-only mode so that CRUD operations cannot be performed on them.
• Block out the required time interval with the help of blocked events.

There are also built-in methods available in Angular Scheduler to handle all the advanced event-handling options. One such case is that, if you want to restrict the time cells to accept only one appointment per time slot, then you can make use of the “isSlotAvailable” public method of Angular Scheduler.

Now let’s see how to bind appointment data to Angular Scheduler either as local JSON data or through remote service URLs.

1. In the app.component.ts file, you need to add a data source to the Angular Scheduler. As a first step, import the “EventSettingsModel” from the “ej2-angular-schedule” package.
import { EventSettingsModel } from '@syncfusion/ej2-angular-schedule';

2. Define a variable of type “EventSettingsModel” and assign the array of event objects with valid event fields. Simply providing start- and end-time fields is enough to create an appointment.

3. Now, assign this data source object to the “eventSettings” property of the scheduler and run the application.

Check out the event fields of Angular Scheduler and its available settings here: ej2.syncfusion.com/angular/documentation/schedu…

If you want to bind a remote data source to the scheduler, then you need to make use of the DataManager. You need to assign the valid remote URL service to the URL property of DataManager, which will retrieve the appointment data through the post action and then bind the resultant data to the scheduler.

#angularscheduler #eventcalendar #angularcalendar