実際のデータを使用して毎月のカレンダーを作成する方法

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

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

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

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

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

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

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

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

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

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

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

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

  <div>
    今日
    >
  </div>

  <ol>
    <li>月</li>
    ...
    <li>太陽</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（）関数を使用して互いに比例した7つの列を作成できます。また、各カレンダーの日付で100pxの最小値を宣言して、行が一貫していることを確認しました。

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

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

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

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

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

私達はします：

• 今月を取得します
• 日付を配置する場所を計算します（営業日）
• 前月と来月を表示する日付を計算する
• すべての日付を配列に組み合わせます

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

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

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

Weekofyearプラグインは、今年の今週の数値を返します。 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コードは上記と同じです）...

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

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

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

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

カレンダーを読み込む際の出発点として今月を設定したいと考えています。ここで、mは月を数値としてフォーマットします（たとえば、1月は1に等しい）：

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

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

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

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

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

まず、日付番号を正しい営業日の列に落とすことを望みます。たとえば、2020年7月1日は水曜日です。これは、日付番号が開始される場所です。

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

今月の日付を作成します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

開始する前に、今月、前月、および来月の日付変数を定義して、コード全体でそれらを参照できるようにしましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今日に変数セットを作成します。

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

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

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

これで、スタイルを設定できます！

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

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

デモを表示します

以上が実際のデータを使用して毎月のカレンダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。