New to Kendo UI for Angular? Start a free 30-day trial

Custom View

The Scheduler allows you to create custom views by using the kendoSchedulerView directive. This enables you to render any custom content within the Scheduler, giving you complete control over how data is displayed and organized.

Custom views are ideal for specialized scheduling scenarios such as custom date range event views, project timelines, resource allocation dashboards, or any unique business requirements that built-in views cannot address.

Custom views have limitations: they cannot be reused across multiple schedulers, and date navigation (next/previous) requires custom implementation as the built-in navigation only works with predefined views.

Change Theme

Theme

Loading ...

Custom View Setup

To create a custom view, follow these steps:

Add the custom view to your Scheduler with the kendoSchedulerView directive and an ng-template. The directive accepts a string value that sets the user-friendly name for the view. This name appears in the view selector.

html

<kendo-scheduler [kendoSchedulerBinding]="events">
  <kendo-scheduler-day-view></kendo-scheduler-day-view>
  <ng-template kendoSchedulerView="Custom View"> 
      <!-- Your custom content goes here -->
  </ng-template>
</kendo-scheduler>

Set an invariant name with the kendoSchedulerViewName input. This step is optional but recommended when you need a different internal identifier for your view:
html
```
<ng-template kendoSchedulerView="My Custom View" kendoSchedulerViewName="custom">
    
</ng-template>
```

Add your custom component inside the template and pass any data it needs. You can pass scheduler events, selected date, or any other application data:

html

<ng-template kendoSchedulerView="Custom View"> 
    <app-custom-view 
        [events]="events" 
        [selectedDate]="selectedDate"
        [customData]="myCustomData">
    </app-custom-view>
</ng-template>

Create your custom view component to render the content:

typescript

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

@Component({
  selector: 'app-custom-view',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="custom-view">
      <h3>My Custom View</h3>
      <p>Selected Date: {{ selectedDate | date }}</p>
      <div class="events">
        @for (event of events; track event.id) {
          <div class="event">{{ event.title }}</div>
        }
      </div>
    </div>
  `,
})
export class CustomViewComponent {
  @Input() events: SchedulerEvent[] = [];
  @Input() selectedDate: Date = new Date();
  // Add any other inputs your custom view needs
}

That's it! You now have a custom view integrated into your Scheduler. You can further enhance it by adding styles, interactivity, or additional data as needed.

Custom View

Custom View Setup

Suggested Links