検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >月間カレンダー Web サイトを構築する

月間カレンダー Web サイトを構築する

王林
王林オリジナル
2024-08-27 18:01:18594ブラウズ

Build a Month Calendar Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトである月間カレンダーを共有できることを嬉しく思います。このプロジェクトは、JavaScript で機能的で視覚的に魅力的なカレンダーを作成したい人に最適です。 Web サイトにカレンダー機能を追加することに興味がある場合でも、単に JavaScript スキルを強化したい場合でも、このプロジェクトはあなたのポートフォリオへの貴重な追加となるでしょう。

プロジェクト概要

月間カレンダーは、現在の月を表示し、今日の日付を強調表示し、曜日を正確に配置する Web ベースのアプリケーションです。このプロジェクトでは、HTML と CSS で構築された洗練された応答性の高いインターフェイスと組み合わせて、JavaScript を使用してカレンダーを動的に生成する方法を紹介します。

特徴

  • 動的月表示: 現在の月と年を自動的に表示します。
  • 強調表示された現在の日付: 今日の日付は、簡単に識別できるように強調表示されています。
  • 正確な曜日レイアウト: 曜日は月に従って正しく配置されます。

使用されている技術

  • HTML: 月間カレンダーの構造を提供します。
  • CSS: カレンダーのスタイルを設定し、視覚的に魅力的で応答性が高くなります。
  • JavaScript: 日数の計算や現在の日付の強調表示など、カレンダーを生成するロジックを処理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

Month-Calendar/
├── index.html
├── style.css
└── script.js
  • index.html: 月間カレンダーの HTML 構造が含まれています。
  • style.css: モダンでレスポンシブなデザインを作成するための CSS スタイルが含まれています。
  • script.js: カレンダー生成機能を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

  1. リポジトリのクローンを作成します:

    git clone https://github.com/abhishekgurjar-in/Month-Calendar.git

  2. プロジェクト ディレクトリを開きます:

    cd Month-Calendar

  3. プロジェクトを実行します:

    • Web ブラウザでindex.html ファイルを開いて、月間カレンダーを表示します。

使用法

  1. Web ブラウザで Web サイトを開きます。
  2. 現在の月を表示し、今日の日付を強調表示します。
  3. 日ごとに移動すると、月全体のレイアウトが表示されます。

コードの説明

HTML

index.html ファイルは、月の表示や日のグリッド レイアウトなど、月カレンダーの構造を定義します。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Month Calendar6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      924ff17625d603f964501dd897c96cc6
        4a249f0d628e2318394fd9b75b4636b1Month Calendar473f0a7621bec819994bb5020d29372a
      16b28748ea4df4d9c2150843fecfba68
      6a0cba8356a55c4a6e47746d431e6421
        418883615a2e79b9926c86666863ce0d
          5f41073e18caf0aa09116baf33d01f47
            4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a
            e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        639769261d891863793f213a2da06288
          dc6dce4a544fdca2df29d5ac0ea9906bMon16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bTue16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bWed16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bThu16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bFri16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bSat16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bSun16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        97a12517d2546b2575274c1d8a6e171e16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
      ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css ファイルは月カレンダーのスタイルを設定し、魅力的で応答性の高いものにします。以下にいくつかの主要なスタイルを示します:

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  margin: 20px;
  color: white;
  text-align: center;
}

.calendar {
  background-color: black;
  color: lightgray;
  width: 450px;
  height: 520px;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.month {
  width: 100%;
  height: 120px;
  background-color: lightseagreen;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

.month h1 {
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
}

.month p {
  font-size: 16px;
}

.weekdays {
  width: 100%;
  height: 50px;
  display: flex;
}

.weekdays div {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
}

.days div {
  font-size: 14px;
  margin: 3px;
  width: 57.5px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.days div:hover:not(.empty) {
  border: 2px solid gray;
  cursor: pointer;
}

.today {
  background-color: lightseagreen;
}

.footer {
  margin-top: 70px;
  color: white;
  text-align: center;
}

JavaScript

script.js ファイルには、カレンダーを生成し、現在の日付を強調表示するためのロジックが含まれています。スニペットは次のとおりです:

const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const daysEl = document.querySelector(".days");

const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();

let days = "";

for (let i = firstDay; i > 0; i--) {
  days += `edfd5fc8d5ee204ac4dfe03b945f3c3916b28748ea4df4d9c2150843fecfba68`;
}
for (let i = 1; i 67a68beefb344083e30784f1b3a9b000${i}16b28748ea4df4d9c2150843fecfba68`;
  } else {
    days += `dc6dce4a544fdca2df29d5ac0ea9906b${i}16b28748ea4df4d9c2150843fecfba68`;
  }
}

daysEl.innerHTML = days;

ライブデモ

ここで、Month Calendar プロジェクトのライブデモをチェックできます。

結論

月間カレンダーの作成は、フロントエンド開発スキルと実用的な JavaScript 機能を組み合わせることができる楽しいプロジェクトでした。このツールは、Web サイトにカレンダーの日付を表示するのに便利で、Web 開発プロジェクトへの優れた追加機能となります。皆さんも私と同じように役立つと思います。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript スキルを向上させ、機能的な Web ツールを作成するという私の旅の一環として開発されました。

著者

  • アビシェク・グルジャル
    • GitHub プロフィール

以上が月間カレンダー Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html for date Calendar Directory using Interface JS this display github
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ローン計算ウェブサイトを構築する次の記事：ローン計算ウェブサイトを構築する

関連記事

続きを見る