かっこいいミニカレンダー①

2023 4/03

2023-04-03 2023-04-03

URLをコピーしました！

こんにちはジョージです。日本の狭小住宅にもジャストフィットしそうなミニカレンダーを紹介します。

V-Calendar

Claris FileMaker では標準でカレンダーアドオンが提供されていますが、画面の端にすこしだけ表示しておくにはサイズがアメリカンです。

そして、カレンダー（日付ピッカー等）は、その使い勝手や FileMaker カスタム App との連携などを考えると、我々じぇねんちゅでも自作するのは敬遠したくなる部品のひとつです。

今回は V-Calendar という Vue.js で動作する、素晴らしいカレンダープラグインを見つけたので FileMaker カスタム App で使えるようにしてみましょう。

An elegant calendar and datepicker plugin for Vuejs.
V-Calendar は Vuejs で利用できる、エレガントなカレンダー兼日付ピッカーです。
https://vcalendar.io

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 で開発環境を準備しました。

Vue.js の開発環境が完成しました。

Vue CLI あらため Vite

VSCode のコンテナから用意した開発環境には Vue CLI が含まれておりコマンドラインから Vue.js のプロジェクトの作成が可能なのですが、最近では Vite でプロジェクトを作成するのが一般的らしいので最先端の流れにのります。
https://ja.vitejs.dev/

ターミナルが起動します。

新規プロジェクトを作成します。

npm init vite-app v-calendar

新規プロジェクトが作成されました。

プロジェクトフォルダに移動します。

プロジェクトの準備

プロジェクトに必要なパッケージをインストールします。

npm install

パッケージがインストールされました。

v-calendar のインストール

v-calendar をインストールします。

npm install v-calendar@next

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");

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>