Javascript

Flatpikrを利用してAirbnbのようなカレンダーを作成してみよう

イブリン

#Airbnb

#Datepickr

#Flatpickr

#予約カレンダー

更新日:2021/08/04

今回は、私が会社の社内システムに導入した、物を貸し借りを管理するシステムに、
Flatpikrという日付カレンダーについてについてお話しします。

導入した理由

◆タブレット端末をメインにしたシステムのため、指で簡単に日付選択できるようにしたかった
◆自由度が高いこと
・カレンダー表示が端末に依存しない表示もできること
・jQueryなどのライブラリ依存せず、単独で動作する（機能の拡充ができる）
◆軽量
◆設定が簡単で、初学者でもおしゃれなカレンダーが作成できること

利用できるブラウザ

ライブラリで動作確認されているのは、Chrome、Firefox、IE10以上、Safari 6以上です。

導入方法

今回は、CDNにキャッシュされているライブラリをブラウザ上で読み込んで使用しましたが、
npm、bower、yarnなどのパッケージ管理ツールを使って、インストールして使用することも可能です。

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
  <script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>

詳細は【こちら】

日付の無効設定

土日祝日は無効

こちらのサイトを参考にしました【こちら】

特定の日付を非表示

flatpickrプラグインのdisableを利用して日付の非表示を行いました
Javascript

//以下の情報があった場合に非表示設定を行う
disable: [
              {
                from: "2025-04-01",
                to: "2025-05-01"
              },      
              {
                from: "2025-09-01",
                to: "2025-12-01"
              },            

        ]

//以下の情報があった場合に非表示設定を行う

