CCS小技巧，如何使用CSS Grid制作簡單的日歷，簡單有趣

歷是人類文明的重要工具之一。然后可以記住許多重要事件，并從事件的確切日期追溯到真相。

在本文中，我們將學習如何利用CSS Grid系統（最近在前端開發人員中流行的一種布局技術）來使用HTML和CSS設計日歷。以下是日歷的最終設計效果：

制作HTML

從圖片中我們可以看出日歷包含三個部分：月指標；工作日/周末指標；日期本身。

編寫HTML的最佳方法是遵循正確的感覺。現在，我們將根據以下三個部分創建HTML：

我們還應該能夠看到日歷上網格的七個列的需求。

我們將重點放在上面的代碼.day-of-week和.date-grid上面的代碼上，因為現在我們只在談論網格。

網格排列

有兩種創建CSS Box的方法。第一種方法是在內部組合元素.day-of-week并.date-grid 成為一個選擇器。如果要這樣做，我們可以安排display: grid。如果執行此操作，HTML將是什么樣的：

我們應該避免這種方法，因為HTML失去了它的結構意義，因為它結合起來，讓我們嘗試保存.day-of-week并date-grid 作為一個獨立的元素，如果可能的。因為這使得我們更容易閱讀/理解已經寫入的代碼。這是最好的HTML結構：

創建具有簡單結構的CSS網格的最佳方法是使用子網格。但是，大多數瀏覽器尚不支持子網格。同時，最好的辦法就是讓兩個獨立的電網，一個是.day-of-week和一個.date-grid。因此，它可以解釋.day-of-week并.date-grid可以使用相同的七個柱網。

實際日期調整

2019年2月從星期五開始。如果我們希望日歷正確無誤，則需要確保：2019年2月1日為星期五；2019年2月2日為星期六；2019年2月3日是星期日等等...

使用CSS Grid，可以簡化這一部分。

CSS Grid的放置算法在某種程度上遵循以下規則（如果我們未將其設置grid-auto-flow為dense）：放置具有顯式grid-column或grid-row第一位的項目；根據最后放置的項目填寫其余部分

這表示：如果第一項屬于第6列；第二項將放置在第7列中。；第三項將放置在第一行的下一行中（因為只有七列）；第四項將放置在第2列中等等...

因此，如果我們將2月1日放置在第六列（星期五），則其余日期將正確放置。像這樣的簡單邏輯...

以下是整個使用的代碼：源代碼HTML

歷效果圖

在前端網頁設計HTML中,無論是css還是JavaScript都是非常重要的,但是有些動態效果只能由我們的js來實現,今天小編就給大家一個厲害的干貨,希望大家多多關注小編呢!

js日歷

十二個月份,下方是每個月內容框,當鼠標移入上放月份時,下方內容框自動變換內容.

各大博客網站,均有此JavaScript的代碼實現,是基礎入門必不可少的技能!

JavaScript代碼

JavaScript部分

css部分

HTML部分

是不是躍躍欲試了呢?

小伙伴們要自己動動手敲一遍代碼哦!前端代碼也是實戰出成果的!!!小編會一直支持大家學習,也希望大家多多支持小編哦,嘻嘻(#^.^#),關注小編

情提示: 測試代碼中，右尖括號（>）表示命令行中輸入的命令；單獨一行并以井字符（#）開頭的為輸出內容；庫的導入僅在本文的第一個測試代碼中展現，其他代碼塊均省略庫的導入代碼。

系統類型: Windows 10
python 版本: Python 3.9.0

calendar 模塊提供了與日歷有關的函數與類。其中既包含了可方便用于計算或信息處理的日歷格式，也包含了可直觀展示的日歷格式，甚至有用于網頁展示的 html 格式.

calendar 模塊提供了三個類，也提供了一些屬性和函數進行快捷操作。calendar 模塊提供的函數將分布在同功能的類中介紹。

calendar 模塊提供了 4 個屬性，所有屬性返回的數據都是可迭代對象:

calendar.day_name : 在當前語言環境下表示星期幾的數組
calendar.day_abbr : 在當前語言環境下表示星期幾縮寫的數組
calendar.month_name : 在當前語言環境下表示一年中月份的數組。這里為了現實習慣，一月的月號為 1，所以此數組的元素個數為 13 個，其中索引值為 0 的元素的值為空
calendar.month_abbr : 在當前語言環境下表示月份簡寫的數組。這里為了現實習慣，一月的月號為 1，所以此數組的元素個數為 13 個，其中索引值為 0 的元素的值為空

print(list(calendar.day_name))
# ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
print(list(calendar.day_abbr))
# ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
print(list(calendar.month_name))
# ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
print(list(calendar.month_abbr))
# ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

Calendar 類

class calendar.Calendar(firstweekday=0)
參數:
    firstweekday: int, 指定一周的第一天, 0 表示星期一, 6 表示星期天, 默認為 0

創建已 Calendar 對象，Calendar 對象提供了一些方法，這些方法可以用于各種場景的與日歷有關的數據，得到的數據并不便于查看，但方便計算。

iterweekdays()

iterweekdays()
返回值:
    可迭代對象

返回一個可迭代對象，包含一星期對應的枚舉值，排序在第一個元素的枚舉值與類參數 firstweekday 的值一致。

import calendar

cc = calendar.Calendar(1)
print(list(cc.iterweekdays()))
# [1, 2, 3, 4, 5, 6, 0]

cc = calendar.Calendar(4)
print(list(cc.iterweekdays()))
# [4, 5, 6, 0, 1, 2, 3]

PS: 無論一周的第一天設置為星期幾，這與七天中每天對應的枚舉值無關。星期一的枚舉值一定是 0，星期二的枚舉值一定是 1，以此類推，星期天的枚舉值一定是 6。

itermonthdates()

itermonthdates(year, month)
參數:
    year: 年
    month: 月
返回值:
    可迭代對象

返回一個可迭代對象，包含某年某月當月的全部日期，日期對象為 datetime 對象。

若本月月初和月末不是一個完整的周，也會返回其他月份的日期用于組成一個完整的日期。也就是說某一周的日期里，包含指定月份的日期，也包含其他月份的日期，那么本方法返回的日期中也包含這些在同一周內的其他月份的日期。

cc = calendar.Calendar(0)
print(list(cc.itermonthdates(2021, 1)))
# [
# datetime.date(2020, 12, 28), datetime.date(2020, 12, 29),
# datetime.date(2020, 12, 30), datetime.date(2020, 12, 31),
# datetime.date(2021, 1, 1), datetime.date(2021, 1, 2),
# ......
# datetime.date(2021, 1, 30), datetime.date(2021, 1, 31)
# ]

PS: 此模塊的一些方法返回值內容過多，此文章將會省略一部分返回內容。

itermonthdays()

itermonthdays(year, month)
itermonthdays2(year, month)
itermonthdays3(year, month)
itermonthdays4(year, month)
參數:
    year: 年
    month: 月
返回值:
    可迭代對象

本方法是四胞胎兄弟，它們都返回一個可迭代對象，包含某年某月當月的全部日期。但是它們返回的元素的內容卻不盡相同。

它們與 itermonthdates() 函數類似，在返回的日期中，月初和月末那一周種同周不同月的日期也會展出出來，但是與 itermonthdates() 函數不同的是，不在指定月份的日期對象展示的日期的值是 0。

itermonthdays() 函數，可稱呼為一號函數，可迭代對象的元素為日期對應的天數。

itermonthdays2() 函數，可稱呼為二號函數，可迭代對象的元素為由日期對應的天數和當天星期幾的枚舉值組成的元組。例如: (1, 5) 表示本月的一號，星期五。

itermonthdays3() 函數，可稱呼為三號函數，可迭代對象的元素為由年、月、日組成的元組。例如: (2021, 1, 1) 表示2021年1月1日。

itermonthdays4() 函數，可稱呼為四號函數，可迭代對象的元素為由年、月、日和當天星期表示的枚舉值組成的元組。例如: (2021, 1, 1, 5) 表示2021年1月1日周六。

cc = calendar.Calendar(0)
'''一號函數'''
print(list(cc.itermonthdays(2021, 1)))
# [0, 0, 0, 0, 1, 2, ......, 30, 31]

'''二號函數'''
print(list(cc.itermonthdays2(2021, 1)))
# [(0, 0), (0, 1), (0, 2), (0, 3), (1, 4), (2, 5), ......, (30, 5), (31, 6)]

'''三號函數'''
print(list(cc.itermonthdays3(2021, 1)))
# [(2020, 12, 28), (2020, 12, 29), (2020, 12, 30), (2020, 12, 31), (2021, 1, 1),
#  (2021, 1, 2), (2021, 1, 3), (2021, 1, 4), (2021, 1, 5),
# ......
#  (2021, 1, 28), (2021, 1, 29), (2021, 1, 30), (2021, 1, 31)]

'''四號函數'''
print(list(cc.itermonthdays4(2021, 1)))
# [(2020, 12, 28, 0), (2020, 12, 29, 1), (2020, 12, 30, 2),
#  (2020, 12, 31, 3), (2021, 1, 1, 4), (2021, 1, 2, 5),
# ......
#  (2021, 1, 29, 4), (2021, 1, 30, 5), (2021, 1, 31, 6)]

獲取指定年月的周列表

monthdatescalendar(year, month)
monthdays2calendar(year, month)
monthdayscalendar(year, month)
參數:
    year: 年
    month: 月
返回值:
    列表, 一個多維列表

以上三個函數都返回指定年月的日期數據，所返回的數據是一個列表，在列表內部，列表的元素是以周為單位分割的子列表，子列表中的元素才是日期數據。

以上三個函數的不同點就在子列表中的日期數據:

monthdatescalendar() 函數可以簡稱為日期數據函數，因為這個函數的返回值內的日期數據是以 datetime.date 對象展示的。

monthdayscalendar() 函數可以簡稱為一號函數，這個函數的返回值內的日期數據是以代表日期的數字的形式展示的。

monthdays2calendar() 函數可以簡稱為二號函數，這個函數的返回值內的日期數據是以代表日期的數字和當天星期表示的枚舉值組成的二元元組的形式展示的。

在一號函數和二號函數中，如果某個日期數據不是指定年月內的日期，那么代表日期的數字將是 0。

cc = calendar.Calendar(0)

'''返回 datetime.date'''
print(cc.monthdatescalendar(2021, 1))
# [
#   [datetime.date(2020, 12, 28), ......, datetime.date(2021, 1, 3)],
#   ......
#   [datetime.date(2021, 1, 25), ......, datetime.date(2021, 1, 31)]
# ]

'''返回日期代表的數字'''
print(cc.monthdayscalendar(2021, 1))
# [
#   [0, 0, 0, 0, 1, 2, 3], ......, [25, 26, 27, 28, 29, 30, 31]
# ]

'''返回日期代表的數字與當天星期表示的枚舉值組成的二元元組'''
print(cc.monthdays2calendar(2021, 1))
# [
#   [(0, 0), (0, 1), (0, 2), (0, 3), (1, 4), (2, 5), (3, 6)],
#   ......
#   [(25, 0), (26, 1), (27, 2), (28, 3), (29, 4), (30, 5), (31, 6)]
# ]

在 calendar 模塊中，calendar.monthcalendar(year, month) 快捷函數與 monthdayscalendar() 方法類似，返回值相同。

獲取可用于格式化的指定年的數據

yeardatescalendar(year, width=3)
yeardayscalendar(year, width=3)
yeardays2calendar(year, width=3)
參數:
    year: 年
    width: 關鍵字參數, 每幾個月分為一組, 默認為 3
返回值:
    列表, 多維列表

返回一個多維列表，列表內容為指定年的日期數據。列表的元素是以參數 width 設定的月份分組，指定數量的月份為一組，所以列表的元素個數就是分組個數，為了方便區分多維度(層級)的列表，我們可以將整個列表稱為年列表，年列表下代表月份分組的子列表稱為月分組子列表。當前格式為: [[月分組子列表], ......, [月分組子列表]]。

月分組子列表的元素就是屬于本組的月份，月份數據格式也是列表，可以稱為月子列表。月分組子列表格式為: [[月子列表], ......, [月子列表]]。

月子列表的元素是屬于本月的周，周的數據格式依舊是列表，可以稱為周子列表。月子列表格式為: [[周子列表], ......, [月子列表]]。

對于三個函數而言，以上部分數據格式都相同，三個函數不同的就是周子列表中的元素，沒錯，就是日期數據。這里的周子列表中的周數據也是秉承著 Calendar 類的特定，屬于本周但是不屬于本月的日期也會展示，但是若是展示日期代表的數字時，會展示為 0。

yeardatescalendar() 函數返回值中的日期數據格式為 datetime.date 對象格式。yeardayscalendar() 函數返回值中日期數據為日期代表的數字。 yeardays2calendar() 函數返回值中日期數據為日期代表的數字與當天星期表示的枚舉值組成的二元元組。

'''備注: 返回數據過于龐大, 受限于篇幅, 測試示例中僅具體展示了列表格式'''
cc = calendar.Calendar(0)

'''日期數據為日期代表的數字'''
print(cc.yeardayscalendar(2021, width=2))
# [
#     [
#         [
#             [0, 0, 0, 0, 1, 2, 3], ......, [25, 26, 27, 28, 29, 30, 31],
#         ],
#         [
#             [1, 2, 3, 4, 5, 6, 7], ......, [22, 23, 24, 25, 26, 27, 28],
#         ],
#     ],
#     ......,
#     [
#         [
#             [1, 2, 3, 4, 5, 6, 7], ......, [29, 30, 0, 0, 0, 0, 0],
#         ],
#         [
#             [0, 0, 1, 2, 3, 4, 5], ......, [27, 28, 29, 30, 31, 0, 0],
#         ],
#     ],
# ]

'''日期數據為是以代表日期的數字和當天星期表示的枚舉值組成的二元元組'''
print(cc.yeardays2calendar(2021, width=2))
# [
#     [
#         [
#             [(0, 0), ......, (3, 6)], ......, [(25, 0), ......, (31, 6)],
#         ],
#         [
#             [(1, 0), ......, (7, 6)], ......, [(22, 0), ......, (28, 6)],
#         ],
#     ],
#     ......,
#     [
#         [
#             [(1, 0), ......, (7, 6)], ......, [(29, 0), ......, (0, 6)],
#         ],
#         [
#             [(0, 0), ......, (5, 6)], ......, [(27, 0), ......, (0, 6)],
#         ],
#     ],
# ]

'''日期數據為 datatime.data 對象'''
print(cc.yeardatescalendar(2021, width=2))
# [
#     [
#         [
#             [datetime.date(2020, 12, 28), ......, datetime.date(2021, 1, 3),],
#             ......,
#             [datetime.date(2021, 1, 25), ......, datetime.date(2021, 1, 31),],
#         ],
#         [
#             [datetime.date(2021, 2, 1)), ......, datetime.date(2021, 2, 7),],
#             ......,
#             [datetime.date(2021, 2, 22), ......, datetime.date(2021, 2, 28),],
#         ],
#     ],
#     ......,
#     [
#         [
#             [datetime.date(2021, 11, 1), ......, datetime.date(2021, 11, 7),],
#             ......,
#             [datetime.date(2021, 11, 29), ......, datetime.date(2021, 12, 5),],
#         ],
#         [
#             [datetime.date(2021, 11, 29), ......, datetime.date(2021, 12, 5),],
#             ......,
#             [datetime.date(2021, 12, 27), ......, datetime.date(2022, 1, 2),],
#         ],
#     ],
# ]

TextCalendar 類

class calendar.TextCalendar(firstweekday=0)
參數:
    firstweekday: int, 指定一周的第一天, 0 表示星期一, 6 表示星期天, 默認為 0

TextCalendar 實例化對象，可通過 TextCalendar 實例化對象提供的方法獲取純文本的日歷數據，通常用于查看，無法用于計算。

獲取一個月的日歷數據

formatmonth(theyear, themonth, w=0, l=0)
prmonth(theyear, themonth, w=0, l=0)
參數
    theyear: 年份
    themonth: 月份
    w: 日期寬度, 日期內容始終為居中
    l: 每星期占用的行數

formatmonth() 函數與 prmonth() 函數的目的都是給出指定年月當月的日歷數據，但是 formatmonth() 函數是以返回值的方式反饋的，prmonth() 函數則是直接打印數據。

tc = calendar.TextCalendar(0)

'''返回值'''
print(tc.formatmonth(2021, 1))
#     January 2021
# Mo Tu We Th Fr Sa Su
#              1  2  3
#  4  5  6  7  8  9 10
# 11 12 13 14 15 16 17
# 18 19 20 21 22 23 24
# 25 26 27 28 29 30 31

'''直接打印'''
tc.prmonth(2021, 1)
#     January 2021
# Mo Tu We Th Fr Sa Su
#              1  2  3
#  4  5  6  7  8  9 10
# 11 12 13 14 15 16 17
# 18 19 20 21 22 23 24
# 25 26 27 28 29 30 31

在 calendar 模塊的快捷函數中，calendar.prmonth(theyear, themonth, w=0, l=0) 與 prmonth() 方法相同，都是直接打印出整個月的日歷; 另一個快捷函數 calendar.month(theyear, themonth, w=0, l=0) 與 formatmonth() 方法相同，是返回指定月份的日歷。

獲取一年的日歷數據

formatyear(theyear, w=2, l=1, c=6, m=3)
pryear(theyear, w=2, l=1, c=6, m=3)
參數:
    theyear: 年份
    w: 日期寬度, 日期內容始終為居中
    l: 每星期占用的行數
    c: 月與月之間的間隔大小
    m: 每列可展示多少個月份

formatyear() 函數與 pryear() 函數的目的都是給出指定年的日歷數據，但是 formatyear() 函數是以返回值的方式反饋的，pryear() 函數則是直接打印數據。

年日歷數據格式可以看做是 12 個月日歷數據的匯總，因篇幅原因就不展示測試示例了。

同獲取指定月份日歷數據的兩個方法一樣，獲取指定年份的日歷數據也有兩個對應的快捷函數，calendar.prcal(year, w=0, l=0, c=6, m=3) 快捷函數對應 pryear() 方法，calendar.calendar(year, w=2, l=1, c=6, m=3) 快捷函數對應 formatyear() 方法。

HTMLCalendar 類

class calendar.HTMLCalendar(firstweekday=0)
參數:
    firstweekday: int, 指定一周的第一天, 0 表示星期一, 6 表示星期天, 默認為 0

HTMLCalendar 實例化對象，可以通過 HTMLCalendar 實例化對象提供的方法生成可以在網頁中展示的 HTML 日歷。并且也提供了一些屬性來修改各種標簽的類名，便于修改樣式。

formatmonth() 方法獲取一個展示指定月份日歷的 HTML 表格。

formatmonth(theyear, themonth, withyear=True)
參數:
    theyear: 年
    themonth: 月
    withyear: 布爾值, 默認為 True, 若為 True, 則表頭內容會包含年份, 否則不包含
返回值:
    str, 一個 table 標簽, 包含指定月份日歷數據

formatyear() 方法獲取一個展示指定年份日歷的 HTML 表格。

formatyear(theyear, width=3)
參數:
    theyear: 年
    width: 默認值為 3, 表示一行可顯示的月份數量
返回值:
    str, 一個 table 標簽, 包含指定年份日歷數據

formatyearpage() 方法返回一個完整的 HTML 頁面，其中主要內容就是指定年份日歷數據。

formatyearpage(theyear, width=3, css='calendar.css', encoding=None)
參數:
    theyear: 年
    width: 默認值為 3, 表示一行可顯示的月份數量
    css: 導入的 css 文件, 用于豐富日歷表樣式
    encoding: 編碼, 若為 None 則使用系統默認編碼
返回值:
    str, 一個完整的 HTML 頁面代碼

使用以上方法生成的 HTML 代碼中，每個標簽都會有 class 屬性，這些 class 屬性是系統默認的，可能會對項目產生沖突或者命名規則不匹配等情況，HTMLCalendar 類給出了一系列可修改屬性來改變這些標簽上的 class 屬性。

cssclasses : 對應星期一到星期天的 class 名稱列表，列表元素必須有 7 個，默認為: ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]
cssclass_noday : 在某周內，某日期在上月或下月時，此日期 td 標簽的 class
cssclasses_weekday_head : 正常日期的 td 標簽的 class，默認為當前日期代表的星期幾對應的 class 名。
cssclass_month_head: 月歷的表頭 class，默認為 month
cssclass_month : 月歷的 table 標簽的 class，默認為 month
cssclass_year : 年歷的 table 標簽的 class，默認為 year
cssclass_year_head : 年歷的表頭 class，默認為 year

將以下 css 復制粘貼到某個 css 文件中，并 python 代碼，在瀏覽器中打開生成的 HTML 文件，來查看使用 python 生成的日歷。

PS: 此 css 是在網絡中尋找的，使用的都是標簽名，對 HTMLCalendar 類中 class 相關內容無學習效果。

table {width: 100%;}
table tr th {text-align: center;font-size: 16px;background-color: #316497;color: #99ccff;}
table tr td {width: 10%;border: 1px solid #555;vertical-align: top;height: 120px;padding: 2px;}
td.noday {background-color: #eee;}
td.filled {background-color: #99ccff;}
td.today {border: 4px solid #316497;}
.dayNumber {font-size: 16px !important;font-weight: bold;}
a {font-size: 10px;}

運行以下 python 代碼:

hc = calendar.HTMLCalendar(0)

with open('./test.html', 'wb') as f:
    f.write(hc.formatyearpage(2021, css='calendar.css'))

在運行目錄下，會生成一個名稱為 test.html 的文件，在瀏覽器打開這個文件即可看到效果。

快捷函數

在類的介紹中，共有 5 個快捷函數與類中的方法含義一致，就直接在對應方法的介紹中說明了，沒有注意到的小伙伴可以向上翻閱回顧一下。剩余的快捷函數就留到這里一起介紹吧。

setfirstweekday() 函數設置一周是以周幾為起點計算的。設置時可以使用代表星期的常量或者枚舉值。

calendar.setfirstweekday(weekday)
參數:
    weekday: 表示星期的常量或枚舉值, 枚舉值即對應的數字, 星期一到星期日的
             常量則分別為:MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY 和 SUNDAY
返回值:
    None

firstweekday() 函數獲取一周的第一天是周幾。無論設置時使用的是代表星期的常量還是代表星期的枚舉值，返回的一定是枚舉值。

calendar.firstweekday()
返回值:
    int, 代表星期的枚舉值

isleap() 函數判斷指定年是否是閏年，如果是閏年則返回 True，否則返回 False。

calendar.isleap(year)
參數:
    year: 年份
返回值:
    布爾值

leapdays() 函數獲取某個范圍年份(y1 至 y2 年之間)的閏年數量。

calendar.leapdays(y1, y2)
參數:
    y1, y2: 年份
返回值:
    int

weekday() 函數獲取某年某月某日是星期幾，返回代表星期的枚舉值。

calendar.weekday(year, month, day)
參數:
    year: 年
    month: 月
    day: 日
返回值:
    int, 代表星期的枚舉值

weekheader() 函數列出所有星期的英文縮寫頭，可以使用參數 n 來指定縮寫單詞的字母數量。返回一個字符串，每個英文縮寫頭以雙空格隔開。

calendar.weekheader(n)
參數:
    n: 縮寫字母的數量
返回值:
    str, 每個縮寫以雙空格隔開

monthrange() 函數獲取指定年月當月第一天是星期幾，并獲取當月天數。將兩個數據組合成一個元組返回.

calendar.monthrange(year, month)
參數:
    year: 年
    month: 月
返回值:
    二元元組，某月第一天星期對應的枚舉值和當月天數組成

參考資料

官方文檔: https://docs.python.org/zh-cn/3/library/calendar.html#calendar.HTMLCalendar

源代碼: Lib/calendar.py

公眾號 : 「python雜貨鋪」，專注于 python 語言及其相關知識。發掘更多原創文章，期待您的關注。

在線咨詢

上一篇：用div+css做一個簡易的計算器，幾行js完成計算功能「217」
下一篇：HTML文檔元素

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商