npm 安裝-g @angular/cli

ng 新的角度日歷演示cd 角度日歷演示

npm 安裝 angular-calendar date-fns

@import "../node_modules/angular-calendar/css/angular-calendar.css";

從'@angular/core'導(dǎo)入{NgModule}；從'@angular/platform-browser'導(dǎo)入{BrowserModule}；從'./app-routing.module'導(dǎo)入{AppRoutingModule}；從 './app.component' 導(dǎo)入 { AppComponent }；從 'angular-calendar' 導(dǎo)入 { CalendarModule, DateAdapter };從 'angular-calendar/date-adapters/date-fns' 導(dǎo)入 { adapterFactory }；從'./view/drag-comp/drag-comp.component'導(dǎo)入{DragCompComponent}；@NgModule({
  聲明：[AppComponent, DragCompComponent],
  進(jìn)口：[
    瀏覽器模塊，
    應(yīng)用路由模塊，
    CalendarModule.forRoot({
      提供：日期適配器，
      使用工廠：適配器工廠，
    }),
  ],
  供應(yīng)商：[]，
  引導(dǎo)程序：[AppComponent]，})導(dǎo)出類 AppModule {}

ng 生成組件 drag-comp

從'@angular/core'導(dǎo)入{ChangeDetectorRef}；進(jìn)口 {
  變更檢測(cè)策略，
  成分，
  啟動(dòng)時(shí)，
  查看封裝，} 來(lái)自“@angular/core”；從 'angular-calendar' 導(dǎo)入 { CalendarEvent, CalendarEventTitleFormatter };從'calendar-utils'導(dǎo)入{WeekViewHourSegment};從'date-fns'導(dǎo)入{addDays，addMinutes，endOfWeek};從'rxjs'導(dǎo)入{fromEvent}；從 'rxjs/operators' 導(dǎo)入 { finalize, takeUntil };函數(shù) floorToNearest（數(shù)量：數(shù)字，精度：數(shù)字）{
  返回 Math.floor（數(shù)量/精度）*精度；}函數(shù) ceilToNearest（數(shù)量：數(shù)字，精度：數(shù)字）{
  返回 Math.ceil（數(shù)量/精度）*精度；}@成分（{
  選擇器：'app-drag-comp'，
  templateUrl: './drag-comp.component.html',
  styleUrls: ['./drag-comp.component.scss'],
  changeDetection：ChangeDetectionStrategy.OnPush，
  供應(yīng)商：[
    {
      提供：CalendarEventTitleFormatter，
    },
  ],
  封裝：ViewEncapsulation.None，})導(dǎo)出類 DragCompComponent 實(shí)現(xiàn) OnInit {
  viewDate = new Date();
  weekStartsOn: 0 = 0;
  dragToCreateActive = false;
  事件：CalendarEvent[] = []；
  天數(shù)：任何[] = []；
  插槽：任何[] = []；
  構(gòu)造函數(shù)（私有 cdr：ChangeDetectorRef）{}
  ngOnInit(): void {
    這個(gè).initDays();
  }
  初始化天數(shù)（）{
    這天 = [
      '星期日'，
      '周一'，
      '周二'，
      '周三'，
      '周四'，
      '星期五'，
      '周六'，
    ];
    for (let i = 0; i < this.days.length; i++) {
      讓 a = { day: this.days[i], time: [] };
      this.slots.push(a);
    }
  }
  startDragToCreate(
    段：WeekViewHourSegment，
    mouseDownEvent: 鼠標(biāo)事件,
    段元素：HTMLElement
  ) {
    const dragToSelectEvent: 日歷事件 = {
      編號(hào)：this.events.length，
      title: '新插槽',
      開始：段.日期，
      元：{
        tmpEvent：真，
      },
      行動(dòng)：[
        {
          標(biāo)簽： '',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.events = this.events.filter((iEvent) => iEvent !== event);
            this.removeSlot(event.id);
          },
        },
      ],
    };
    this.events = [...this.events, dragToSelectEvent];
    const segmentPosition = segmentElement.getBoundingClientRect();
    this.dragToCreateActive = true;
    const endOfView = endOfWeek(this.viewDate, {
      weekStartsOn：this.weekStartsOn，
    });
    fromEvent（文檔，'mousemove'）
      。管道（
        完成（（）=> {
          刪除 dragToSelectEvent.meta.tmpEvent；
          this.dragToCreateActive = false;
          這個(gè)。刷新（）；
        }),
        takeUntil（fromEvent（文檔，'mouseup'））
      )
      .subscribe((mouseMoveEvent: MouseEvent) => {
        常量 minutesDiff = ceilToNearest(
          mouseMoveEvent.clientY - segmentPosition.top,
          30
        );
        const daysDiff =
          floorToNearest(
            mouseMoveEvent.clientX - segmentPosition.left,
            段位置.寬度
          ) / segmentPosition.width;
        const newEnd = addDays(addMinutes(segment.date, minutesDiff), daysDiff);
        如果（newEnd > segment.date && newEnd < endOfView）{
          dragToSelectEvent.end = newEnd;
        }
        這個(gè)。刷新（）；
      });
  }
  私人刷新（）{
    this.events = [...this.events];
    this.cdr.detectChanges();
    this.getSlots();
  }
  轉(zhuǎn)換時(shí)間（t）{
    返回新日期（t）.toTimeString（）；
  }
  轉(zhuǎn)換日（d）{
    返回新日期（d）.toLocaleString（'en-us'，{
      工作日：“長(zhǎng)”，
    });
  }
  getSlots() {
    this.slots.map((day, i) => {
      this.slots[i].time = [];
      this.events.forEach((e) => {
        如果（day.day == this.convertDay（e.start））{
          this.slots[i].time.push({
            開始時(shí)間：e.start，
            結(jié)束時(shí)間：e.end，
            id: e.id,
          });
        }
      });
    });
  }
  removeSlot(id) {
    for (let j = 0; j < this.slots.length; j++) {
      this.slots[j].time = this.slots[j].time.filter((t) => t.id !== id);
    }
  }}

<div 類="容器">
  <ng-模板#weekViewHourSegmentTemplate
     讓段=“段”發(fā)泄
     讓語(yǔ)言環(huán)境=“語(yǔ)言環(huán)境”
     let-segmentHeight="segmentHeight"
     let-isTimeLabel="isTimeLabel"
   >
    <div #segmentElement
       class="cal-hour-segment"
       [style.height.px]="segmentHeight"   
       [class.cal-hour-start]="segment.isStart"
       [class.cal-after-hour-start]="!segment.isStart"
       [ngClass]="segment.cssClass"
       (mousedown)="startDragToCreate(segment, $event, segmentElement)">
        <div class="cal-time" *ngIf="isTimeLabel">
            {{ 分段日期 | calendarDate:'weekViewHour':locale }}
        </div>
    </div></ng-模板></div><mwl-日歷周視圖
    [viewDate]="viewDate" [events]="事件"
    [hourSegmentTemplate]="weekViewHourSegmentTemplate"
    [weekStartsOn]="weekStartsOn"></mwl-日歷周視圖><小時(shí)><div>選定的廣告位</div><pre>{{ 插槽 | JSON }}</pre>

服務(wù)