@acorex/components 6.5.28 → 6.5.30

package/src/lib/calendar/scheduler/scheduler.component.ts

@@ -1,249 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ContentChild,
-  Input,
-  ViewEncapsulation,
-  ElementRef,
-  ViewChild,
-  ComponentRef,
-  Output,
-  EventEmitter,
-  ChangeDetectorRef,
-  NgZone,
-  ViewContainerRef
-} from '@angular/core';
-import { AXSchedulerViewsProperty, AXSchedulerViewProperty } from './scheduler-views.property';
-import { AXToolbarSchedulerViewsComponent } from './toolbars/scheduler-toolbar-views';
-import { AXSchedulerDayTimeViewComponent } from './views/daytime/scheduler-daytime-view.component';
-import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AXSchedulerBaseViewComponent } from './views/scheduler-view.component';
-import { AXSchedulerMonthViewComponent } from './views/month/scheduler-month-view.component';
-import { AXToolbarSchedulerNavigatorComponent } from './toolbars/scheduler-toolbar-navigator';
-import { AXSchedulerAgendaViewComponent } from './views/agenda/scheduler-agenda-view.component';
-import { AXSchedulerTimelineViewComponent } from './views/timeline/scheduler-timeline-view.component';
-import { AXSchedulerEventChangeArgs, AXSchedulerEvent } from './scheduler.class';
-import { AXMenuItem, AXDateTime } from '@acorex/core';
-import { AXToolbarSearchComponent } from '../../toolbar/search/toolbar-search.component';
-import { AXDataSourceComponent } from '../../data-source/datasource.component';
-
-
-
-
-@Component({
-  selector: 'ax-scheduler',
-  templateUrl: './scheduler.component.html',
-  styleUrls: ['./scheduler.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class AXSchedulerComponent {
-  constructor(
-    private elm: ElementRef<HTMLDivElement>,
-    private zone: NgZone,
-    private cdr: ChangeDetectorRef
-  ) { }
-
-  @ViewChild(CdkPortalOutlet, { static: true })
-  private portalOutlet: CdkPortalOutlet
-
-
-  @ViewChild('container', { static: true })
-  private container: ElementRef<HTMLElement>;
-
-  @ContentChild(AXSchedulerViewsProperty, { static: true })
-  private viewManager: AXSchedulerViewsProperty;
-
-  @ContentChild(AXToolbarSchedulerViewsComponent, { static: true })
-  private toolbarView: AXToolbarSchedulerViewsComponent;
-  @ContentChild(AXToolbarSchedulerNavigatorComponent, { static: true })
-  private toolbarNavigator: AXToolbarSchedulerNavigatorComponent;
-
-  @ContentChild(AXToolbarSearchComponent, { static: true })
-  searchInput: AXToolbarSearchComponent;
-
-  @ContentChild(AXDataSourceComponent, { static: true })
-  private dataSource: AXDataSourceComponent;
-
-  view: AXSchedulerBaseViewComponent;
-
-
-  private _currentView: string;
-  @Input()
-  public get currentView(): string {
-    return this._currentView;
-  }
-  public set currentView(v: string) {
-    this.setView(v);
-  }
-
-  private viewItems: AXMenuItem[] = [];
-  private today = new AXDateTime();
-  private navigatorDate = new AXDateTime();
-  searchText: string;
-
-  @Input()
-  events: AXSchedulerEvent[] = [];
-
-  @Output()
-  onEventChanged: EventEmitter<AXSchedulerEventChangeArgs> = new EventEmitter<AXSchedulerEventChangeArgs>();
-
-  setView(name: string) {
-    this._currentView = name;
-    if (this.viewManager.views) {
-      this.viewItems.forEach(c => {
-        c.selected = false;
-      });
-      this.viewItems.find(c => c.name == name).selected = true;
-      const selected = this.viewManager.views.find(c => c.name == name);
-      this.createView(selected);
-    }
-  }
-
-
-  private createView(selected: AXSchedulerViewProperty) {
-    this.startAnim();
-    if (this.view) {
-      this.view.ngOnDestroy();
-    }
-    let portal: ComponentPortal<AXSchedulerBaseViewComponent>;
-    this.portalOutlet.detach();
-    let interval = selected.interval;
-    if (selected.type === 'day') {
-      portal = new ComponentPortal<AXSchedulerBaseViewComponent>(AXSchedulerDayTimeViewComponent);
-    }
-    if (selected.type === 'week') {
-      portal = new ComponentPortal<AXSchedulerBaseViewComponent>(AXSchedulerDayTimeViewComponent);
-      interval = selected.interval * 7;
-    }
-    if (selected.type === 'month') {
-      portal = new ComponentPortal<AXSchedulerBaseViewComponent>(AXSchedulerMonthViewComponent);
-    }
-    if (selected.type === 'agenda') {
-      portal = new ComponentPortal<AXSchedulerBaseViewComponent>(AXSchedulerAgendaViewComponent);
-    }
-    if (selected.type === 'timeline') {
-      portal = new ComponentPortal<AXSchedulerBaseViewComponent>(AXSchedulerTimelineViewComponent);
-    }
-    const compRef: ComponentRef<AXSchedulerBaseViewComponent> = this.portalOutlet.attach(portal);
-    this.view = compRef.instance;
-    this.view.type = selected.type;
-    this.view.interval = interval;
-    //
-    this.view.onEventChanged.subscribe(e => {
-      this.onEventChanged.emit(e);
-    });
-    this.view.onNavigatorDateChanged.subscribe((e) => {
-      this.navigatorDate = e;
-      this.setNavigatorText();
-      this.startAnim();
-    });
-    this.refresh();
-  }
-
-  private setNavigatorText() {
-    if (this.toolbarNavigator) {
-      this.toolbarNavigator.set(this.view.dateRange, this.view.type);
-    }
-  }
-
-  private startAnim() {
-    this.container.nativeElement.classList.remove('ax-anim-fade-in-fwd');
-    this.container.nativeElement.style.opacity = '0';
-    setTimeout(() => {
-      this.container.nativeElement.classList.add('ax-anim-fade-in-fwd');
-    }, 250);
-  }
-
-  ngAfterViewInit(): void {
-    setTimeout(_ => {
-      this.viewManager.views.forEach(v => {
-        this.viewItems.push({
-          groupName: 'view',
-          name: v.name,
-          text: v.caption
-        });
-      });
-      //
-      this.dataSource.onDataReceived.subscribe((e:any) => {
-        this.events = e;
-        this.view.events = this.events;
-        if (this.searchText && this.view.events && this.view.events.length) {
-          this.navigatorDate = this.view.events[0].range.startTime;
-        }
-        if (this.navigatorDate) {
-          this.view.navigate(this.navigatorDate);
-        }
-        else {
-          this.view.navigate(this.today);
-        }
-      });
-      //
-      if (this.toolbarView) {
-        this.toolbarView.onViewChanged.subscribe((c: any) => {
-          this.currentView = c;
-        });
-        this.toolbarView.items = this.viewItems;
-      }
-      //
-      if (this.toolbarNavigator) {
-        this.toolbarNavigator.onNavigate.subscribe((c: any) => {
-          if (c === 'next') {
-            this.view.next();
-          }
-          else if (c === 'prev') {
-            this.view.prev();
-          }
-          else {
-            this.view.navigate(c);
-          }
-        });
-      }
-      if (this.searchInput) {
-        this.searchInput.onValueChanged.subscribe((c: any) => {
-          this.searchText = c;
-          if (c) {
-            this.viewItems.forEach(c => { c.visible = false; });
-            const x: AXSchedulerViewProperty = new AXSchedulerViewProperty('agenda', 'Search', 'VIEW_SEARCH');
-            x.interval = 100;
-            this.createView(x);
-            this.refresh();
-          }
-          else {
-            this.viewItems.forEach(c => { c.visible = true; });
-            this.setView(this._currentView);
-          }
-          this.toolbarView.update();
-        });
-      }
-      //
-      this.setView(this.currentView);
-      this.refresh();
-    });
-  }
-
-  ngAfterViewChecked(): void {
-    this.updateSize();
-  }
-
-  private updateSize() {
-    this.zone.runOutsideAngular(() => {
-      const toolbar = this.elm.nativeElement.querySelector<HTMLElement>(
-        '.ax-scheduler-toolbar'
-      );
-      if (toolbar) {
-        this.container.nativeElement.style.height = `calc(100% - ${toolbar.clientHeight}px)`;
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.portalOutlet.detach();
-  }
-
-  refresh() {
-    this.dataSource.fetch({
-      searchText: this.searchText,
-    });
-  }
-
-}

package/src/lib/calendar/scheduler/scheduler.module.ts

@@ -1,45 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXSchedulerComponent } from './scheduler.component';
-import { AXSchedulerViewsProperty, AXSchedulerViewProperty } from './scheduler-views.property';
-import { AXSchedulerDayTimeViewComponent } from './views/daytime/scheduler-daytime-view.component';
-import { AXToolbarSchedulerViewsComponent } from './toolbars/scheduler-toolbar-views';
-import { AXCoreModule } from '@acorex/core';
-import { AXSchedulerMonthViewComponent } from './views/month/scheduler-month-view.component';
-import { PortalModule } from '@angular/cdk/portal';
-import { AXToolbarSchedulerNavigatorComponent } from './toolbars/scheduler-toolbar-navigator';
-import { AXSchedulerAgendaViewComponent } from './views/agenda/scheduler-agenda-view.component';
-import { AXSchedulerTimelineViewComponent } from './views/timeline/scheduler-timeline-view.component';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { AXCalendarBoxModule } from '../calendar-box/calendar-box.module';
-
-import { CommonModule } from '@angular/common';
-import { AXToolbarModule } from '../../toolbar/toolbar.module';
-import { AXPopoverModule } from '../../popover/popover.module';
-
-@NgModule({
-    declarations: [
-        AXSchedulerComponent,
-        AXSchedulerViewsProperty,
-        AXSchedulerViewProperty,
-        AXSchedulerDayTimeViewComponent,
-        AXSchedulerMonthViewComponent,
-        AXSchedulerAgendaViewComponent,
-        AXSchedulerTimelineViewComponent,
-        AXToolbarSchedulerViewsComponent,
-        AXToolbarSchedulerNavigatorComponent
-    ],
-    imports: [CommonModule, AXCoreModule, AXCalendarBoxModule, AXToolbarModule, AXPopoverModule, PortalModule, DragDropModule],
-    exports: [
-        AXSchedulerComponent,
-        AXSchedulerViewsProperty,
-        AXSchedulerViewProperty,
-        AXSchedulerDayTimeViewComponent,
-        AXSchedulerMonthViewComponent,
-        AXSchedulerAgendaViewComponent,
-        AXSchedulerTimelineViewComponent,
-        AXToolbarSchedulerViewsComponent,
-        AXToolbarSchedulerNavigatorComponent
-    ],
-    providers: []
-})
-export class AXSchedulerModule { }

package/src/lib/calendar/scheduler/toolbars/scheduler-toolbar-navigator.ts

@@ -1,133 +0,0 @@
-
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild } from '@angular/core';
-
-import { AXSchedulerViewType } from '../scheduler.class';
-import { AXCalendarBoxComponent } from '../../calendar-box/calendar-box.component';
-
-import { AXMenuItem, AXDateTime, AXDateTimeRange } from '@acorex/core';
-import { AXToolbarItem } from '../../../toolbar/toolbar-item';
-import { AXToolbarMenuComponent } from '../../../toolbar/menu/toolbar-menu.component';
-import { AXPopoverComponent } from '../../../popover/popover.component';
-import { AXValueEvent } from '../../../base/events.class';
-
-
-@Component({
-    selector: 'ax-toolbar-scheduler-navigator',
-    template: `
-    <div id="nav">
-    <ax-toolbar-menu [items]="items"  (onItemClick)="onItemClick($event)"></ax-toolbar-menu>
-    <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
-        <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
-    </ax-popover>
-</div>`,
-    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerNavigatorComponent }],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXToolbarSchedulerNavigatorComponent {
-    constructor(private cdr: ChangeDetectorRef) { }
-
-    @ViewChild(AXToolbarMenuComponent, { static: true })
-    toolbar: AXToolbarMenuComponent;
-
-    @ViewChild('pop', { static: true })
-    pop: AXPopoverComponent;
-
-    @ViewChild('cal', { static: true })
-    cal: AXCalendarBoxComponent;
-
-    viewDepth: string = 'day';
-
-
-    items: AXMenuItem[] = [];
-
-    ngAfterViewInit(): void {
-        this.items = [
-            {
-                name: 'prev',
-                startIcon: 'fas fa-angle-left',
-                tooltip: 'Prev'
-            },
-            {
-                name: 'today',
-                text: 'Today',
-                tooltip: 'Today'
-            },
-            {
-                name: 'next',
-                startIcon: 'fas fa-angle-right',
-                tooltip: 'Next'
-            },
-            {
-                name: 'current',
-
-            }];
-    }
-
-
-    @Output()
-    onNavigate: EventEmitter<'next' | 'back' | AXDateTime> = new EventEmitter<'next' | 'back' | AXDateTime>();
-
-    onItemClick(e: AXMenuItem) {
-        if (e.name === 'current') {
-            this.pop.toggle();
-        }
-        else if (e.name === 'today') {
-            this.goto(new AXDateTime());
-        }
-        else {
-            this.onNavigate.emit(e.name as any);
-            this.pop.close();
-        }
-    }
-
-
-    onDateChange(e: AXValueEvent<AXDateTime>) {
-        this.goto(e.value);
-    }
-
-    goto(date: AXDateTime) {
-        this.onNavigate.emit(date);
-        this.pop.close();
-    }
-
-
-    set(range: AXDateTimeRange, type: AXSchedulerViewType) {
-        if (range) {
-            let text: string = '';
-            const calDate: AXDateTime = range.startTime;
-            const sameDay = range.startTime.compaireNew(range.endTime, 'YMD') === 0;
-            const sameMonth = range.startTime.compaireNew(range.endTime, 'YM') === 0;
-            const sameYear = range.startTime.compaireNew(range.endTime, 'Y') === 0;
-            if (type !== 'month' && sameDay) {
-                text = range.startTime.format('MMMM DD, YYYY');
-            }
-            //
-            else if (type !== 'month' && sameMonth && sameYear) {
-                text = `${range.startTime.format('MMMM DD')} - ${range.endTime.format('DD, YYYY')}`;
-            }
-            else if (type !== 'month' && sameYear) {
-                text = `${range.startTime.format('MMM DD')} - ${range.endTime.format('MMM DD, YYYY')}`;
-            }
-            else if (type !== 'month') {
-                text = `${range.startTime.format('MMM DD, YYYY')} - ${range.endTime.format('MMM DD, YYYY')}`;
-            }
-            else if (type === 'month') {
-                text = range.startTime.add('day', 15).format('MMMM YYYY');
-            }
-            this.items[3].text = text;
-            if (type === 'month') {
-                this.viewDepth = 'month';
-            }
-            else {
-                this.viewDepth = 'day';
-            }
-            //
-            this.cal.focusedValue = calDate;
-            this.cal.navigate(calDate);
-            this.pop.close();
-            //
-            this.toolbar.update();
-        }
-    }
-
-}

package/src/lib/calendar/scheduler/toolbars/scheduler-toolbar-views.ts

@@ -1,33 +0,0 @@
-import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
-import { AXMenuItem } from '@acorex/core';
-import { AXToolbarItem } from '../../../toolbar/toolbar-item';
-import { AXToolbarMenuComponent } from '../../../toolbar/menu/toolbar-menu.component';
-
-
-
-
-@Component({
-    selector: 'ax-toolbar-scheduler-view',
-    template: `
-        <ax-toolbar-menu [items]="items" selection="single" (onItemClick)="onItemClick($event)"></ax-toolbar-menu>
-    `,
-    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerViewsComponent }]
-})
-export class AXToolbarSchedulerViewsComponent {
-    constructor() { }
-
-    @ViewChild(AXToolbarMenuComponent, { static: true }) menu: AXToolbarMenuComponent;
-    items: AXMenuItem[] = [];
-
-    update(): void {
-        this.menu.update();
-    }
-
-    @Output()
-    onViewChanged: EventEmitter<string> = new EventEmitter<string>();
-
-    onItemClick(e: AXMenuItem) {
-        this.onViewChanged.emit(e.name);
-    }
-
-}

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.html

@@ -1,43 +0,0 @@
-<div class="view ax-scheduler-agenda-view">
-    <table class="body" cdkDropListGroup>
-        <tbody *ngIf="slots.length; else elseTemplate">
-            <tr *ngFor="let slot of slots" cdkDropList [cdkDropListData]="slot" [attr.data-uid]="slot.uid"
-                (cdkDropListDropped)="onDragDropOnDay($event)">
-                <td class="day-column">
-                    <div class="day-num">{{slot.range.startTime | dt:"DD"}}</div>
-                    <div class="day-name">{{slot.range.startTime | dt:"ddd"}}</div>
-                </td>
-                <td class="day-border">
-                    <ul *ngIf="slot.events.length">
-                        <li *ngFor="let e of slot.events" [style.border-color]="e.color" cdkDrag [cdkDragData]="e"
-                            [attr.data-uid]="e.uid">
-                            <div class="event-title">{{e.title}}</div>
-                            <div class="event-time">{{e.range.startTime | dt:"HH:mm"}} - <span
-                                    *ngIf="e.range.duration('days')!=0 then a else b"></span></div>
-                            <ng-template #a>
-                                {{e.range.endTime | dt:"HH:mm"}}
-                            </ng-template>
-                            <ng-template #b>
-                                {{e.range.endTime | dt:"YYYY-MM-DD HH:mm"}}
-                            </ng-template>
-
-                            <div *cdkDragPreview [style.background-color]="e.color" class="event-drag-preview">
-                                {{e.title}}
-                            </div>
-                        </li>
-                    </ul>
-                    <div *ngIf="!slot.events.length" class="event-empty">No events</div>
-                </td>
-            </tr>
-        </tbody>
-        <ng-template #elseTemplate>
-            <tbody>
-                <tr>
-                    <td colspan="2">
-                        <div class="event-empty">No events</div>
-                    </td>
-                </tr>
-            </tbody>
-        </ng-template>
-    </table>
-</div>

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.scss

@@ -1,66 +0,0 @@
-.ax-scheduler-agenda-view {
-  height: 100%;
-  overflow-y: auto;
-
-  table {
-    border-top: 1px solid var(--border-color);
-  }
-
-  .event-title {
-    color: var(--gray-fore-color);
-  }
-
-  td {
-    padding-top: 5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: top;
-    border: none;
-
-    &.day-border {
-      border-bottom: 1px solid var(--border-color);
-      padding: 5px;
-      vertical-align: middle;
-    }
-  }
-
-  .day-column {
-    width: 80px;
-    text-align: center;
-
-    .day-num {
-      font-weight: 600;
-    }
-
-    .day-name {
-      font-size: smaller;
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding: 0px;
-    margin: 0px;
-
-    li {
-      border-left: 4px solid var(--primary-color);
-      margin-bottom: var(--sp-sm-size);
-      padding: 0px 8px;
-
-      &:hover {
-        background-color: var(--primary-lighter-color);
-        cursor: pointer;
-      }
-
-      .event-time {
-        color: var(--gray-fore-color);
-        font-size: smaller;
-      }
-
-      .event-empty {
-        color: var(--gray-fore-color);
-        font-size: smaller;
-      }
-    }
-  }
-}

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.ts

@@ -1,50 +0,0 @@
-import { Component, ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
-import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
-import { AXSchedulerSlot } from '../../scheduler.class';
-import { AXDateTime, AXDateTimeRange } from '@acorex/core';
-
-@Component({
-    templateUrl: './scheduler-agenda-view.component.html',
-    styleUrls: ['./scheduler-agenda-view.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }]
-})
-export class AXSchedulerAgendaViewComponent extends AXSchedulerBaseViewComponent {
-    constructor(
-        private elm: ElementRef<HTMLDivElement>,
-        private cdr: ChangeDetectorRef
-    ) {
-        super();
-    }
-
-    hideEmptyDays: boolean = true;
-
-    updateSize() {
-    }
-
-
-    navigate(date: AXDateTime = new AXDateTime()) {
-        this.slots = [];
-        for (let i = 0; i < this.interval; i++) {
-            let d = date.addDay(i);
-            const range = new AXDateTimeRange(d, d);
-            const slot: AXSchedulerSlot = {
-                range,
-                events: this.getEvents(range, 'day')
-            }
-            if (this.hideEmptyDays && slot.events.length === 0) {
-                continue;
-            }
-            this.slots.push(slot);
-        }
-        this.navigatorDate = date;
-        this.cdr.detectChanges();
-    }
-
-    next(): void {
-        this.navigate(this.navigatorDate.addDay(this.interval));
-    }
-    prev(): void {
-        this.navigate(this.navigatorDate.addDay(-this.interval));
-    }
-}

package/src/lib/calendar/scheduler/views/daytime/scheduler-daytime-view.component.html

@@ -1,45 +0,0 @@
-<div class="view ax-scheduler-day-time-view">
-    <table class="header">
-        <thead>
-            <th class="time-column"></th>
-            <th *ngFor="let d of slots" class="header-cell">
-                <div [class.same-week-day]="d.range.startTime.equal(today)">
-                    {{d.range.startTime | dt: 'ddd'}}<br>
-                    {{d.range.startTime | dt: 'DD'}}
-                </div>
-            </th>
-        </thead>
-    </table>
-    <div class="v-scroll">
-        <table class="body" cdkDropListGroup>
-            <tbody>
-                <tr *ngFor="let t of times">
-                    <td>
-                        {{t.display}}
-                    </td>
-                    <td *ngFor="let d of slots" class="slot-cell" cdkDropList [cdkDropListData]="d"
-                    (cdkDropListDropped)="onDragDropOnDay($event,t.value)" [attr.data-uid]="d.uid">
-                        <div class="event-wrapper">
-                            <ng-container *ngFor="let e of d.events">
-                                <div *ngIf="e.range.startTime.hour==t.value" class="event"
-                                    role="button" aria-readonly="false" aria-selected="true" aria-grabbed="false"
-                                    cdkDrag [cdkDragData]="e" 
-                                    [attr.data-uid]="e.uid" [style.background-color]="e.color" [title]="e.title">
-                                    <div class="event-title">{{e.title}}</div>
-                                    <div>
-                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -
-                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>
-                                    </div>
-                                    <div *cdkDragPreview [style.background-color]="e.color" class="event-drag-preview">
-                                        {{e.title}}
-                                    </div>
-                                    <div class="event-drag-placeholder" *cdkDragPlaceholder></div>
-                                </div>
-                            </ng-container>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</div>

package/src/lib/calendar/scheduler/views/daytime/scheduler-daytime-view.component.scss

@@ -1,19 +0,0 @@
-.ax-scheduler-day-time-view {
-    .event-wrapper {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        display: inline-flex;
-        flex: auto;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        width: 100%;
-
-        .event {
-            display: block;
-            position: relative;
-            flex: 1;
-        }
-    }
-}