1.安裝fullcalendar

npm install --save jquery fullcalendar
npm install --save-dev typescript webpack awesome-typescript-loader source-map-loader
npm install --save-dev @types/jquery

2.元件中引入

import * as $ from "jquery";
import "fullcalendar";

3.引入css

在根目錄styles.css中引入fullcalendar.min.css

@import "node_modules/fullcalendar/dist/fullcalendar.min.css";
 

4.完整程式碼

import { Component, OnInit } from "@angular/core";
import * as $ from "jquery";
import "fullcalendar";

@Component({
  selector: "app-calendar",
  templateUrl: "./calendar.component.html",
  styleUrls: ["./calendar.component.css"]
})
export class CalendarComponent implements OnInit {
  date = new Date();
  d = this.date.getDate();
  m = this.date.getMonth();
  y = this.date.getFullYear();
  task = [
    {
      title: "全天計劃\r\n#####\r\n寫程式碼",
      start: new Date(this.y, this.m, 1)
    },
    {
      title: "張家界四日遊",
      start: new Date(this.y, this.m, this.d - 5),
      end: new Date(this.y, this.m, this.d - 2)
    },
    {
      id: 999,
      title: "電話回訪客戶",
      start: new Date(this.y, this.m, this.d - 6, 16, 0),
      allDay: false
    },
    {
      id: 999,
      title: "電話回訪客戶",
      start: new Date(this.y, this.m, this.d + 4, 16, 0),
      allDay: false
    },
    {
      title: "視訊會議",
      start: new Date(this.y, this.m, this.d, 10, 30),
      allDay: false
    },
    {
      title: "中秋放假",
      start: "2013-09-19",
      end: "2013-09-21"
    },
    {
      title: "午飯",
      start: new Date(this.y, this.m, this.d, 12, 0),
      end: new Date(this.y, this.m, this.d, 14, 0),
      allDay: false
    }
  ];
  constructor() {}

  ngOnInit() {
    this.loadCalendar();
  }

  loadCalendar() {
    const that = this;//注意這裡的this指向（that代表ts的this）
    $("#calendar").fullCalendar({
      locale: "zh-cn",//使用中文
      header: {
        left: "prev,next today",
        center: "title",
        right: "timelineYear,month,agendaWeek,agendaDay"
      },
      buttonText: {//按鈕文字
        prev: "‹",
        next: "›",
        today: "今天",
        month: "月",
        week: "周",
        day: "日"
      },
      allDayText: "全天",
      themeSystem: "bootstrap3",
      droppable: false,
      editable: true,
      eventLimit: true,
      selectable: true,
      selectHelper: true,
      height: 600,
      events: this.task,//任務資料
      dayClick: function(date, allDay, jsEvent, view) {
        console.log(date);
      },
      eventClick: function(event) {
        console.log(event);
      },
    });
  }
}
 

官網：https://fullcalendar.io/

官網示例地址：https://github.com/fullcalendar/typescript-example