● Angular Fullcalendar を使用する
● パッケージのインストール
npm install --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
styles.scss
// add this
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
app/app.module.ts
// add
import { FullCalendarModule } from '@fullcalendar/angular';
......
imports: [
BrowserModule,
FullCalendarModule // add
],
app/app.component.ts
// calendar
import { FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGrigPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction'; // for dateClick
export class AppComponent {
@ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template
calendarVisible = true;
calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
calendarWeekends = true;
calendarEvents: EventInput[] = [
{ title: 'Event Now', start: new Date() }
];
toggleVisible() {
this.calendarVisible = !this.calendarVisible;
}
toggleWeekends() {
this.calendarWeekends = !this.calendarWeekends;
}
gotoPast() {
let calendarApi = this.calendarComponent.getApi();
calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
}
handleDateClick(arg) {
if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
this.calendarEvents = this.calendarEvents.concat({ // add new event data. must create new array
title: 'New Event',
start: arg.date,
allDay: arg.allDay
})
}
}
}