您是否曾經(jīng)在網(wǎng)頁上看到日歷，并心想：“他們是怎么做到的？”對于這樣的事情，使用插件甚至嵌入式 Google 日歷是很自然的做法，但實際上，制作日歷比您想象的要簡單得多，只需要 HTML、CSS 和 JavaScript 三劍客即可。讓我們一起動手制作一個吧！

我已經(jīng)在 CodeSandbox 上設(shè)置了一個演示，您可以看到我們的目標。

查看演示 首先，讓我們確定日歷的一些需求。它應(yīng)該：

• 顯示指定月份的月份網(wǎng)格
• 顯示前一個月和下一個月的日期，以便網(wǎng)格始終完整
• 指示當前日期
• 顯示當前選定月份的名稱
• 導航到前一個月和下一個月
• 允許用戶單擊一次即可返回到當前月份

哦，我們將把它構(gòu)建為一個單頁面應(yīng)用程序，從 Day.js（一個超輕量級的實用程序庫）獲取日歷日期。

為了簡化操作，我們將避免選擇特定的框架。對于此設(shè)置，我使用 Parcel 進行包管理，以便我可以使用 Babel 編寫代碼、捆綁代碼以及管理項目中唯一一個依賴項。查看 CodeSandbox 上的 package.json 文件以了解詳細信息。

第一步：從基本的標記和樣式開始

讓我們從創(chuàng)建日歷的基本模板開始。這不需要任何花哨的東西。但它也應(yīng)該在不使用表格的情況下完成。

我們可以將我們的標記概述為三層，其中包含：

• 日歷標題部分。這將顯示當前選定的月份以及負責在月份之間分頁的元素。
• 日歷網(wǎng)格標題部分。同樣，我們不會使用表格，但這就像一個包含一周中各天的列表的表頭。
• 日歷網(wǎng)格。您知道的，當前月份的每一天，都以網(wǎng)格中的正方形表示。

讓我們在一個名為 index.js 的文件中編寫這個。這可以放在項目文件夾中的 src 文件夾內(nèi)。我們確實會在項目根目錄中有一個 index.html 文件來導入我們的工作，但主要的標記將位于 JavaScript 文件中。

