@Listopad I created new post as I was not able to reply on this thread.
I am using angular and followed this example. GitHub - webix-hub/angular-demo-complex: This demo shows how to init Webix complex widgets in Anglular components. I added new component for scheduler as below.
I had to explicitly include scheduler.js in angular.json file and add typings to make scheduler global as well to fix build error. During run time I get this error in console http://localhost:55263/undefinedcalendars which means mybackend is not getting applied.
If possible can you provide any working angular solution similar to angular-demp-complex.
Here is the class I implemented.
import { Component, ElementRef, OnDestroy, OnInit, Output, EventEmitter, ViewEncapsulation } from ‘@angular/core’;
// @ts-ignore
import ‘…/…/webix/scheduler/codebase/scheduler.js’;
export class MyBackend extends scheduler.services.Backend {
eventsData = [{“start_date”:“2020-10-08 17:00:00”,“end_date”:“2020-10-08 20:00:00”,“text”:" sandeep - Leipzig “,“details”:” Leipzig, GER “,“color”:”#91E4A6",“calendar”:2,“id”:“1”},{“start_date”:“2020-10-12 14:00:00”,“end_date”:“2020-10-12 17:00:00”,“text”:" Commerz Bank Arena “,“details”:” Frankfurt, GER “,“color”:”#F68896",“calendar”:2,“id”:“10”},{“start_date”:“2020-10-04 11:00:00”,“end_date”:“2020-10-04 14:00:00”,“text”:" LTU Arena “,“details”:” Dusseldorf, GER “,“id”:“11”},{“start_date”:“2020-10-10 14:00:00”,“end_date”:“2020-10-10 17:00:00”,“text”:” Olympiastadion - Berlin “,“details”:” Berlin, GER “,“color”:”#01C2A5",“calendar”:2,“id”:“12”},{“start_date”:“2020-10-13 11:00:00”,“end_date”:“2020-10-13 14:00:00”,“text”:" Olympic Stadium - Munich “,“details”:” Munich, GER",“calendar”:2,“id”:“13”},{“start_date”:“2020-10-23 14:00:00”,“end_date”:“2020-10-23 17:00:00”,“text”:" Puskas Ferenc Stadium “,“details”:” Budapest, Hungary “,“color”:”#74B1A7",“calendar”:2,“id”:“14”},{“start_date”:“2020-10-25 10:00:00”,“end_date”:“2020-10-25 13:00:00”,“text”:" Slavia Stadion “,“details”:” Prague, Czech Republic",“calendar”:2,“id”:“15”},{“start_date”:“2020-10-21 20:00:00”,“end_date”:“2020-10-21 23:00:00”,“text”:" Comunale Giuseppe Meazza - San Siro “,“details”:” Milan, Italy “,“color”:”#CF89D5",“calendar”:1,“id”:“16”},{“start_date”:“2020-10-21 00:00:00”,“end_date”:“2020-11-05 00:00:00”,“all_day”:1,“text”:“Wimbledon”,“details”:“Wimbledon\nJune 21, 2014 - July 5, 2014”,“color”:“#CF89D5”,“calendar”:2,“id”:“17”},{“start_date”:“2020-10-30 18:00:00”,“end_date”:“2020-10-30 21:00:00”,“text”:" Parken Stadium “,“details”:” Copenhagen, DK “,“color”:”#F68896",“calendar”:2,“id”:“18”},{“start_date”:“2020-09-12 00:00”,“end_date”:“2020-09-13 00:00”,“text”:“Interstellar Cruise”,“details”:“An awesome VR session with my buddies at the Jason’s place”,“recurring”:“FREQ=YEARLY;BYMONTH=9;BYMONTHDAY=12”,“color”:“#D2FB9E”,“calendar”:1,“id”:“19”},{“start_date”:“2020-10-22 19:00:00”,“end_date”:“2020-10-22 22:00:00”,“text”:" Inter Stadion Slovakia “,“details”:” Bratislava, Slovakia “,“color”:”#74B1A7",“calendar”:2,“id”:“2”},{“start_date”:“2020-09-20 09:00”,“end_date”:“2020-09-20 11:00”,“text”:“Panda Weekly Summit”,“details”:“The Panda club meeting, discussing the latest situation and solutions; planning.”,“recurring”:“FREQ=DAILY;INTERVAL=3;UNTIL=20211023T000000Z”,“calendar”:1,“id”:“20”},{“start_date”:“2020-09-02 00:00”,“end_date”:“2020-09-04 00:00”,“text”:“Biweekly Horror Book Club”,“details”:“Discussing the latest book of the fortnight; genres: mostly horror, both pure and within other genres like fantasy and sci-fi”,“color”:“#CF89D5”,“recurring”:“FREQ=DAILY;INTERVAL=14;UNTIL=20211103T000000Z”,“calendar”:1,“id”:“21”},{“start_date”:“2020-09-13 03:00”,“end_date”:“2020-09-15 05:00”,“text”:“Speculative Fiction Discussion Club”,“details”:“Contemporary speculative fiction by young authors”,“recurring”:“FREQ=DAILY;INTERVAL=14;UNTIL=20210905T000000Z;EXDATE=20201011T000000Z”,“calendar”:1,“id”:“22”},{“start_date”:“2020-09-20 20:01”,“end_date”:“2020-09-22 20:01”,“text”:“My 30th Birthday”,“details”:“Me and my few cronies at my place. DO NOT forget about the pre-order of foods.”,“color”:“#CF89D5”,“calendar”:1,“id”:“23”},{“start_date”:“2020-09-21 20:01”,“end_date”:“2020-09-22 20:01”,“text”:“A day with a hero”,“details”:“An all-nighter watching Marvel films”,“color”:“#74B1A7”,“recurring”:“FREQ=WEEKLY;BYDAY=MO,WE,TH;INTERVAL=2;UNTIL=20210422T000000Z”,“id”:“24”},{“start_date”:“2020-09-21 10:00”,“end_date”:“2020-09-21 18:00”,“text”:“Women and aliens”,“details”:“A discussion of our club dedicated to the sci-fi works written by female authors, both contemporary literature and classics”,“color”:“#EF9C80”,“recurring”:“FREQ=MONTHLY;UNTIL=20210922T000000Z”,“calendar”:1,“id”:“25”},{“start_date”:“2020-09-18 15:01”,“end_date”:“2020-09-18 18:01”,“text”:“Grandmother’s shopping”,“details”:“List: \n- bananas\n- apples\n- pancake flour\n- books (at least three) by Shirley Jackson”,“color”:“#997CEB”,“recurring”:“FREQ=WEEKLY;INTERVAL=3;UNTIL=20210322T000000Z”,“calendar”:1,“id”:“26”},{“start_date”:“2020-09-19 20:01”,“end_date”:“2020-09-20 04:01”,“text”:“A day with a hero”,“details”:“An all-nighter with DC films”,“recurring”:“FREQ=WEEKLY;INTERVAL=2;UNTIL=20210323T000000Z”,“calendar”:2,“id”:“27”},{“start_date”:“2020-09-12 21:01”,“end_date”:“2020-09-22 21:01”,“text”:“Animals are also people”,“details”:“A festival organized by our volunteering community. \n\nActivities:\n- public donations; \n- animal adoption;\n- exhibition and fair of children’s artwork;\n- volunteer recruitment;\n- community education”,“color”:“#6BA8CB”,“recurring”:“FREQ=MONTHLY;INTERVAL=2;UNTIL=20210501T000000Z”,“calendar”:2,“id”:“28”},{“start_date”:“2020-09-22 21:01”,“end_date”:“2020-09-25 21:01”,“text”:“Galaxy Match”,“details”:“A match between best galaxy sky-fighters”,“color”:“#6BA8CB”,“recurring”:“FREQ=WEEKLY;INTERVAL=3;UNTIL=20210422T000000Z”,“calendar”:2,“id”:“29”},{“start_date”:“2020-10-10 00:00:00”,“end_date”:“2020-10-13 00:00:00”,“all_day”:1,“text”:“Aegon Championship”,“details”:“The Queens Club \nLondon, ENG”,“calendar”:2,“id”:“3”},{“start_date”:“2020-09-19 10:30”,“end_date”:“2020-09-19 12:30”,“text”:“Dance club”,“details”:“Teaching dancing at the community center”,“color”:“#DD89AF”,“recurring”:“FREQ=WEEKLY;BYDAY=TU,SA;UNTIL=20210910T000000Z”,“calendar”:1,“id”:“30”},{“start_date”:“1986-09-15 00:00:00”,“end_date”:“1986-09-16 00:00:00”,“text”:“Brother’s Birthday”,“recurring”:“FREQ=YEARLY;BYMONTH=9;BYMONTHDAY=15;”,“calendar”:3,“id”:“31”},{“start_date”:“1995-10-25 00:00:00”,“end_date”:“1995-10-26 00:00:00”,“text”:“Sister’s Birthday”,“recurring”:“FREQ=YEARLY;BYMONTH=10;BYMONTHDAY=25;”,“calendar”:3,“id”:“32”},{“start_date”:“2012-10-05 00:00:00”,“end_date”:“2012-10-06 00:00:00”,“text”:“Cat’s Birthday”,“recurring”:“FREQ=YEARLY;BYMONTH=10;BYMONTHDAY=5;”,“calendar”:3,“id”:“33”},{“start_date”:“1986-10-04 00:00:00”,“end_date”:“1986-10-04 00:00:00”,“all_day”:1,“text”:“Kate Middleton’s Birthday”,“recurring”:“FREQ=YEARLY;BYMONTH=10;BYMONTHDAY=4;”,“calendar”:3,“id”:“34”},{“start_date”:“2013-10-22 00:00:00”,“end_date”:“2013-10-22 00:00:00”,“all_day”:1,“text”:“Prince George’s Birthday”,“recurring”:“FREQ=YEARLY;BYMONTH=10;BYMONTHDAY=22;”,“calendar”:3,“id”:“35”},{“start_date”:“1945-05-08 00:00:00”,“end_date”:“1945-05-08 00:00:00”,“all_day”:1,“text”:“Victory Day”,“color”:“#DD89AF”,“recurring”:“FREQ=YEARLY;BYMONTH=5;BYMONTHDAY=9;UNTIL=20450509T000000Z”,“calendar”:4,“id”:“36”},{“start_date”:“1996-07-03 00:00:00”,“end_date”:“1996-07-03 00:00:00”,“all_day”:1,“text”:“Independence Day in Belarus”,“recurring”:“FREQ=YEARLY;BYMONTH=7;BYMONTHDAY=3”,“calendar”:4,“id”:“37”},{“start_date”:“1900-01-01 00:00:00”,“end_date”:“1900-01-01 00:00:00”,“all_day”:1,“text”:“New Year”,“recurring”:“FREQ=YEARLY;BYMONTH=1;BYMONTHDAY=1”,“calendar”:4,“id”:“38”},{“start_date”:“1900-12-25 00:00:00”,“end_date”:“1900-12-25 00:00:00”,“all_day”:1,“text”:“Christmas”,“recurring”:“FREQ=YEARLY;BYMONTH=12;BYMONTHDAY=25”,“calendar”:4,“id”:“39”},{“start_date”:“2020-10-05 12:00:00”,“end_date”:“2020-10-05 15:00:00”,“text”:" LTU Arena “,“details”:” Dusseldorf, GER “,“color”:”#ADD579",“calendar”:2,“id”:“4”},{“start_date”:“2020-10-07 20:00:00”,“end_date”:“2020-10-07 23:00:00”,“text”:" Zentralstadion - Leipzig “,“details”:” Leipzig, GER “,“calendar”:2,“id”:“5”},{“start_date”:“2020-10-27 19:00:00”,“end_date”:“2020-10-27 22:00:00”,“text”:” Stade de France - Paris “,“details”:” Paris, FRA “,“color”:”#91E4A6",“calendar”:2,“id”:“6”},{“start_date”:“2020-10-24 00:00:00”,“end_date”:“2020-10-08 00:00:00”,“all_day”:1,“text”:“French Open”,“details”:“Philippe-Chatrier Court \nParis, FRA”,“calendar”:1,“id”:“7”},{“start_date”:“2020-10-02 10:00:00”,“end_date”:“2020-10-02 13:00:00”,“text”:" HSH Nordbank Arena (formerly AOL Arena) “,“details”:” Hamburg, GER “,“color”:”#6BA8CB",“calendar”:2,“id”:“8”},{“start_date”:“2020-10-16 19:00:00”,“end_date”:“2020-10-16 22:00:00”,“text”:" Stadio Olimpico “,“details”:” Rome, Italy “,“calendar”:2,“id”:“9”},{“origin_id”:“0”,“text”:”“,“start_date”:“2020-10-07 13:00:00”,“end_date”:“2020-10-07 14:00:00”,“all_day”:“0”,“calendar”:“1”,“color”:”“,“details”:”“,“recurring”:”“,“id”:“Mii2rQb3r4B0bfg3”},{“text”:“Speculative Fiction Discussion Club”,“details”:“Contemporary speculative fiction by young authors”,“color”:”“,“all_day”:”“,“start_date”:“2020-09-28 03:00:00”,“end_date”:“2020-09-30 05:00:00”,“origin_id”:“22”,“calendar”:“1”,“id”:“T6zCzCLb9BU1UY9E”}];
calendarsData = [{“text”:“Personal”,“color”:”#997CEB",“active”:1,“id”:“1”},{“text”:“Public”,“color”:“#01C2A5”,“active”:1,“id”:“2”},{“text”:“Birthdays”,“color”:“#D2FB9E”,“active”:0,“id”:“3”},{“text”:“Holidays”,“color”:“#F68896”,“active”:0,“id”:“4”}];
// url() {
// return "";
// }
events() {
return webix.promise.resolve(this.eventsData);
}
calendars() {
return webix.promise.resolve(this.calendarsData);
}
}
@Component({
encapsulation: ViewEncapsulation.None,
selector: ‘scheduler’,
template:“”,
styleUrls: [
‘./…/…/webix/scheduler/codebase/scheduler.css’,
],
})
export class SchedulerComponent implements OnDestroy, OnInit {
//private ui: webix.ui.scheduler;
private ui: any;
constructor(private el: ElementRef) {
this.ui = webix.ui({
view: "scheduler",
height: 700,
width: 1000,
//url: "https://docs.webix.com/calendar-backend/",
override: new Map([
[scheduler.services.Backend, MyBackend]
]),
container: this.el.nativeElement
});
}
ngOnInit(){
this.ui.resize();
}
ngOnDestroy(){
this.ui.destructor();
}
}