@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/reports/tasks/tasks.component.ts

@@ -0,0 +1,115 @@
+import { Component, ViewChild, Inject, OnDestroy } from "@angular/core";
+import { KanbanComponent, ColumnsModel, DragEventArgs, CardSettingsModel, SwimlaneSettingsModel, CardRenderedEventArgs } from "@syncfusion/ej2-angular-kanban";
+import { Observable, forkJoin, Subject } from "rxjs";
+import { tap, takeUntil } from "rxjs/operators";
+import { BizDoc } from "../../core/decorators";
+import { State } from "../../core/models";
+import { ReportComponent } from "../../core/base";
+import { SessionService } from "../../core/session.service";
+import { ReportRef } from "../report-ref";
+import { MailboxService } from "../../core/mailbox.service";
+import { AccountService } from "../../core/account.service";
+import { PromptService } from "../../core/prompt.service";
+import { DocumentInfo } from "../../core/info/document-info.service";
+
+/** */
+@Component({
+  templateUrl: 'tasks.component.html'
+})
+@BizDoc({ selector: 'bizdoc-tasks' })
+export
+  class TasksComponent implements ReportComponent<Model, Axes>, OnDestroy {
+  @ViewChild(KanbanComponent) kanban: KanbanComponent;
+  readonly columns: ColumnsModel[];
+  readonly cardSettings: CardSettingsModel = { contentField: 'subject', headerField: 'number', showHeader: true };
+  readonly swimlaneSettings: SwimlaneSettingsModel;
+  readonly allowDragAndDrop: boolean;
+  dataSource: Model[];
+  height: number;
+  private readonly _map: { [stateId: string]: State } = {};
+  private readonly _destroy = new Subject<void>();
+  constructor(private _reportRef: ReportRef<Options>,
+    private _mailbox: MailboxService,
+    private _accounts: AccountService,
+    private _sb: PromptService,
+    private _info: DocumentInfo,
+    private _session: SessionService) {
+
+    const { states, swimlane, assignable } = this._reportRef.options;
+    if (swimlane !== false)
+      this.swimlaneSettings = {
+        allowDragAndDrop: assignable !== false,
+        textField: 'userName',
+        keyField: 'userId'
+      };
+    this.allowDragAndDrop = assignable !== false;
+    this.columns = this._session.profile.states.filter(s => !states || states.indexOf(s.name) > -1).map(s => {
+      this._map[s.name] = s;
+      return { headerText: s.title, keyField: s.name, allowToggle: true } as ColumnsModel;
+    });
+    _reportRef.resize.
+      pipe(takeUntil(this._destroy)).
+      subscribe(d =>
+        this.height = d.height - 35);
+  }
+  /**
+   * 
+   * @param data
+   */
+  onBind(data: Model[]) {
+    if (data.length)
+      this._decorate(data).subscribe(() =>
+        this.dataSource = data);
+    else this.dataSource = [];
+  }
+  private _decorate(data: Model[]): Observable<any> {
+    const observables: Observable<any>[] =
+      data.map(r => this._accounts.get(r.userId).pipe(tap(u => r.userName = u.name)));
+    return forkJoin(observables);
+  }
+  /**
+   * 
+   * @param evt
+   */
+  drag(evt: DragEventArgs) {
+    const { id, stateId, userId } = evt.data[0] as Model;
+    this._mailbox.changeState(id, stateId, userId).
+      subscribe(undefined, () => this._sb.error());
+  }
+  /**
+   * 
+   * @param id
+   */
+  preview(id: number) {
+    this._info.open(id);
+  }
+  cardRendered(evt: CardRenderedEventArgs) {
+    const { stateId } = (evt.data as any as Model), { color: borderColor } = this._map[stateId];
+    //borderColor && setStyleAttribute(evt.element as HTMLElement, { borderColor });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+
+interface Model {
+  userName: string;
+  id: number;
+  number: string;
+  subject: string;
+  userId: string;
+  value: number;
+  currencyCode: string;
+  stateId: string;
+}
+
+interface Options {
+  swimlane?: boolean;
+  assignable?: boolean;
+  states?: string[];
+}
+interface Axes {
+  [axis: string]: (string | number);
+}

package/src/lib/reports/timeline/timeline.component.exp.ts

@@ -0,0 +1,225 @@
+////     "@syncfusion/ej2-angular-gantt": "^18.2.57"
+
+//import { Component, ViewChild, Inject } from "@angular/core";
+//import { ReportComponent } from "../../core/base";
+//import { BizDoc } from "../../core/decorators";
+//import { TooltipSettingsModel, TimelineSettingsModel, TaskFieldsModel, LabelSettingsModel, SplitterSettingsModel, DayWorkingTimeModel, ColumnModel, EventMarkerModel, GanttComponent, RowSelectingEventArgs, ZoomTimelineSettings } from "@syncfusion/ej2-angular-gantt";
+//import { TranslateService } from "../../core/translate.service";
+//import { SessionService } from "../../core/session.service";
+//import { AccountService } from "../../core/account.service";
+//import { BizDocConfig, BIZDOC_CONFIG } from "../../core/configuration";
+//import { Directionality } from "@angular/cdk/bidi";
+//import { Observable, forkJoin } from "rxjs";
+//import { Log, Recipient, UserInfo, WorkflowInfo, ScheduledEvent } from "../../core/models";
+//import { tap, map } from "rxjs/operators";
+//import dayjs from 'dayjs';
+
+//const DATE_TIME_FORMAT = 'MMMM d, yyyy hh:mm';
+//@Component({
+//  selector: 'bizdoc-timeline',
+//  templateUrl: 'timeline.component.html'
+//})
+//@BizDoc({
+//  selector: 'bizdoc-timeline'
+//})
+//export
+//  class TimelineReport implements ReportComponent<Chain, Args, Options> {
+//  @ViewChild(GanttComponent) gantt: GanttComponent;
+//  data: Task[] = [];
+//  ending: Date;
+//  starting: Date;
+//  readonly dir = this._directionality.value;
+//  readonly splitterSettings: SplitterSettingsModel = {
+//    separatorSize: 4
+//  };
+//  readonly taskSettings: TaskFieldsModel = {
+//    id: 'taskId',
+//    name: 'title',
+//    startDate: 'time',
+//    endDate: 'ending',
+//    duration: 'duration',
+//    dependency: 'predecessor',
+//    progress: 'progress',
+//    child: 'subtasks'
+//  };
+//  readonly columns: ColumnModel[] = [
+//    { field: 'title', headerText: this._translate.get('Task') }
+//  ];
+//  public readonly tooltipSettings: TooltipSettingsModel = { showTooltip: false };
+//  public readonly timelineSettings: TimelineSettingsModel = {
+//    timelineViewMode: 'Day',
+//    topTier: {
+//      format: 'MMM dd',
+//      unit: 'Day',
+//    },
+//    bottomTier: {
+//      unit: 'Hour',
+//      format: 'h.mm a'
+//    }
+//  };
+//  eventMarkers: EventMarkerModel[] = [
+//  ];
+//  readonly currentZoomingLevel: ZoomTimelineSettings = {};
+//  public readonly labelSettings: LabelSettingsModel = {
+//    //rightLabel: 'name'
+//  };
+//  public readonly dayWorkingTime: DayWorkingTimeModel[] = [{ from: 0, to: 24 }];
+//  readonly dateFormat = this._config && this._config.formats && this._config.formats.dateTime ? this._config.formats.dateTime : DATE_TIME_FORMAT;
+//  private _id = 0;
+//  private _tasks: Task[];
+//  /** timeline-view ctor */
+//  constructor(private _directionality: Directionality, @Inject(BIZDOC_CONFIG) private _config: BizDocConfig,
+//    private _accounts: AccountService, private _session: SessionService,
+//    private _translate: TranslateService) {
+//  }
+//  onBind(data: Chain[], args: Args) {
+//    this._tasks = [];
+//    this._id = 0;
+//    this.eventMarkers = [];
+//    data.length &&
+//      this._prepare(data[0]).subscribe(r => {
+//        this.data = r;
+//        const task = r.find(t => t.documentId === args.documentId);
+//        this.starting = task.time;
+//      });
+//  }
+//  rowSelecting(r: RowSelectingEventArgs) {
+//  }
+//  private _prepare(chain: Chain, parent?: Task): Observable<Task[]> {
+//    const subtasks: Task[] = [], observers: Observable<any>[] = [];
+//    function predecessors(nodeId: string): string {
+//      const nodes = chain.workflow.connectors.filter(c => c.targetID === nodeId).map(c => c.sourceID);
+//      const predecessors = subtasks.filter(l => nodes.indexOf(l.nodeId) > -1);
+//      return predecessors.length ? predecessors.join(',') : null;
+//    }
+//    chain.log.forEach(l => {
+//      switch (l.type) {
+//        case 'ActionTaken':
+//          if (!l.nodeId) break;
+//          observers.push(this._accounts.get(l.userId).pipe(tap((a: UserInfo) => {
+//            const action = this._session.profile.actions.find(a => a.name === l.action);
+//            const time = dayjs(l.time);
+//            const task = {
+//              taskId: this._id++,
+//              type: l.type,
+//              nodeId: l.nodeId,
+//              ending: time.toDate(),
+//              time: time.add(- l.duration, 's').toDate(),
+//              duration: l.duration * 60,
+//              predecessor: predecessors(l.nodeId),
+//              progress: 100,
+//              title: action ? action.past || action.title : l.action,
+//              name: a.name
+//            } as Task;
+//            if (l.role) {
+//              const role = this._session.profile.roles.find(o => o.name === l.role);
+//              if (role) task.name += `, ${role.name}`;
+//            }
+//            else if (a.role)
+//              task.name += `, ${a.role}`;
+//            const state = subtasks.find(t => t.type === 'StateChange' && t.time <= task.time && (!t.ending || t.ending >= task.time));
+//            if (state) {
+//              if (!state.subtasks) state.subtasks = [];
+//              state.subtasks.push(task);
+//            }
+//            else
+//              subtasks.push(task);
+//          })));
+//          break;
+//        case 'StateChange':
+//          {
+//            if (l.estimate) break;
+//            const state = this._session.profile.states.find(s => s.name === l.state);
+//            const task = {
+//              taskId: this._id++,
+//              type: l.type,
+//              time: dayjs(l.time).toDate(),
+//              title: state ? state.past || state.title : l.state
+//            } as Task;
+//            if (l.duration) {
+//              task.ending = new Date(task.time.valueOf() + l.duration * 1000);
+//              task.duration = l.duration * 60;
+//            }
+//            subtasks.push(task);
+//            break;
+//          }
+//        case 'Submit':
+//          this.eventMarkers.push({
+//            day: new Date(l.time),
+//            label: this._translate.get('Submition')
+//          });
+//          break;
+//      }
+//    });
+//    chain.events.forEach(e => {
+//      this.eventMarkers.push({
+//        day: new Date(e.starting),
+//        label: e.title
+//      });
+//    });
+//    chain.recipients.filter(r => r.pending).forEach(r => {
+//      const time = dayjs(r.received), node = chain.workflow.nodes.find(n => n.id === r.nodeId);
+//      const task = {
+//        taskId: this._id++,
+//        type: 'pending',
+//        time: time.toDate(),
+//        title: this._translate.get('IsPending'),
+//        predecessor: predecessors(r.nodeId),
+//        progress: node && node.standardTime ? Math.floor(100 / dayjs().diff(time, 's') * node.standardTime) : 0
+//      } as Task;
+//      subtasks.push(task);
+//      observers.push(this._accounts.get(r.userId).pipe(tap(a => {
+//        task.name = a.name;
+//      })));
+//    });
+//    const form = this._session.profile.forms.find(f => f.name === chain.form);
+//    const task = {
+//      taskId: this._id++,
+//      title: `${form.title} #${chain.number}`,
+//      time: new Date(chain.log[0].time),
+//      documentId: chain.id,
+//      completed: chain.completed,
+//      subtasks: subtasks.sort((t0, t1) => t0.time > t1.time ? 1 : -1),
+//      predecessor: parent ? `${parent.taskId}${parent.completed ? 'FS' : 'FS'}` : null
+//    } as Task;
+//    const subtask = task.subtasks[subtasks.length - 1];
+//    task.ending = subtask ? subtask.ending || subtask.time : new Date(),
+//      chain.children.forEach(c => observers.push(this._prepare(c, task)));
+//    this._tasks.push(task);
+//    return forkJoin(observers).pipe(map(() => this._tasks));
+//  }
+//}
+//interface Args {
+//  documentId: number;
+//}
+//interface Chain {
+//  events: ScheduledEvent[];
+//  form: string;
+//  id: number;
+//  number: string;
+//  subject: string;
+//  completed?: boolean;
+//  log: Log[];
+//  recipients: Recipient[];
+//  children: Chain[];
+//  workflow?: WorkflowInfo;
+//}
+//interface Task {
+//  progress?: number;
+//  documentId?: number;
+//  completed?: boolean;
+//  taskId: number;
+//  type?: string;
+//  nodeId?: string;
+//  name: string;
+//  title?: string;
+//  time: Date;
+//  ending?: Date;
+//  duration?: number;
+//  subtasks?: Task[];
+//  state?: string;
+//  predecessor?: string;
+//}
+//interface Options {
+
+//}

package/src/lib/reports/timeline/timeline.component.html

@@ -0,0 +1,9 @@
+<!--<ejs-gantt height="100%" [dataSource]="data"
+           [taskFields]="taskSettings" [columns]="columns"
+           [timelineSettings]="timelineSettings" [labelSettings]="labelSettings" [toolbar]="null" [dir]="dir"
+           [eventMarkers]="eventMarkers" [treeColumnIndex]="0" [allowSelection]="true" [dateFormat]="dateFormat"
+           [tooltipSettings]="tooltipSettings"
+           [projectStartDate]="starting" [projectEndDate]="ending"
+           (rowSelecting)="rowSelecting($event)" [includeWeekend]="true"
+           [splitterSettings]="splitterSettings" durationUnit="Minute" [dayWorkingTime]="dayWorkingTime">
+</ejs-gantt>-->

package/src/lib/routes.desktop.ts

@@ -0,0 +1,196 @@
+import { OpenPolicy, PaneRoute } from "./core/configuration";
+
+import { BrowsePaneComponent } from './browse/browse.pane.component';
+import { ComposePaneComponent } from './compose/compose.pane.component';
+import { CubeViewPaneComponent } from "./cube/view.pane.component";
+import { CommentsPaneComponent } from "./compose/comments/comments.pane.component";
+import { CubeExplorePaneComponent } from "./cube/explore/explore.pane.component";
+import { ReportPaneComponent } from "./reports/report.pane.component";
+import { ExploreItemPaneComponent } from "./cube/explore/item.pane.component";
+import { WorkflowComponent } from "./admin/form/workflow/workflow.component";
+import { UtilityPaneComponent } from "./admin/utility.pane.component";
+import { TracePaneComponent } from "./compose/trace/trace.pane.component";
+import { VersionPaneComponent } from "./compose/version-compare/version.pane.component";
+import { RecipientResolver } from "./compose/recipient-resolver.service";
+import { DocumentResolver } from "./compose/document-resolver.service";
+import { AdminDismiss } from "./admin/admin-dismiss.service";
+import { SchedulerPaneComponent } from "./scheduler/scheduler.pane.component";
+import { ComposeDismiss } from "./compose/dismiss.service";
+import { FormResolve } from "./admin/form/form.resolve.service";
+import { CubeMatrixPaneComponent } from "./cube/matrix/matrix.pane.component";
+import { NotificationsPaneComponent } from "./notifications/notifications.pane.component";
+import { ContactsPaneComponent } from "./chat/contacts.pane.component";
+import { ConversationPaneComponent } from "./chat/conversation.pane.component";
+import { CommentEditsComponent } from "./compose/comments/edits.component";
+import { CommentLikesComponent } from "./compose/comments/votes.component";
+import { WorkflowNodeComponent } from "./admin/form/workflow/node.component";
+import { DashboardPaneComponent } from "./dashboard/dashboard.pane.component";
+import { DocumentViewPaneComponent } from "./views/views.pane.component";
+import { DocumentInfoPaneComponent } from "./compose/document.pane.component";
+import { ItemResolver } from './cube/explore/item-resolver.service';
+import { BrokenPage } from "./app.component";
+import { ActionPaneComponent } from './compose/action/action.pane.dialog.exp';
+
+export const PANES_CONFIG: PaneRoute[] = [{
+  path: 'dashboard',
+  component: DashboardPaneComponent,
+  policy: OpenPolicy.Clear | OpenPolicy.Stretch,
+},
+{ component: BrokenPage, path: 'broken' },
+{
+  path: 'mailbox',
+  children: [{
+    path: 'f/:id',
+    policy: OpenPolicy.Clear,
+    component: BrowsePaneComponent
+  }, {
+    path: 'i/:id',
+    component: ComposePaneComponent,
+    policy: OpenPolicy.Expandable,
+    resolve: {
+      item: RecipientResolver
+    },
+    canDismiss: ComposeDismiss,
+    children: [
+      {
+        path: 'views',
+        component: DocumentViewPaneComponent,
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable
+      },
+      {
+        path: 'action/:action',
+        component: ActionPaneComponent,
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable | OpenPolicy.Dialog
+      },
+      {
+        path: 'comments',
+        icon: 'format_quote',
+        component: CommentsPaneComponent,
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+        children: [{
+          path: ':commentId/versions',
+          icon: 'history',
+          component: CommentEditsComponent,
+          policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+        },
+        {
+          path: ':commentId/votes',
+          component: CommentLikesComponent,
+          policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+        }
+        ]
+      }, {
+        path: 'trace',
+        icon: 'timeline',
+        component: TracePaneComponent,
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable
+      }, {
+        path: 'version/:version',
+        icon: 'history',
+        component: VersionPaneComponent,
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable | OpenPolicy.Dismissable
+      }]
+  }, {
+    path: 'd/:id',
+    component: DocumentInfoPaneComponent,
+    policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+    resolve: {
+      item: DocumentResolver
+    },
+    children: [{
+      path: 'comments',
+      icon: 'format_quote',
+      component: CommentsPaneComponent,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable
+    }, {
+      path: 'trace',
+      icon: 'timeline',
+      component: TracePaneComponent,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable
+    }, {
+      path: 'version/:version',
+      component: VersionPaneComponent,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable
+    }]
+  }]
+}, {
+  path: 'schedule',
+  component: SchedulerPaneComponent,
+  policy: OpenPolicy.Clear
+}, {
+  path: 'cube',
+  children: [{
+    path: ':cube/v/:view',
+    icon: 'bar_chart',
+    component: CubeViewPaneComponent,
+    policy: OpenPolicy.Clear
+  }, {
+    path: ':cube/explore',
+    icon: 'summarize',
+    component: CubeExplorePaneComponent,
+    policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+    children: [{
+      path: 'i/:template/:key',
+      component: ExploreItemPaneComponent,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+      resolve: { item: ItemResolver }
+    }]
+  },
+  {
+    path: ':cube/i/:xAxis/:series',
+    icon: 'bar_chart',
+    component: CubeMatrixPaneComponent,
+    policy: OpenPolicy.Tab | OpenPolicy.Expandable
+  }]
+}, {
+  path: 'reports',
+  children: [{
+    path: ':id',
+    component: ReportPaneComponent,
+    policy: OpenPolicy.Clear
+  }],
+}, {
+  path: 'admin',
+  children: [{
+    path: 'forms/:id',
+    component: WorkflowComponent,
+    resolve: {
+      form: FormResolve
+    },
+    children: [{
+      path: 'node',
+      component: WorkflowNodeComponent,
+      icon: 'account_tree',
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable
+    }],
+    canDismiss: AdminDismiss,
+    policy: OpenPolicy.Clear
+  },
+  {
+    path: 'utilities/:id',
+    component: UtilityPaneComponent,
+    policy: OpenPolicy.Clear
+  }]
+}, {
+  component: NotificationsPaneComponent,
+  path: 'notifications',
+  policy: OpenPolicy.Clear
+},
+{
+  path: 'contacts',
+  component: ContactsPaneComponent,
+  policy: OpenPolicy.Clear,
+  children: [
+    {
+      path: 'c/:id',
+      icon: 'person',
+      policy: OpenPolicy.Pane,
+      component: ConversationPaneComponent
+    }]
+}, {
+  path: 'chatroom/:id',
+  icon: 'person',
+  component: ConversationPaneComponent,
+  policy: OpenPolicy.Tab | OpenPolicy.Expandable
+}
+];

package/src/lib/routes.mobile.ts

@@ -0,0 +1,70 @@
+import { Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { BrowseComponent } from './browse/browse.mobile.component';
+import { ComposeComponent } from './compose/compose.mobile.component';
+import { CanDeactivateCompose } from './compose/can-deactivate-changes.service';
+import { ReportComponent } from "./reports/report.mobile.component";
+import { CubeMobileViewComponent } from './cube/view.mobile.component';
+import { SchedulerComponent } from './scheduler/scheduler.mobile.component';
+import { DocumentResolveService, RecipientResolveService } from './compose/compose-resolve.service';
+import { NotificationsComponent } from './notifications/notifications.mobile.component';
+import { CubeMatrixMobileComponent } from './cube/matrix/matrix.mobile.component';
+import { DocumentInfoPageComponent } from './compose/document.mobile.component';
+import { DocumentViewMobileComponent } from './views/views.mobile.component';
+import { BrokenPage } from './app.component';
+
+export const ROUTES: Routes = [
+  {
+    path: 'mailbox',
+    children: [
+      {
+        path: 'i/:id/views',
+        resolve: { item: RecipientResolveService },
+        component: DocumentViewMobileComponent
+      },
+      {
+        path: 'i/:id',
+        component: ComposeComponent,
+        resolve: { item: RecipientResolveService },
+        canDeactivate: [CanDeactivateCompose],
+      },
+      {
+        path: 'd/:id', component: DocumentInfoPageComponent,
+        resolve: { item: DocumentResolveService }
+      },
+      {
+        path: 'f/:id', component: BrowseComponent,
+        data: { 
+          compose: true,
+          animation: 'browse'
+        }
+      }
+    ]
+  },
+  {
+    path: 'cube/:id',
+    children: [{
+      path: 'v/:view',
+      component: CubeMobileViewComponent
+    },
+    {
+      path: 'i/:xAxis/:series',
+      component: CubeMatrixMobileComponent,
+    }]
+  }, {
+    path: 'reports/:id', component: ReportComponent
+  },
+  {
+    path: 'dashboard', component: DashboardComponent, data: {
+      compose: true
+    }
+  },
+  {
+    path: 'schedule', component: SchedulerComponent, data: {
+      compose: true
+    }
+  },
+  { component: NotificationsComponent, path: 'notifications' },
+  { component: BrokenPage, path: 'broken' },
+  { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
+];

package/src/lib/scheduler/schedule.component.html

@@ -0,0 +1,36 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button [bizdocTooltip]="'PrevPage'|translate" (click)="prev()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <span class="mat-body">{{ starting | dateRange : ending : calendarOptions  }}</span>
+  <button mat-icon-button [bizdocTooltip]="'NextPage'|translate" (click)="next()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button [bizdocTooltip]="'View'|translate" [matMenuTriggerFor]="view"><mat-icon>view_agenda</mat-icon></button>
+  <mat-menu #view>
+    <button mat-menu-item (click)="changeView('WorkWeek')">{{'WorkWeek'|translate}}</button>
+    <button mat-menu-item (click)="changeView('Month')">{{'Month'|translate}}</button>
+    <button mat-menu-item (click)="changeView('Agenda')">{{'Agenda'|translate}}</button>
+    <button mat-menu-item (click)="changeView('MonthAgenda')">{{'MonthAgenda'|translate}}</button>
+    <!--<button mat-menu-item (click)="changeView('TimelineMonth')">{{'TimelineMonth'|translate}}</button>-->
+    <button mat-menu-item (click)="changeView('Day')">{{'Day'|translate}}</button>
+    <button mat-menu-item (click)="changeView('Year')">{{'Year'|translate}}</button>
+  </mat-menu>
+  <button mat-icon-button (click)="export()" bizdocTooltip="{{'Download' | translate}}"><mat-icon>save_alt</mat-icon></button>
+</mat-toolbar>
+<style scoped> 
+  .e-popup-close {
+    display: none
+  }
+</style>
+<ejs-schedule #schedule [eventSettings]="eventSettings" [currentView]="currentView" [selectedDate]="selectedDate"
+              [readonly]="true" (navigating)="nav($event)" height="100%" [showHeaderBar]="false"
+              (select)="select($event)" fxFlex
+              (eventClick)="eventClick($event)" (dragStart)="drag($event)" [@swape]="page">
+  <e-views>
+    <e-view option="Month"></e-view>
+    <e-view option="Day"></e-view>
+    <e-view option="WorkWeek"></e-view>
+    <e-view option="Agenda"></e-view>
+    <e-view option="MonthAgenda"></e-view>
+    <e-view option="TimelineMonth"></e-view>
+    <e-view option="Year"></e-view>
+  </e-views>
+</ejs-schedule>

package/src/lib/scheduler/schedule.component.scss

@@ -0,0 +1,13 @@
+::ng-deep .e-dlg-container {
+    display: none
+}
+
+::ng-deep .e-popup {
+  display: none
+}
+
+
+:host {
+  display: flex;
+  flex-direction: column;
+}