document.getElementById("app").innerHTML = `
<div>
  <div>
    July 2020
  </div>

  <div>
    Today
    >
  </div>

  <ol>
    <li>Mon</li>
    ...
    <li>Sun</li>
  </ol>

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

讓我們繼續(xù)將此文件導入到位于項目根目錄中的 index.html 文件中。這里沒有什么特別的事情發(fā)生。它僅僅是 HTML 樣板，其中包含一個由我們的應(yīng)用程序定位并注冊我們的 index.js 文件的元素。

  
    <meta charset="UTF-8">
    <title>Parcel Sandbox</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

現(xiàn)在我們有一些標記可以使用了，讓我們稍微調(diào)整一下樣式，以便我們有一個良好的視覺效果作為開始。具體來說，我們將：

• 使用 flexbox 定位元素
• 使用 CSS 網(wǎng)格創(chuàng)建日歷框架
• 在單元格內(nèi)定位標簽

首先，讓我們在與 index.js 相同的 src 文件夾中創(chuàng)建一個新的 styles.css 文件，并將此內(nèi)容放入其中：

/* ... (CSS 代碼同上) ... */

設(shè)置網(wǎng)格的關(guān)鍵部分是：

.day-of-week,
.days-grid {
  /* 7 equal columns for weekdays and days cells */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

請注意，日歷網(wǎng)格標題和日歷網(wǎng)格本身都使用 CSS 網(wǎng)格進行布局。我們知道一周總是有七天，因此這允許我們使用 repeat() 函數(shù)創(chuàng)建七個彼此成比例的列。我們還在每個日歷日期上聲明了一個 min-height 為 100px，以確保行保持一致。

我們需要將這些樣式與標記連接起來，因此讓我們將其添加到 index.js 文件的頂部：

import "./styles.css";

這是一個很好的停止點，看看我們到目前為止有什么。

查看演示 ### 第二步：設(shè)置當前月份日歷

您可能已經(jīng)注意到，該模板目前只包含靜態(tài)數(shù)據(jù)。月份被硬編碼為七月，日期數(shù)字也被硬編碼了。這就是 Day.js 發(fā)揮作用的地方。它提供我們所需的所有數(shù)據(jù)，以便使用真實的日歷數(shù)據(jù)將日期正確地放置在一周的正確日期中。它允許我們獲取和設(shè)置從一個月開始日期到顯示數(shù)據(jù)所需的所有日期格式選項的任何內(nèi)容。

我們將：

• 獲取當前月份
• 計算應(yīng)放置日期的位置（工作日）
• 計算顯示前一個月和下一個月的日期
• 將所有日期組合到一個數(shù)組中

首先，我們需要導入 Day.js 并刪除所有靜態(tài) HTML（選定月份、工作日和日期）。我們將通過將此添加到 index.js 文件中導入樣式的正上方來做到這一點：

import dayjs from "dayjs";

我們還將依靠 Day.js 插件來獲得幫助。WeekDay 幫助我們設(shè)置一周的第一天。有些人喜歡將星期日作為一周的第一天。其他人更喜歡星期一。哎呀，在某些情況下，從星期五開始是有意義的。我們將從星期一開始。

weekOfYear 插件返回當年當前周的數(shù)字值。一年有 52 周，因此我們可以說從 1 月 1 日開始的那一周是一年的第一周，依此類推。

因此，這是我們在導入語句之后添加到 index.js 中的內(nèi)容：

const weekday = require("dayjs/plugin/weekday");
const weekOfYear = require("dayjs/plugin/weekOfYear");

dayjs.extend(weekday);
dayjs.extend(weekOfYear);

一旦我們剝離了硬編碼的日歷值，這就是我們到目前為止在 index.js 中的內(nèi)容：

// ... (JavaScript 代碼同上) ...

現(xiàn)在讓我們設(shè)置一些常量。具體來說，我們想構(gòu)造一個一周中各天（即星期一、星期二、星期三等）的數(shù)組：

// ... (JavaScript 代碼同上) ...

然后，我們想獲取當前年份并以 YYYY 格式設(shè)置它：

// ... (JavaScript 代碼同上) ...

我們想將當前月份設(shè)置為加載日歷時的起點，其中 M 將月份格式化為數(shù)值（例如，一月等于 1）：

// ... (JavaScript 代碼同上) ...

讓我們繼續(xù)使用一周中的各天填充我們的日歷網(wǎng)格標題。首先，我們獲取正確的元素（#days-of-week），然后我們遍歷 WEEKDAYS 數(shù)組，為數(shù)組中的每個項目創(chuàng)建一個列表項元素，同時設(shè)置每個項目的名稱：

// ... (JavaScript 代碼同上) ...

第三步：創(chuàng)建日歷網(wǎng)格

這非常簡單，但現(xiàn)在真正的樂趣開始了，因為我們現(xiàn)在將使用日歷網(wǎng)格。讓我們停下來思考一下，為了正確地做到這一點，我們真正需要做什么。

首先，我們希望日期數(shù)字落在正確的工作日列中。例如，2020 年 7 月 1 日是星期三。這就是日期編號應(yīng)該開始的地方。

如果一個月的第一天是星期三，那么這意味著第一周的星期一和星期二將有空的網(wǎng)格項目。這個月的最后一天是 7 月 31 日，是星期五。這意味著最后一周的星期六和星期日將是空的。我們想用前一個月和下一個月的尾隨日期和前導日期填充這些日期，以便日歷網(wǎng)格始終完整。

創(chuàng)建當前月份的日期

要將當前月份的日期添加到網(wǎng)格，我們需要知道當前月份有多少天。我們可以使用 Day.js 提供的 daysInMonth 方法來獲取它。讓我們?yōu)榇藙?chuàng)建一個輔助方法。

// ... (JavaScript 代碼同上) ...

當我們知道這一點時，我們創(chuàng)建一個長度等于當前月份天數(shù)的空數(shù)組。然后我們映射()該數(shù)組并為每個數(shù)組創(chuàng)建一個日期對象。我們創(chuàng)建的對象具有任意結(jié)構(gòu)，因此如果需要，您可以添加其他屬性。

在這個例子中，我們需要一個 date 屬性，該屬性將用于檢查特定日期是否為當前日期。我們還將返回一個 dayOfMonth 屬性，該屬性充當標簽（例如 1、2、3 等）。isCurrentMonth 檢查日期是否在當前月份內(nèi)或其外部。如果它在當前月份之外，我們將對其進行樣式設(shè)置，以便人們知道它們在當前月份的范圍之外。

// ... (JavaScript 代碼同上) ...

將前一個月的日期添加到日歷網(wǎng)格

要獲取前一個月的日期以在當前月份中顯示，我們需要檢查選定月份的第一天是星期幾。這就是我們可以使用 Day.js 的 WeekDay 插件的地方。讓我們?yōu)榇藙?chuàng)建一個輔助方法。

// ... (JavaScript 代碼同上) ...

然后，基于此，我們需要檢查前一個月中的最后一個星期一是哪一天。我們需要這個值來知道當前月份視圖中應(yīng)該顯示前一個月多少天。我們可以通過從當前月份的第一天減去工作日的值來獲得它。例如，如果一個月的第一天是星期三，我們需要減去 3 天才能獲得前一個月的最后一個星期一。有了這個值，我們就可以創(chuàng)建一個日期對象數(shù)組，從前一個月的最后一個星期一開始，一直到那個月的最后一天。

// ... (JavaScript 代碼同上) ...

將下一個月的日期添加到日歷網(wǎng)格

現(xiàn)在，讓我們反過來計算我們需要從下一個月中獲取哪些日期來填充當前月份的網(wǎng)格。幸運的是，我們可以使用我們剛剛為前一個月計算創(chuàng)建的相同輔助方法。不同之處在于，我們將通過從 7 減去該工作日數(shù)值來計算下一個月中應(yīng)該顯示多少天。

因此，例如，如果一個月的最后一天是星期六，我們需要從 7 減去 1 天來構(gòu)造從下一個月（星期日）開始所需的日期數(shù)組。

// ... (JavaScript 代碼同上) ...

好的，我們知道如何創(chuàng)建所有所需的天數(shù)，讓我們使用我們剛剛創(chuàng)建的方法，然后將所有天數(shù)合并到一個包含我們想要在當前月份顯示的所有天數(shù)的單個數(shù)組中，包括前一個月和下一個月的填充日期。

// ... (JavaScript 代碼同上) ...

這是我們在 index.js 中組合在一起的所有內(nèi)容：

// ... (JavaScript 代碼同上) ...

查看演示 ### 第四步：顯示日歷日期

好的，所以我們有日歷的基本標記，我們需要顯示當前月份日期的數(shù)據(jù)，加上前一個月和下一個月的日期以填充空的網(wǎng)格項目?，F(xiàn)在我們需要將日期附加到日歷！

我們已經(jīng)有一個日歷網(wǎng)格的容器 #calendar-days。讓我們獲取該元素。

// ... (JavaScript 代碼同上) ...

現(xiàn)在，讓我們創(chuàng)建一個將日期附加到日歷視圖的功能。

// ... (JavaScript 代碼同上) ...

請注意，我們正在對來自前一個月和下一個月的日期進行檢查，以便我們可以添加一個類來將它們與當前月份的日期區(qū)分開來：

// ... (CSS 代碼同上) ...

就是這樣！我們的日歷現(xiàn)在應(yīng)該按照我們想要的方式顯示了。

查看演示 ### 第五步：選擇當前月份

我們到目前為止所擁有的非常不錯，但是我們希望用戶能夠向前和向后分頁月份，從當前月份開始。我們已經(jīng)擁有大部分邏輯，所以我們真正需要做的就是向分頁按鈕添加一個點擊偵聽器，該偵聽器重新運行日期計算并使用更新的數(shù)據(jù)重新繪制日歷。

在我們開始之前，讓我們定義當前月份、前一個月和下一個月份的日期變量，以便我們可以在整個代碼中引用它們。

// ... (JavaScript 代碼同上) ...

現(xiàn)在，讓我們創(chuàng)建一個方法，該方法將負責在分頁到另一個月份時重新計算日歷日期并重新渲染日歷。我們將調(diào)用該函數(shù) createCalendar。此方法將接受兩個屬性——年份和月份——并且基于此，日歷將使用新數(shù)據(jù)重新渲染，而無需重新加載頁面。

該方法將替換標題內(nèi)容以始終顯示選定的月份標簽。

// ... (JavaScript 代碼同上) ...

然后它將獲取日歷日期容器并刪除所有現(xiàn)有日期。

// ... (JavaScript 代碼同上) ...

清除日歷后，它將使用我們之前創(chuàng)建的方法計算應(yīng)該顯示的新日期。

// ... (JavaScript 代碼同上) ...

最后，它將為每一天附加一個日期元素。

// ... (JavaScript 代碼同上) ...

還缺少一個邏輯部分：一個 removeAllDayElements 方法，用于清除現(xiàn)有的日歷。此方法獲取第一個日歷日期元素，將其刪除，并將其替換為另一個元素。從那里開始，它將循環(huán)運行邏輯，直到刪除所有元素。

// ... (JavaScript 代碼同上) ...

現(xiàn)在，當我們想要更改月份時，我們可以重用該邏輯?；叵胍幌碌谝徊?，當時我們?yōu)榻M件創(chuàng)建了一個靜態(tài)模板。我們添加了這些元素：

// ... (HTML 代碼同上) ...

這些是月份之間分頁的控件。要更改它，我們需要存儲當前選定的月份。讓我們創(chuàng)建一個變量來跟蹤它是什么，并將其初始值設(shè)置為本月。

// ... (JavaScript 代碼同上) ...

現(xiàn)在，為了使選擇器工作，我們需要一些 JavaScript。為了使其更易于閱讀，我們將創(chuàng)建另一個名為 initMonthSelectors 的方法，并將邏輯保留在那里。此方法將向選擇器元素添加事件偵聽器。它將偵聽點擊事件并將 selectedMonth 的值更新為新選定月份的名稱，然后使用正確的年份和月份值運行 createCalendar 方法。

// ... (JavaScript 代碼同上) ...

就是這樣！我們的日歷準備好了。雖然這很好，但如果我們可以標記當前日期以便它從其余日期中脫穎而出，那就更好了。這應(yīng)該不難。我們已經(jīng)在設(shè)置當前月份之外的日期樣式，所以讓我們做類似的事情。

我們將創(chuàng)建一個設(shè)置為今天的變量：

// ... (JavaScript 代碼同上) ...

然后，在 appendDay 方法中，我們在應(yīng)用當前月份之外日期的類時，必須添加另一個檢查以查看該元素是否為今天的日期。如果是，我們將向該元素添加一個類：

// ... (JavaScript 代碼同上) ...

現(xiàn)在我們可以設(shè)置樣式了！

// ... (CSS 代碼同上) ...

瞧，我們完成了！查看最終演示以查看所有內(nèi)容的組合。

查看演示

以上是如何使用真實數(shù)據(jù)進行每月日歷的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！