こんにちはジョージです。日本の狭小住宅にもジャストフィットしそうなミニカレンダーを紹介します。
![mini-calendar.gif (271.8 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/06/20803/d66129cc-97f3-48c2-bcda-455cbbb59d46.gif)
V-Calendar
Claris FileMaker では標準でカレンダーアドオンが提供されていますが、画面の端にすこしだけ表示しておくにはサイズがアメリカンです。
そして、カレンダー(日付ピッカー等)は、その使い勝手や FileMaker カスタム App との連携などを考えると、我々じぇねんちゅでも自作するのは敬遠したくなる部品のひとつです。
今回は V-Calendar という Vue.js で動作する、素晴らしいカレンダープラグインを見つけたので FileMaker カスタム App で使えるようにしてみましょう。
Vue.js
Vue.js についてはもはや説明の必要はないでしょう。他にも有名なフレームワークとしては Angular、React などがありますが、過去にじぇねんちゅの同志が Angular との連携に成功しています。
そして V-Calendar は Vue.js のプラグインなので、まずは開発環境から準備する必要があります。
VSCode (Remote Containar Plugin) + Docker Desktop
Vue.js の開発環境は VSCode の Docker コンテナで提供されています。VSCode (Remote Containar Plugin) + Docker Desktop がインストールされていれば数クリックで開発環境が完成します。
今回は Node.js バージョン16 で開発環境を準備しました。
![2023030901.001.png (272.0 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/05cfa75b-da9d-4205-ac01-e227e163752d.png)
![2023030901.002.png (206.0 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/cdd8af23-20f0-4698-a388-d49d06d95ba7.png)
![2023030901.003.png (117.5 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/e09dd09b-8ad4-4169-82a7-aae8c51f55c8.png)
![2023030901.004.png (131.3 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/4a7ae9c1-6ada-45ed-b69e-f856eb73240a.png)
![2023030901.005.png (136.7 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/42f7ff9e-cc62-45f8-8191-4960217b2647.png)
![2023030901.006.png (191.4 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/4e96d76f-b36a-48bf-9c50-04bac7e070a5.png)
Vue.js の開発環境が完成しました。
![2023030901.007.png (105.2 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/1baf27a5-b432-4830-8fa6-e2c609131fb4.png)
Vue CLI あらため Vite
VSCode のコンテナから用意した開発環境には Vue CLI が含まれておりコマンドラインから Vue.js のプロジェクトの作成が可能なのですが、最近では Vite でプロジェクトを作成するのが一般的らしいので最先端の流れにのります。
https://ja.vitejs.dev/
![2023030901.009.png (314.7 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/f7b7cf0f-b953-4b79-96b5-9913b01699f6.png)
ターミナルが起動します。
![2023030901.010.png (122.7 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/0530a6be-3d86-4db9-b618-d1310275bf70.png)
新規プロジェクトを作成します。
npm init vite-app v-calendar
![2023030901.011.png (129.9 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/48e086b7-aed5-4bd2-a9a0-5348a542f0b0.png)
![2023030901.012.png (149.0 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/16f043ce-f6c4-4379-8463-a000f996a8e7.png)
新規プロジェクトが作成されました。
![2023030901.013.png (354.6 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/9131cc8e-b113-4df2-9970-13fbf3304e91.png)
プロジェクトフォルダに移動します。
![2023030901.014.png (213.7 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/a64b474f-990f-4ae7-b4ba-664326fa7b19.png)
プロジェクトの準備
プロジェクトに必要なパッケージをインストールします。
npm install
![2023030901.015.png (150.3 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/c59b09c7-8e81-4689-ab0f-08e64cc957c6.png)
![2023030901.016.png (267.3 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/43b7a3df-d742-407a-ae5a-69d4d51eb3d2.png)
パッケージがインストールされました。
v-calendar のインストール
v-calendar をインストールします。
npm install v-calendar@next
![2023030901.017.png (164.4 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/147ce03b-ecb3-44a5-b761-7cee27938491.png)
![2023030901.018.png (224.6 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/77d73095-5d69-4bac-a7e1-8cc4489609f0.png)
v-calendar がインストールされました。
main.js
main.js を書き換えて V-Calendar を組み込みます。
import { createApp } from 'vue'
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';
import App from './App.vue'
import 'v-calendar/dist/style.css';
createApp(App)
.use(SetupCalendar, {})
// .component("Calendar", Calendar)
.component("DatePicker", DatePicker)
.mount("#app");
![2023030901.019.png (255.6 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/6161b842-a736-40a1-a675-74170b3ea954.png)
App.vue
App.vue を書き換えます。
<template>
<div id="app">
<div class="container">
<Calendar />
<DatePicker v-model="date" is-inline />
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
date: null,
mode: "datetime",
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
![2023030901.020.png (309.0 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/96aad534-3a27-4c58-b38f-787a07e61c0a.png)
ブラウザで動作チェックします。
npm run dev
![2023030901.021.png (244.4 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/3f59dc67-dc13-430a-98b4-7001e1cdbec1.png)
ブラウザーで開くボタンをクリックします。
![2023030901.022.png (297.7 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/a0cd7f7c-d81d-4751-bcb2-95f5f5295eda.png)
カレンダーが表示されます。
![2023030901.023.png (98.5 kB)](https://img.esa.io/uploads/production/attachments/5600/2023/03/09/20803/ec8bca44-724e-4053-afeb-2d3f292ebfab.png)
次回は、こちらのカレンダーを FileMaker カスタム App に埋め込みます!お楽しみに。