CODEWITHSUNDEEP
javascriptangulartypescript
Zulihan
Zulihan

Reputation: 21

How to use Timetable.js in Angular typescript?

I'm trying to implement this nice javascript plugin into an Angular6 project : Timetable.js / on Github

Looking for a way to do it I've come accross this : How to use Timetable.js in ionic2 typescript. The post is two years old and it seems that the problem hasn't been solved. Based on the code tmnrkb posted I've written that code in my app.component, after declaring the js script file in the angular.json file :

import { Component } from '@angular/core';

declare class Timetable {
  constructor();
  scope: string;
  locations: Array<string>;
  events: Array<any>;
  Renderer(tt: any): any;
  setScope(start: number, end: number);
  addLocations(locations: Array<string>);
  addEvent(artistCode: string, stageCode: string, startDate: Date, endDate: Date);
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  timetable = new Timetable();

  constructor() {
    this.addTimeTable();
  }

  addTimeTable() {
    this.timetable.setScope(9, 3);

    this.timetable.addLocations(['London', 'Paris', 'Los Angeles']);

    this.timetable.addEvent('Sightseeing', 'London', new Date(2018, 8, 25, 9), new Date(2018, 8, 26, 12));

    this.timetable.addEvent('Zumba', 'Paris', new Date(2018, 8, 27, 9), new Date(2018, 8, 29, 12));

    this.timetable.addEvent('Cocktails', 'Los Angeles', new Date(2018, 8, 22, 9), new Date(2018, 8, 23, 12));

    const renderer = this.timetable.Renderer(this.timetable);
    // const renderer = new Timetable.Renderer(this.timetable);
    renderer.draw('.timetable');
  }



}

When I run ng serve it compiles the code but in the console I've got this error:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.timetable.Renderer is not a function
    at AppComponent.push../src/app/app.component.ts.AppComponent.addTimeTable (app.component.ts:39)
    at new AppComponent (app.component.ts:25)

So I wonder why it says that Renderer is not a function.

Upvotes: 1

Views: 1595

Answers (1)

Zulihan
Zulihan

Reputation: 21

So based on Timetable.js, (the plugin's Github) I managed to make it work in Angular by converting it to Typescript. Here's the result on my Github, in case someone is interested. Thanks to stevenaanen 'cause his plugin is exactly what I needed.

Upvotes: 1

Related Questions