event-calendar.component

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  OnDestroy
} from '@angular/core';

import { events } from './mock-events';

declare var kendo: any;

import './kendo.customMonthView.js';

@Component({
  selector: 'app-event-calendar',
  templateUrl: './event-calendar.component.html',
  styleUrls: ['./event-calendar.component.css']
})

export class EventCalendarComponent implements AfterViewInit, OnDestroy {
  @ViewChild('scheduler') schedulerEl: ElementRef;
  @ViewChild('customInput') inputEl: ElementRef;

  constructor(private hostEl: ElementRef) {}

  ngAfterViewInit(): void {
    kendo.jQuery(this.schedulerEl.nativeElement).kendoScheduler({
      date: new Date('2016/11/1 12:00 AM'),
      height: 600,
      views: [
        'month',
        {
          type: 'CustomMonthView'
        }
      ],
      selectable: true,
      timezone: 'Etc/UTC',
      dataSource: events,
      change: function(event) {
        console.log('Clicked!');
      }
    });

    kendo.jQuery(this.inputEl.nativeElement).kendoCustomInput({
      placeholder: 'Enter First Name'
    });
  }

  ngOnDestroy() {
    kendo.destroy(this.hostEl.nativeElement);
  }
}