disable: [

{

from: "2025-04-01",

to: "2025-05-01"

{

from: "2025-09-01",

to: "2025-12-01"

]

本日・明日以降を選択可能にする

今日から選択できるようにしたい！明日から表示できるようにしたいという場合は、
flatpickrのプラグイン機能のmindayやmaxdayを利用します。
今回はmindayのみを利用しました。
◆本日までの日付を非表示にする
Javascript

flatpickr('.flatpickr');
const config = {
//今日までの日付を非表示にする
minDate:"today",
  };
  flatpickr('.flatpickr', config);

flatpickr('.flatpickr');

const config = {

//今日までの日付を非表示にする

minDate:"today",

};

flatpickr('.flatpickr', config);

◆明日までの日付を非表示にする
Javascript

(function($){
    // 祝日取得
    $.get('https://holidays-jp.github.io/api/v1/date.json', function( holidays ){
        // 日本語ピッカー(日曜はじまり)
        flatpickr.l10ns.ja.firstDayOfWeek = 0;
        $(".flatpickr").flatpickr({
            locale: 'ja',
            disableMobile: true,
            // 出力書式
            dateFormat: 'Y年m月d日',
            // 日付毎カスタム処理
            onDayCreate: onDayCreate,
            // 明日から有効
            minDate: tomorrow()
        });
// 日付毎に
        function onDayCreate( dObj, dStr, fp, dayElem ){
// 明日
        function tomorrow(){
            var d = new Date();
            d.setDate(d.getDate() + 1);
            return YMD(d);
        }
        // yyyy-mm-dd
        function YMD( d ){
            var Y = d.getFullYear();
            var M = d.getMonth() + 1;
            var D = d.getDate();
            return [Y, ('0' + M).slice(-2), ('0' + D).slice(-2)].join('-');
        }
    });
})(jQuery);

(function($){

// 祝日取得

$.get('https://holidays-jp.github.io/api/v1/date.json', function( holidays ){

// 日本語ピッカー(日曜はじまり)

flatpickr.l10ns.ja.firstDayOfWeek = 0;

$(".flatpickr").flatpickr({

locale: 'ja',

disableMobile: true,

// 出力書式

dateFormat: 'Y年m月d日',

// 日付毎カスタム処理

onDayCreate: onDayCreate,

// 明日から有効

minDate: tomorrow()

});

// 日付毎に

function onDayCreate( dObj, dStr, fp, dayElem ){

// 明日

function tomorrow(){

var d = new Date();

d.setDate(d.getDate() + 1);

return YMD(d);

}

// yyyy-mm-dd

function YMD( d ){

var Y = d.getFullYear();

var M = d.getMonth() + 1;

var D = d.getDate();

return [Y, ('0' + M).slice(-2), ('0' + D).slice(-2)].join('-');

}

});

})(jQuery);

期間範囲を選択できるようにする

私は利用しませんでしたが、よりAirbnbらしく見せたいという方は、
日付の範囲を２つの入力可能になります。
HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>
<div style="display: flex;">
  <p>
    <span>Date1</span>
    <br>
    <input class="fp_range" data-id="rangePlugin" type="text" placeholder="Select Date.." readonly="readonly">
  </p>
  <p>
    <span>Date2</span>
    <br>
    <input class="fp_range" id="secondRangeInput" type="text" placeholder="Select Date.." readonly="readonly">
  </p>
</div>

<p>

<br>

</p>

<p>

<br>

</p>

</div>

Javascript

const config = {
  "plugins": [new rangePlugin({ input: "#secondRangeInput"})]
};
flatpickr('.flatpickr', config);

const config = {

"plugins": [new rangePlugin({ input: "#secondRangeInput"})]

};

flatpickr('.flatpickr', config);

表示サイズの変更

タブレットで大きな画面でカレンダー選択ができるようにしたかったのですが、
デフォルトのインプット表示が小さいため、cssを追加して表示方法を変更しました。
CSS

@charset "utf-8";
//インプットサイズ
.flatpickr{
    max-width: max-content;
    height:72px;
    font-size: 30px;
    margin-bottom:20px;
   }
   .animate.open{
     width:850px;
     height:900px;
   }
   .allowleft{
    width:850px;
    height:900px;
   }
   .flatpickr-current-month{
     height:50px;
     font-size:135%;
   }
   //カレンダー表示サイズ
   .innerContainer{
    min-width: 800px; 
    max-width: 800px;
    height:900px;
    text-align: center;
    margin:auto;
   }
  
   .dayContainer{
     width:800px;
    min-width:800px;
    height:600px;
   }
//日付の表示サイズを変更
   .flatpickr-days{
     width: 800px;
     min-width: 800px; 
    max-width: 800px;
    padding-top:2%;
    padding-bottom: 0;
    margin-bottom:0;
     
   }
   .flatpickr-day.today{
    margin-right: -1%;
    margin-left:4.5%;
    padding:8%;
    margin-top:-2%;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: -2%;
    padding-bottom: -3%;
    margin-bottom:-5%;
    height:50px;
    border-radius: 100%;
   }
   
   .flatpickr-weekdaycontainer{
     width:50px;
     
   }
  .flatpickr-day{
    font-size: 30px;
    margin-right: 4%;
    margin-left:4.5%;
    margin-top:1%;
    text-align: center;
    width:50px;
  }
//選択ボタンの表示サイズやカラー
  span.flatpickr-day.selected{
    margin-right:2.5%;
    margin-left:4%;
    padding:8%;
    margin-top:-2%;
    margin-bottom:-5%;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: -2%;
    padding-bottom: -3%;
    height:50px;
    border-radius: 100%;
    
  }
  
  .flatpickr-rContainer.rContainer{
    max-width: 800px;
  }
  .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
    border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #569ff7;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #569ff7;
}
.rangeMode .flatpickr-day {
    margin-top: 1px;
}

100

101

102

@charset "utf-8";

//インプットサイズ

.flatpickr{

max-width: max-content;

height:72px;

font-size: 30px;

margin-bottom:20px;

}

.animate.open{

width:850px;

height:900px;

}

.allowleft{

width:850px;

height:900px;

}

.flatpickr-current-month{

height:50px;

font-size:135%;

}

//カレンダー表示サイズ

.innerContainer{

min-width: 800px;

max-width: 800px;

height:900px;

text-align: center;

margin:auto;

}

.dayContainer{

width:800px;

min-width:800px;

height:600px;

}

//日付の表示サイズを変更

.flatpickr-days{

width: 800px;

min-width: 800px;

max-width: 800px;

padding-top:2%;

padding-bottom: 0;

margin-bottom:0;

}

.flatpickr-day.today{

margin-right: -1%;

margin-left:4.5%;

padding:8%;

margin-top:-2%;

padding-top: 3%;

padding-left: 3%;

padding-right: -2%;

padding-bottom: -3%;

margin-bottom:-5%;

height:50px;

border-radius: 100%;

}

.flatpickr-weekdaycontainer{

width:50px;

}

.flatpickr-day{

font-size: 30px;

margin-right: 4%;

margin-left:4.5%;

margin-top:1%;

text-align: center;

width:50px;

}

//選択ボタンの表示サイズやカラー

span.flatpickr-day.selected{

margin-right:2.5%;

margin-left:4%;

padding:8%;

margin-top:-2%;

margin-bottom:-5%;

padding-top: 3%;

padding-left: 3%;

padding-right: -2%;

padding-bottom: -3%;

height:50px;

border-radius: 100%;

}

.flatpickr-rContainer.rContainer{

max-width: 800px;

}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {

border-radius: 0 50px 50px 0;

}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {

background: #569ff7;

-webkit-box-shadow: none;

box-shadow: none;

color: #fff;

border-color: #569ff7;

}

.rangeMode .flatpickr-day {

margin-top: 1px;

}

その他のプラグイン機能

上記で紹介したプラグイン機能以外にも、公式サイトに多くのプラグイン機能があります。
▼公式サイト
https://flatpickr.js.org/plugins/
▼日本語サイト
https://tr.you84815.space/flatpickr/examples.html
https://tr.you84815.space/flatpickr/plugins.html

参考したサイト

この記事を作成する際に、参考にしたサイトをまとめましたのでご確認ください
▼土日祝日を非表示にする
http://cmz.wp.xdomain.jp/archives/1070
▼公式サイト
https://flatpickr.js.org/plugins/
https://tr.you84815.space/flatpickr/examples.html
https://tr.you84815.space/flatpickr/plugins.html
▼その他
https://deep-blog.jp/engineer/12729/

≪PHPとMySQLで速度改善

PHPでプログラムを学ぼう！（目次）≫

Flatpikrを利用してAirbnbのようなカレンダーを作成してみよう

導入した理由

利用できるブラウザ

導入方法

日付の無効設定

土日祝日は無効

特定の日付を非表示

本日・明日以降を選択可能にする

期間範囲を選択できるようにする

表示サイズの変更

その他のプラグイン機能

参考したサイト

関連記事

WebXR技術を使用したAR開発を模索してみた

[React] React Queryの紹介

[jQuery]web上でテキストの差分を表示・確認する方法