Question

使用https://mattlewis92.github.io/angular-calendar中的代码来构建日历，并使用代码添加事件，并尝试创建一个左侧导航区域以显示添加到日历的事件。

在获取信息方面遇到了困难。我在下面提供了我正在使用的component.ts文件和component.html文件。

left-nav-component.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div>
    <div>
        <h3>Hello</h3>
        <div>
            <button type="button">My Shifts</button>
            <button type="button">All Shifts</button>
            <button type="button">Open Shifts</button>
        </div>
        <br>
        <div>
        <h4>Open Shifts</h4>
            <p>7-12 Thursday, October 25 </p>
            <p>4-7 Sunday, October 28</p>
            <p>4-7 Tuesday, October 30</p>
            <p>7-12 Wednesday, October 31</p>
        </div>

        <div>
        <h4>All Shifts</h4>
    <table><tr>
    <td>
        <p></p>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
            </tr>

        </table></div>
        <div>
        <h4>My Shifts</h4>

        </div>
    </div>
</div>

</body></html>

left-nav-component.ts

//import { Component, OnInit } from '@angular/core';
import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef,
  Inject
} from '@angular/core';
import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarView
} from 'angular-calendar';
import { CalendarComponent } from 'C:/Users/Sawri/Desktop/Software Interface Design/Project/CS407/myShift/src/app/calendar/calendar.component';


@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./left-menu.component.css']
})
export class LeftMenuComponent{

  constructor() { }

  ngOnInit() {
  }

modalData: {
   // action: string;
    event: CalendarEvent;
  };

  events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
    },
    {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
    },
    {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      allDay: true
    },
    {
      start: addHours(startOfDay(new Date()), 2),
      end: new Date(),
      title: 'A draggable and resizable event',
    }
  ];


}

拉事件添加到日历以显示在新的左列

0 个答案: