如何使用真實數據進行每月日曆

您是否曾經在網頁上看到日曆，並心想：“他們是怎麼做到的？”對於這樣的事情，使用插件甚至嵌入式Google 日曆是很自然的做法，但實際上，製作日曆比您想像的要簡單得多，只需要HTML、CSS 和JavaScript 三劍客即可。讓我們一起動手製作一個吧！

我已經在CodeSandbox 上設置了一個演示，您可以看到我們的目標。

查看演示首先，讓我們確定日曆的一些需求。它應該：

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

哦，我們將把它構建為一個單頁面應用程序，從Day.js（一個超輕量級的實用程序庫）獲取日曆日期。

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

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

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

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

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

讓我們在一個名為index.js 的文件中編寫這個。這可以放在項目文件夾中的src 文件夾內。我們確實會在項目根目錄中有一個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>
`;

讓我們繼續將此文件導入到位於項目根目錄中的index.html 文件中。這裡沒有什麼特別的事情發生。它僅僅是HTML 樣板，其中包含一個由我們的應用程序定位並註冊我們的index.js 文件的元素。

 

  
    <meta charset="UTF-8">
    <title>Parcel Sandbox</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 equal columns for weekdays and days cells */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

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

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

 import "./styles.css";

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

查看演示### 第二步：設置當前月份日曆

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

我們將：

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

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

 import dayjs from "dayjs";

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

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

因此，這是我們在導入語句之後添加到index.js 中的內容：

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

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

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

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

現在讓我們設置一些常量。具體來說，我們想構造一個一周中各天（即星期一、星期二、星期三等）的數組：

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

然後，我們想獲取當前年份並以YYYY 格式設置它：

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

我們想將當前月份設置為加載日曆時的起點，其中M 將月份格式化為數值（例如，一月等於1）：

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

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

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

第三步：創建日曆網格

這非常簡單，但現在真正的樂趣開始了，因為我們現在將使用日曆網格。讓我們停下來思考一下，為了正確地做到這一點，我們真正需要做什麼。

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

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

創建當前月份的日期

要將當前月份的日期添加到網格，我們需要知道當前月份有多少天。我們可以使用Day.js 提供的daysInMonth 方法來獲取它。讓我們為此創建一個輔助方法。

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

當我們知道這一點時，我們創建一個長度等於當前月份天數的空數組。然後我們映射()該數組並為每個數組創建一個日期對象。我們創建的對象具有任意結構，因此如果需要，您可以添加其他屬性。

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

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

將前一個月的日期添加到日曆網格

要獲取前一個月的日期以在當前月份中顯示，我們需要檢查選定月份的第一天是星期幾。這就是我們可以使用Day.js 的WeekDay 插件的地方。讓我們為此創建一個輔助方法。

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

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

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

將下一個月的日期添加到日曆網格

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

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

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

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

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

這是我們在index.js 中組合在一起的所有內容：

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

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

好的，所以我們有日曆的基本標記，我們需要顯示當前月份日期的數據，加上前一個月和下一個月的日期以填充空的網格項目。現在我們需要將日期附加到日曆！

我們已經有一個日曆網格的容器#calendar-days。讓我們獲取該元素。

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

現在，讓我們創建一個將日期附加到日曆視圖的功能。

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

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

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

就是這樣！我們的日曆現在應該按照我們想要的方式顯示了。

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

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

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

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

現在，讓我們創建一個方法，該方法將負責在分頁到另一個月份時重新計算日曆日期並重新渲染日曆。我們將調用該函數createCalendar。此方法將接受兩個屬性——年份和月份——並且基於此，日曆將使用新數據重新渲染，而無需重新加載頁面。

該方法將替換標題內容以始終顯示選定的月份標籤。

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

然後它將獲取日曆日期容器並刪除所有現有日期。

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

清除日曆後，它將使用我們之前創建的方法計算應該顯示的新日期。

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

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

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

還缺少一個邏輯部分：一個removeAllDayElements 方法，用於清除現有的日曆。此方法獲取第一個日曆日期元素，將其刪除，並將其替換為另一個元素。從那裡開始，它將循環運行邏輯，直到刪除所有元素。

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

現在，當我們想要更改月份時，我們可以重用該邏輯。回想一下第一步，當時我們為組件創建了一個靜態模板。我們添加了這些元素：

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

這些是月份之間分頁的控件。要更改它，我們需要存儲當前選定的月份。讓我們創建一個變量來跟踪它是什麼，並將其初始值設置為本月。

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

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

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

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

我們將創建一個設置為今天的變量：

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

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

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

現在我們可以設置樣式了！

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

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

查看演示

以上是如何使用真實數據進行每月日曆的詳細內容。更多資訊請關注PHP中文網其他相關文章！