はじめに
耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。
完成図
作成
こちらの記事を参考にさせていただきました。ありがとうございます。
【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる
１．vueプロジェクトの作成
コマンドプロンプトから以下のコマンドを実行し、雛形プロジェクトを作成します。
> vue create sample-app
質問に答えていきます。今回は以下のように設定しました。
Please pick a preset: ⇒ "Manually select features"
Check the features needed for your project:
(＊) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(＊) Router
(＊) Vuex
( ) CSS Pre-processors
(＊) Linter / Formatter
(＊) Unit Testing
(＊) E2E Testing
(＊) CSS Pre-processors
User history mode for router? ⇒ "n"
Pick a liner / formatter config: ⇒ "ESLint + Prettier"
Pick additional lint features: ⇒ "Lint on save"
Pick a unit testing solution: ⇒ "Jest"
Pick a E2E testing solution: ⇒ "Cypress (Chrome only)"
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ⇒ "In package.json"
Save this as a preset for future projects? ⇒ "y"
Save preset as: ⇒ "sample-app"
Pick the package manager to use when installing dependencies: ⇒ "Use Yarn"
プロジェクトをVSCodeから開いて確認してみると以下の画像のようにプロジェクトのディレクトリ階層が構築されていることを確認できます。
以下のコマンドを実行して起動を行います。
> yarn serve
http://localhost:8080/
にアクセスし、「Welcome to Your Vue.js App」のページが表示されれば成功です。
2.FullCalendarのインストール
以下のコマンドを実行し、ライブラリをインストールします。
> npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
3.Calendar.vueの作成
src\components配下にCalendar.vueを作成しました。
<stylelang='scss'>@import'~@fullcalendar/core/main.css';@import'~@fullcalendar/daygrid/main.css';</style><template><FullCalendardefaultView="dayGridMonth":plugins="calendarPlugins"/></template><script>importFullCalendarfrom'@fullcalendar/vue'importdayGridPluginfrom'@fullcalendar/daygrid'exportdefault{components:{FullCalendar// make the <FullCalendar>tagavailable},data(){return{calendarPlugins:[dayGridPlugin]}}};</script>4.src\index.jsにCalendar.vueへのリクエストパスを記述
importVuefrom"vue";importVueRouterfrom"vue-router";importHomefrom"../views/Home.vue";Vue.use(VueRouter);constroutes=[{path:"/",name:"home",component:Home},{path:"/about",name:"about",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component:()=>import(/* webpackChunkName: "about" */"../views/About.vue")},///////ここに追記///////{path:"/calendar",name:"calendar",component:()=>import("../components/Calendar.vue")}///////ここに追記///////];constrouter=newVueRouter({routes});exportdefaultrouter;5.App.vueの表示画面の変更
Calender.vueへのリンクを作成します。
<template><divid="app"><divid="nav"><router-linkto="/">Home</router-link> |
<router-linkto="/about">About</router-link> |
<router-linkto="/calendar">Calendar</router-link></div><router-view/></div></template>6.カレンダーの表示
以下のコマンドを実行します。
> yarn serve
http://localhost:8080/
にアクセスします。
Calendarへのリンクが表示されていればOKです。
Calendarに移動するとカレンダーが表示されています。
7.カレンダーに予定を入れられるようにする
こちらの記事を参考にさせていただきました。ありがとうございました。
高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う
Calendar.vueを以下のように変更しました。
<stylelang="scss">@import"~@fullcalendar/core/main.css";@import"~@fullcalendar/daygrid/main.css";</style><template><FullCalendardefault-view="dayGridMonth":locale="locale":header="calendarHeader":weekends="calendarWeekends":plugins="calendarPlugins":events="calendarEvents"@dateClick="handleDateClick"/></template><script>importFullCalendarfrom"@fullcalendar/vue";importdayGridPluginfrom"@fullcalendar/daygrid";importtimeGridPluginfrom"@fullcalendar/timegrid";importinteractionPluginfrom"@fullcalendar/interaction";importjaLocalefrom"@fullcalendar/core/locales/ja";// 日本語化用exportdefault{components:{FullCalendar// make the <FullCalendar>tagavailable},data(){return{locale:jaLocale,// 日本語化// カレンダーヘッダーのデザインcalendarHeader:{left:"prev,next today",center:"title",right:"dayGridMonth,timeGridWeek,timeGridDay,listWeek"},calendarWeekends:true,// 土日を表示するか// カレンダーで使用するプラグインcalendarPlugins:[dayGridPlugin,timeGridPlugin,interactionPlugin],// カレンダーに表示するスケジュール一覧calendarEvents:[{title:"報告会",start:"2020-03-10T10:00:00",end:"2020-03-10T12:30:00"},{title:"ミーティング",start:"2020-03-12T10:30:00",end:"2020-03-12T12:30:00"},{title:"打ち合わせ",start:"2020-03-18T13:30:00",end:"2020-03-18T14:30:00"}]};},methods:{handleDateClick(arg){if(confirm("新しいスケジュールを"+arg.dateStr+"に追加しますか ?")){this.calendarEvents.push({// add new event datatitle:"新規スケジュール",start:arg.date,allDay:arg.allDay});}}</script>予定を表示することができました。
考察
FullCallendarを利用してカレンダーを表示することができました。このデザインを自分で最初からやっていたらとても大変ですね。
今度はユーザー認証機能を実装したいと思っています。