日々更新中です!

【Angular】fullcalendar環境構築手順!

  • URLをコピーしました!
悩んでいる男の子

Angularでfullcalendarを使ってみたいんだけど、やり方が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Angularでfullcalendarを使う方法
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、Angularでfullcalendarを使う方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

Angular×fullcalendar環境構築手順

npm install ng-fullcalendar --save

ng-fullcalendar」をインストールします。

npm install fullcalendar@3.6.1 --save

fullcalendar@3.6.1」をインストールします。

// 共通モジュール
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { FullCalendarModule } from 'ng-fullcalendar';

// 共通サービス
import { HttpService, NoopInterceptor } from './service/http/http.service';
import { RouterService } from './service/router/router.service';

// 共通コンポーネント
import { AppComponent } from './app.component';
import { LoginComponent } from './component/login/login.component';
import { TimepickerComponent } from './component/timepicker/timepicker.component';
import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component';
import { IntegerComponent } from './component/integer/integer.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    TimepickerComponent,
    PageNotFoundComponent,
    IntegerComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    BrowserAnimationsModule,
    MatTabsModule,
    MatCheckboxModule,
    FullCalendarModule
  ],
  providers: [
    HttpService,
    { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
    RouterService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts」に「FullCalendarModule」を追加します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularProject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

index.html」にCSSのリンクを追加します。

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~fullcalendar/dist/fullcalendar.css";

index.htmlに記載するのが嫌な場合は、上記のように「style.css」へ記載します。

公式サイトだと、「@import “~/fullcalendar/dist/fullcalendar.css”;」のようにfullcalendarの前に「/」が入っていますが、これだとエラーが出るので注意してください。

npm install --save @types/jquery

jqueryのtypeをインストールします。

これをインストールしないとトランスパイル時に、「ERROR in node_modules/@types/jquery/index.d.ts」エラーが出ます。

ng g c component/fullcalendar

fullcalendarを使う専用のコンポーネントを作成します。

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {

  calendarOptions: Options;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

  constructor() { }

  ngOnInit() {
    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      events: [
        {
          title: 'All Day Event',
          start: '2019-02-01'
        }
      ]
    };
  }

}

fullcalendar.component.ts」を上記のように編集します。

<div *ngIf="calendarOptions">
  <ng-fullcalendar
    #ucCalendar
    [options]="calendarOptions"
    (eventClick)="eventClick($event.detail)"
    (eventDrop)="updateEvent($event.detail)"
    (eventResize)="updateEvent($event.detail)"
    (clickButton)="clickButton($event.detail)"
  >
  </ng-fullcalendar>
</div>

fullcalendar.component.html」を上記のように編集します。

上記のように表示されればOKです。

まとめ

今回は、Angularでfullcalendarを使う方法を解説しました。

fullcalendarの情報が意外と少なくて困りました。。

ではまた!

  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる