ウェブページでカレンダーを見て、「どうやってやったの？」このようなものにプラグインまたは埋め込まれたGoogleカレンダーを使用するのは自然ですが、実際、カレンダーを作成することは、HTML、CSS、およびJavaScriptの3人のマスケット銃選手だけです。一緒に作りましょう！

ターゲットを見ることができるCodeSandboxにデモを設(shè)定しました。

最初にデモをご覧ください。カレンダーの要件の一部を決定しましょう。それはすべきです：

• 指定された月の月グリッドを表示します
• グリッドが常に完了するように、前月と翌月の日付を表示します
• 現(xiàn)在の日付を示します
• 現(xiàn)在選択されている月の名前を表示します
• 前月と翌月に移動(dòng)します
• ユーザーが一度クリックして今月に戻ることを許可します

ああ、day.js（超軽量ユーティリティライブラリ）からカレンダー日付を取得するための単一ページアプリケーションとして構(gòu)築します。

操作を簡(jiǎn)素化するために、特定のフレームワークの選択を避けます。このセットアップでは、パッケージ管理に小包を使用して、Babelを使用してコード、バンドルコードを作成し、プロジェクトの唯一の依存関係を管理できるようにします。詳細(xì)については、codeSandboxのpackage.jsonファイルをご覧ください。

ステップ1：基本的なタグとスタイルから始めます

カレンダーの基本的なテンプレートを作成することから始めましょう。これは派手なものを必要としません。ただし、フォームを使用せずに実行する必要があります。

マークアップを3つのレイヤーとして概説できます。

• カレンダータイトルセクション。これにより、現(xiàn)在選択されている月と、月の間のページネーションの原因となる要素が表示されます。
• カレンダーグリッドタイトルセクション。繰り返しますが、テーブルは使用しませんが、それは曜日の日のリストを含むヘッダーのようなものです。
• カレンダーグリッド。ご存知のように、今月の毎日はグリッドの正方形で表されます。

これをindex.jsというファイルに記述しましょう。これは、プロジェクトフォルダーのSRCフォルダーに配置できます。プロジェクトルートディレクトリにindex.htmlファイルがあり、作業(yè)をインポートしますが、メインタグはJavaScriptファイルにあります。

 document.getElementById（ "app"）。innerhtml = `
<div>
  <div>
    2020年7月
  </div>

  <div>
    今日
    >
  </div>

  <ol>
    <li>月</li>
    ...
    <li>太陽(yáng)</li>
  </ol>

  <ol>
    <li>
      1
      ...
      29
    </li>
  </ol>
</div>
`;

このファイルをプロジェクトのルートディレクトリにあるindex.htmlファイルにインポートします。ここで特別なことは何も起こりませんでした。これは、アプリケーションによって配置され、index.jsファイルに登録されている要素を含むHTMLボイラープレートにすぎません。

 

  
    <meta charset="UTF-8">
    <title>小包サンドボックス</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

使用するマーカーがいくつかあるので、少しスタイリングして、スタートのように視覚的な視覚を作るようにしましょう。具體的には、次のようになります。

• FlexBoxを使用した要素を配置します
• CSSグリッドを使用してカレンダーフレームを作成します
• セルのラベルを位置付けます

まず、index.jsと同じSRCフォルダーに新しいstyles.cssファイルを作成して、これに入れてみましょう。

 / * ...（CSSコードは上記と同じです）... */

グリッドをセットアップする重要な部分は、次のとおりです。

 .day-of-week、
.days-grid {
  / * 7平日と日のセルの等しい列 */
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（7、1Fr）;
}

カレンダーグリッドタイトルとカレンダーグリッド自體の両方が、CSSグリッドを使用してレイアウトされていることに注意してください。週7日は常にあることがわかっているため、Repeat（）関數(shù)を使用して互いに比例した7つの列を作成できます。また、各カレンダーの日付で100pxの最小値を宣言して、行が一貫していることを確認(rèn)しました。

これらのスタイルをタグに接続する必要があるため、index.jsファイルの上部に追加しましょう。

インポート「./styles.css ";

これは、私たちがこれまでに持っているものを見るための良い停止ポイントです。

デモを表示###ステップ2：今月カレンダーを設(shè)定します

テンプレートには現(xiàn)在、靜的データのみが含まれていることに気付いたかもしれません。月は7月にハードコードされており、日付數(shù)もハードコードされています。これはday.jsが出てくる場(chǎng)所です。実際のカレンダーデータを使用して、日付を週の正しい日付に正しく配置するために必要なすべてのデータを提供します。これにより、1か月の開始日からデータを表示するために必要なすべての日付形式オプションに何かを取得して設(shè)定できます。

私達(dá)はします：

• 今月を取得します
• 日付を配置する場(chǎng)所を計(jì)算します（営業(yè)日）
• 前月と來(lái)月を表示する日付を計(jì)算する
• すべての日付を配列に組み合わせます

まず、day.jsをインポートし、すべての靜的HTML（選択された月、平日、日付）を削除する必要があります。これをindex.jsファイルの真上のインポートスタイルに追加することでこれを行います。

 「dayjs」からdayjsをインポートします。

また、Day.jsプラグインをヘルプに頼ります。平日は、週の最初の日を設(shè)定するのに役立ちます。一部の人々は、日曜日を週の初日にするのが好きです。他の人は月曜日を好みます。ヘック、場(chǎng)合によっては金曜日から意味があります。月曜日を始めます。

Weekofyearプラグインは、今年の今週の數(shù)値を返します。 1年に52週間があるので、1月1日から始まる週は今年の最初の週などであると言えます。

インポートステートメントの後にindex.jsに追加するものは次のとおりです。

 const feaceday = require（ "dayjs/plugin/平日"）;
const weekofyear = require（ "dayjs/plugin/weekofyear"）;

dayjs.extend（平日）;
dayjs.extend（weekofyear）;

ハードコーディングされたカレンダー値を剝がした後、これはこれまでのところindex.jsにあるものです。

 // ...（JavaScriptコードは上記と同じです）...

次に、いくつかの定數(shù)を設(shè)定しましょう。具體的には、週の日（つまり、月曜日、火曜日、水曜日など）の配列を作成したいと考えています。

 // ...（JavaScriptコードは上記と同じです）...

次に、今年を取得して、yyyy形式で設(shè)定したい：

 // ...（JavaScriptコードは上記と同じです）...

カレンダーを読み込む際の出発點(diǎn)として今月を設(shè)定したいと考えています。ここで、mは月を數(shù)値としてフォーマットします（たとえば、1月は1に等しい）：

 // ...（JavaScriptコードは上記と同じです）...

カレンダーグリッドのタイトルを曜日に埋め続けましょう。まず、正しい要素（＃日からの日）を取得し、次に平日アレイをループし、配列內(nèi)の各アイテムのリストアイテム要素を作成し、各アイテムの名前を設(shè)定します。

 // ...（JavaScriptコードは上記と同じです）...

ステップ3：カレンダーグリッドを作成します

それは非常にシンプルですが、今ではカレンダーグリッドを使用しているので、今では本當(dāng)に楽しみが始まります。これを正しく行うためには、一時(shí)停止して考えてみましょう。

まず、日付番號(hào)を正しい営業(yè)日の列に落とすことを望みます。たとえば、2020年7月1日は水曜日です。これは、日付番號(hào)が開始される場(chǎng)所です。

月の初日が水曜日の場(chǎng)合、これは、最初の週の月曜日と火曜日に利用可能なグリッドアイテムがあることを意味します。月の最終日は金曜日7月31日です。これは、先週の土曜日と日曜日が空になることを意味します。カレンダーグリッドが常に完了するように、これらの日付を前月と來(lái)月のトレーリング日と主要な日付に入力したいと考えています。

今月の日付を作成します

今月の日付をグリッドに追加するには、今月に何日があるかを知る必要があります。 day.jsが提供するdayinnththメソッドを使用して取得できます。このためのヘルパーメソッドを作成しましょう。

 // ...（JavaScriptコードは上記と同じです）...

これを知っていると、長(zhǎng)さの空の配列を作成します。今月の日數(shù)に等しくなります。次に、配列をマップ（）して、各配列の日付オブジェクトを作成します。作成するオブジェクトには任意の構(gòu)造があるため、必要に応じて追加のプロパティを追加できます。

この例では、特定の日付が現(xiàn)在の日付であるかどうかを確認(rèn)するために使用される日付プロパティが必要です。また、ラベル（1、2、3など）として機(jī)能するDayofmonthプロパティも返品します。 iScurrentmonthは、日付が今月の內(nèi)外にあるかどうかをチェックします。それが今月の外にある場(chǎng)合、私たちは彼らが今月の範(fàn)囲外にいることを人々が知っているようにスタイルをスタイリングします。

 // ...（JavaScriptコードは上記と同じです）...

前月の日付をカレンダーグリッドに追加します

前月の日付を今月に表示するには、選択した月の最初の日がある日かを確認(rèn)する必要があります。これは、day.jsに平日プラグインを使用できる場(chǎng)所です。このためのヘルパーメソッドを作成しましょう。

 // ...（JavaScriptコードは上記と同じです）...

次に、これに基づいて、前月の最後の月曜日の日がどの日かを確認(rèn)する必要があります。今月のビューで前月の數(shù)日を表示する必要があることを知るには、この値が必要です。今月の初日から営業(yè)日の価値を差し引くことでそれを入手できます。たとえば、1か月の最初の日が水曜日である場(chǎng)合、前月の最後の月曜日を取得するには3日間を差し引く必要があります。この値を使用すると、前月の最後の月曜日からその月の最終日までの日付オブジェクトの配列を作成できます。

 // ...（JavaScriptコードは上記と同じです）...

來(lái)月の日付をカレンダーグリッドに追加します

それでは、來(lái)月のグリッドを埋めるために、來(lái)月から取得する必要がある日付を計(jì)算しましょう。幸いなことに、前月の計(jì)算のために作成したばかりの同じヘルパーメソッドを使用できます。違いは、その営業(yè)日の価値を7から差し引くことにより、來(lái)月に表示される日數(shù)を計(jì)算することです。

したがって、たとえば、1か月の最終日が土曜日の場(chǎng)合、7から1日を差し引くために、來(lái)月（日曜日）から必要な日付配列を作成する必要があります。

 // ...（JavaScriptコードは上記と同じです）...

OK、必要なすべての日を作成する方法を知っています。作成した方法を使用してから、前月と來(lái)月のパディング日を含む、今月に表示するすべての日を含むすべての日を1つの配列にマージしましょう。

 // ...（JavaScriptコードは上記と同じです）...

これが私たちがindex.jsにまとめたすべてです：

 // ...（JavaScriptコードは上記と同じです）...

デモ###ステップ4を表示：カレンダーの日付を表示します

さて、カレンダーの基本的なマーカーがあります?，F(xiàn)在の月の日付のデータを表示する必要があります。さらに、前月と翌月の日付を表示して、空のグリッドアイテムを埋める必要があります。次に、日付をカレンダーに添付する必要があります！

カレンダーグリッド＃カレンダーデイ用のコンテナがすでにあります。要素を取得しましょう。

 // ...（JavaScriptコードは上記と同じです）...

次に、カレンダービューに日付を添付する関數(shù)を作成しましょう。

 // ...（JavaScriptコードは上記と同じです）...

前月と翌月の日付をチェックしているため、クラスを追加して今月の日付と區(qū)別できるようにします。

 // ...（CSSコードは上記と同じです）...

それでおしまい！私たちのカレンダーは、私たちが望む方法で表示されるべきです。

デモ###ステップ5を表示：現(xiàn)在の月を選択します

私たちがこれまでに持っていることはかなり良いですが、ユーザーは今月から前後に月を前後にページできるようにしたいと考えています。すでにほとんどのロジックがあるので、本當(dāng)に必要なのは、日付計(jì)算を再実行し、更新されたデータでカレンダーを塗り直すページングボタンにクリックリスナーを追加することです。

開始する前に、今月、前月、および來(lái)月の日付変數(shù)を定義して、コード全體でそれらを參照できるようにしましょう。

 // ...（JavaScriptコードは上記と同じです）...

次に、カレンダーの日付を再計(jì)算し、別の月にページングするときにカレンダーを再レンダリングする責(zé)任のある方法を作成しましょう。関數(shù)CreateCalendarと呼びます。このメソッドは、2つのプロパティ（年と月）を受け入れ、これに基づいて、カレンダーはページをリロードせずに新しいデータでrederendされます。

このメソッドは、タイトルコンテンツを置き換えて、選択した月ラベルを常に表示します。

 // ...（JavaScriptコードは上記と同じです）...

その後、カレンダーの日付コンテナを取得し、既存のすべての日付を削除します。

 // ...（JavaScriptコードは上記と同じです）...

カレンダーをクリアした後、以前に作成した方法を使用して表示する必要がある新しい日付を計(jì)算します。

 // ...（JavaScriptコードは上記と同じです）...

最後に、毎日の日付要素を添付します。

 // ...（JavaScriptコードは上記と同じです）...

また、既存のカレンダーをクリアするRemoveallDayelementsメソッド：既存のカレンダーをクリアする論理的な部分もあります。このメソッドは、最初のカレンダーの日付要素を取得し、削除し、別の要素に置き換えます。そこから、すべての要素が削除されるまでロジックをループします。

 // ...（JavaScriptコードは上記と同じです）...

今、私たちが月を変えたいとき、私たちはその論理を再利用することができます。コンポーネントの靜的テンプレートを作成したときの最初のステップを思い出してください。これらの要素を追加しました：

 // ...（HTMLコードは上記と同じです）...

これらは、月の間のページネーションのコントロールです。それを変更するには、現(xiàn)在選択されている月を保存する必要があります。それが何であるかを追跡し、今月に初期値を設(shè)定する変數(shù)を作成しましょう。

 // ...（JavaScriptコードは上記と同じです）...

これで、セレクターが機(jī)能するためには、JavaScriptが必要です。読みやすくするために、InitMinthSelectorsという別の方法を作成し、そこにロジックを殘します。この方法は、イベントリスナーをセレクター要素に追加します。クリックイベントのために耳を傾け、SelectedMonthの値を新しく選択した月の名前に更新し、正しい年と月の値でCreateCalendarメソッドを?qū)g行します。

 // ...（JavaScriptコードは上記と同じです）...

それでおしまい！私たちのカレンダーは準(zhǔn)備ができています。これは良いことですが、現(xiàn)在の日付をマークして他の日付から際立っているようにすることができればさらに良いでしょう。これは難しくないはずです。私たちはすでに今月以外で日付スタイルを設(shè)定しているので、同様のことをしましょう。

今日に変數(shù)セットを作成します。

 // ...（JavaScriptコードは上記と同じです）...

次に、補(bǔ)足法では、現(xiàn)在の月以外の日付を持つクラスを適用する場(chǎng)合、要素が今日の日付であるかどうかを確認(rèn)するために別のチェックを追加する必要があります。もしそうなら、私たちは要素にクラスを追加します：

 // ...（JavaScriptコードは上記と同じです）...

これで、スタイルを設(shè)定できます！

 // ...（CSSコードは上記と同じです）...

ほら、私たちは終わりました！最終的なデモをチェックして、すべての組み合わせを確認(rèn)してください。

デモを表示します

以上が実際のデータを使用して毎月のカレンダーを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。