Master Time with the Kendo UI for Angular Scheduler

The Scheduler for Kendo UI for Angular has arrived. Check out everything you can do with this new component today, and let us know where you'd like to see it go next.

I'm beyond excited to be able to type these words: The Kendo UI for Angular Scheduler component is finally here! I know that many of you have been waiting for this component for a while and the day has come where you can start building in scheduling abilities in to your Angular applications!

There's plenty to talk about with this component so I wanted to provide an introduction to the Scheduler that will give you an idea of exactly what is possible with the component and what we're looking to add to it in the future.

Let's jump in right away!

Basic Data Binding

There are a couple of ways you can bind to the Scheduler, but at the core of everything is the SchedulerEvent class. While the Scheduler component deals with dates pretty easily, we do need more information around events than simply providing an array of JavaScript dates. This is why we created the SchedulerEvent class. Let's discuss this class just a little bit before doing more on binding.

The SchedulerEvent Class

The SchedulerEvent Class is a helper class that allows us to interface with something as advanced as the Scheduler. SchedulerEvent is simply set of fields designed to make sure the Scheduler operates correctly.

Note: For those of you that have used the Scheduler from our jQuery component library, this will seem pretty familiar as we also had a class ready for event scheduling there.

I recommend looking over the documentation for more details, but here's a quick rundown of the fields available:

Required

• end
• isAllDay
• start
• title

Not-required

• description
• endTimezone
• id
• recurrenceExceptions
• recurrenceId
• recurrenceRule
• startTimezone

The names of the fields kind of give away what their purpose is, but its fairly easy to see just how to build this out for yourself when you follow along the SchedulerEvent API docs.

In a future iteration of the Scheduler we will have an option for mapping model fields within the component's configuration, but with this initial version you will have to set up your events in a more manual way.

As a quick helpful tip, if you have an existing model that you would like to use to bind to the Scheduler you can simply map from your model to an array of SchedulerEvents like this sample taken from our documentation:

import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

const events = model.map(dataItem => (
  <SchedulerEvent> {
    id: dataItem.TaskID,
    start: dataItem.Start,
    end: dataItem.End,
    isAllDay: dataItem.IsAllDay,
    title: dataItem.Title,
    // Optional fields
    startTimezone: dataItem.startTimezone,
    endTimezone: dataItem.endTimezone,
    description: dataItem.Description,
    recurrenceRule: dataItem.RecurrenceRule,
    recurrenceId: dataItem.RecurrenceID,
    recurrenceException: dataItem.RecurrenceException
  }
));

Binding

Once we're familiar with how to set up individual events, let's go ahead and actually bind to the Scheduler! There are two ways right now, using the built-in directive or manual binding.

Built-in Directive

import { Component } from '@angular/core';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

@Component({
  selector: 'my-app',
  template: `
    <kendo-scheduler [kendoSchedulerBinding]="events [selectedDate]="selectedDate" style="height: 600px;">
      <kendo-scheduler-week-view startTime="07:00">
      </kendo-scheduler-week-view>
    </kendo-scheduler>
  `
})

export class AppComponent {
  public selectedDate: Date = new Date('2018-10-22');
  public events: SchedulerEvent[] = [{
    id: 1,
    title: 'Breakfast',
    start: new Date('2018-10-22T09:00:00'),
    end: new Date('2018-10-22T09:30:00'),
    recurrenceRule: 'FREQ=DAILY;COUNT=5;'
  }];
}

This is pretty easy to set up. Once we define our array of SchedulerEvent objects, we then use the [kendoSchedulerBinding] attribute and pass in our events to this property. This approach will filter the events that are out of range for the current view, and expands the recurring series in-memory.

Manual Binding

import { Component } from '@angular/core';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

@Component({
  selector: 'my-app',
  template: `
    <kendo-scheduler [events]="events [selectedDate]="selectedDate" style="height: 600px;">
      <kendo-scheduler-week-view startTime="07:00">
      </kendo-scheduler-week-view>
    </kendo-scheduler>
  `
})

export class AppComponent {
  public selectedDate: Date = new Date('2018-10-22');
  public events: SchedulerEvent[] = [{
    id: 1,
    title: 'Breakfast',
    start: new Date('2018-10-22T09:00:00'),
    end: new Date('2018-10-22T09:30:00'),
  }];
}

With manual binding we instead use the [events] attribute when binding to our events. As mentioned, you have to do a little bit more leg work here and the built-in recurrence engine will not be used, but it gives you some flexibility to make sure the Scheduler fits into your application.

Editing

Currently editing is done using the reactive directive, kendoSchedulerReactiveEditing. This is a Reactive Model-Driven Form, which is the only supported way to edit these items as of writing this blog post (November 2018). However, in the future we will also add in support for Template-Driven Forms. Editing is also handled by a user double-clicking on an event, as dragging/resizing an event is not available (yet). By the way, this is one of the first items we are looking to address over the next couple of weeks, so it will be added as soon as it's available in a future version of the component!

As you can see, we can edit both single events and the rules we want to set up around recurrence, which is great to see as an out-of-the-box set of features.

I recommend checking out the automatic editing documentation article to see exactly how to enable editing in your own implementation of the Scheduler.

Views

As a part of its initial release, the Angular Scheduler supports the following views.

Day and Week View

Month View

Timeline View

Agenda View

As you can see, quite a lot of different ways to represent your scheduled events!

Time Zones & Globalization

Of course, when we're dealing with scheduling we have to include support for dealing with time zones! By default, when no time zone is set, the Scheduler will pick the local time zone of the browser, which means that each user gets to see all saved events in their local time zone.

In order to ensure that a time zone is fixed across all instances of your Angular Scheduler you will have to work a bit with the Kendo UI data and math library, as described here. All you're doing is setting the timezone property once it comes to code though, so it's a quick import and you're off to the races!

As seen above, events can also have their own time zone information, which gives yet another way to deal with resources located in various time zones.

Speaking of time zones, most likely you will have a need to set up Schedulers for various internationalization and globalization scenarios due to having folks in different countries. Luckily this is pretty easy as the Angular Scheduler includes support for internationalization through the Kendo UI kendo-intl package, and also has the ability for you to create custom messages and replace any strings that may be rendered by default.

But Wait, There's More!

What I covered here gives you a general overview of what is possible with the new Kendo UI for Angular Scheduler, but there's certainly more to work with in the component! Take a look through the Scheduler documentation in order to get more code samples and API references.

The Future

As you can see across our documentation pages we consider this initial version as a beta due to not having the full feature set that we see in the jQuery equivalent. That being said, I wanted to give everyone some insight in to what we're working on for a future version of the Kendo UI for Angular Scheduler. Some of the primary features we'll be working on include:

• Working with resources
• Resizing and reordering for events

Our ultimate goal is to evolve the Scheduler to overlap with the feature set that we have available in the jQuery edition, so there's more to look forward to form this component!

Please let us know what you think about the component! I'm excited to finally be able to bring this huge component to the Angular developer community and I'm sure you have plenty of places where you can stick a Scheduler and use it already!

We can't wait to hear your thoughts. If you find anything missing that you'd like to see in a future version of the component you can feel free to submit your feedback to our public feedback portal, or leave a comment below.

Of course, if you haven't tried Kendo UI for Angular yet, you can play around with the Scheduler and much more today by starting a free 30-day trial today.