Vuelendarの紹介：VueJSで書かれた日付ピッカーカレンダー

As the customization was getting more challenging and time-consuming, we’ve decided to look for another solution. What’s more, the APIs did not allow us to implement lots of requirements that were quite crucial for the quality of the end 製品.そのため 1TP55カレンダー が作られた。

ソースはこちら コード の 1TP55カレンダー 私たちの GitHubリポジトリ.

それはいったい何なのか？

この記事の冒頭ですでにお分かりかもしれないが 1TP55カレンダー はVueJsで書かれたカレンダーコンポーネントです。日付の範囲または単一の日付を選択することができます。さらに、非アクティブな日を簡単に置き換えることもできます！また、カスタマイズされたCSSを追加することができ、最終的に「ルック＆フィール」エクスペリエンスを変えることができます。

制作プロセス

以前、あるプロジェクトでカレンダー機能を実装するためにjQqueryを使っていたのですが、カスタマイズが難しいという問題にぶつかりました。そこで、独自のコンポーネントを作ることにしました。最初の段階では、主に自分たちのプロジェクトで使っていましたが、時間が経つにつれて、他のプログラマーにとっても便利なソリューションになるかもしれないという結論に達しました。

インストール

npm install [email protected]

使用方法

.vueファイルにスタイルをインポートします：

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

コンポーネントを登録する：

import VRangeSelector from 'vuelendar/components/vl-range-selector'；
import VDaySelector from 'vuelendar/components/vl-day-selector'；

エクスポートデフォルト
  コンポーネント：{
    VRangeSelector、
    VDaySelector
  },
  データ () {
    を返す {。
      範囲：{},
      date: null
    }
  }
  // ...
}

テンプレートで使用する：

日付を無効にする

Vuelendarでは、2つの方法で日付を無効にすることができます。

配列の使用：

2019年4月21日と2019年4月25日を無効にする

オブジェクトを使って日付の範囲を表す：

2019年4月21日から2019年4月25日までのすべての日付を無効にする

from'属性のみを指定すると、その日付より過去の日付はすべて無効になります。

2019年4月21日からすべての日付を無効にする

to'属性のみを指定すると、その日付より前の日付はすべて無効になる。

2019年4月21日以前のすべての日付を無効にする

申し込み

私たちの 1TP55カレンダー は、VueJSをベースにしたすべてのプロジェクトで使用できます。これはシンプルで効率的なコンポーネントで、プログラマーとしての時間を節約するだけでなく、あなたのプロジェクトを豊かにします。 プロジェクト カレンダーがスムーズに動作します。今日では、このソリューションを必要とするプロジェクトがたくさんあります！

アップデート

VueJSの新しいアップデートが開始され、新しい要件が現れました。そのため、私たちのカレンダーコンポーネントをVueJSの最新バージョンに合わせることにしました。私たちの小さいけれど便利なgemがスムーズかつ効果的に動作するように、ライブラリを改善する必要がありました。

まとめ

もしあなたがVueJSをベースにしたプロジェクトの途中で、カレンダーのクールな機能を探しているなら、これは間違いなくあなたのためのものです！私たちは、これらのコンポーネントの作成にどれだけ時間がかかるか知っています。私たちの Vuelandar は、あなたのアプリケーションにスパイスを加え、時間と神経を節約するのに役立ちます！

続きを読む

おそらく）Typescriptを使うべき理由

悪いコーディング・プラクティスでプロジェクトを潰さないためには？

NextJSのデータフェッチ戦略