【Angular】fullcalendarでGoogleカレンダーライクな画面を実装する

Angularでgoogleカレンダーを実装する

Angularで無料でGoogleカレンダーライクな画面を実装するライブラリはざっとググった結果有名なのは以下の2つかなと思います

  • Fullcalendar
  • Angular-calendar

スケジューラーが無料で使えるAngular-calendar、スケジューラーが有料であるものの利用者が多く困った時に情報の多いfullcalendarと一長一短ではありますが、今回はとりあえず有名なfullcalendarの方で実装していきたいと思います。

作業環境

  • OS:Windows10
  • Angular:8.23

fullcalendarのインストール

まずはNodejsのnpmコマンドでfullcalendarをインストールします。

# fullcalendarのインストール
$ npm install --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

# サンプル用のコンポーネントを追加
$ ng generate component fullcalendar-sample

ライブラリをインストールしたら次はモジュール設定を行います。

<app.module.ts>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
~~~~
~~~~
import { FullCalendarModule } from '@fullcalendar/angular'; // これを追加!
import { FullcalendarSampleComponent } from './fullcalendar-sample/fullcalendar-sample.component';// これを追加!
@NgModule({
  declarations: [
    AppComponent,
    ~~~~
    ~~~~
    FullcalendarSampleComponent //これを追加
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ~~~~
    ~~~~
    FullCalendarModule // これを追加!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

モジュール設定ができたら、一応サンプル用のpathも追加しておきます

<app-routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
~~~~
import { FullcalendarSampleComponent } from "./fullcalendar-sample/fullcalendar-sample.component"; // これを追加!

const routes: Routes = [
  ~~~~
  { path: "fullcalendar-sample", component: FullcalendarSampleComponent },//これを追加!
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

ルート設定ができたらコンポーネントに中身を記述していきます。

<calendar.component.ts>

import { Component, OnInit } from "@angular/core";
import dayGridPlugin from "@fullcalendar/daygrid";

@Component({
  selector: "app-fullcalendar-sample",
  templateUrl: "./fullcalendar-sample.component.html",
  styleUrls: ["./fullcalendar-sample.component.css"],
})
export class FullcalendarSampleComponent implements OnInit {
  
  calendarPlugins = [dayGridPlugin]; //これを追加!

  constructor() {}

  ngOnInit() {}
}

<calendar.component.html>

<full-calendar defaultView="dayGridMonth" [plugins]="calendarPlugins"></full-calendar>

<style.scss>

~~~~
~~~~
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

これは.scssでしか有効にならないので、プロジェクト作成時にstyle設定をcssにしてしまった人は、プロジェクト直下にあるstyles.cssをstyles.scssに変更して、同じく直下にあるangular.jsonのstylesのところをstyles.cssからstyles.scssに書き換えれば大丈夫です。

これで「http://localhost:4200/fullcalendar-sample」にアクセスすると以下のような画面が表示されます。

これがAngular用のfullcalendarドキュメントに書いてあるチュートリアルですが、ぶっちゃけこれだけだと予定の参照とか登録がとかこのライブラリにたどり着いたであろう人がやりたいことができないので、ここから設定を追加していく必要があります。そのあたりについては次の記事から解説したいと思います。では~

次の記事→【Angular】fullcalendarのカレンダー表示を日本語化してみる

参照:https://fullcalendar.io/docs/angular

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする