Python 模塊介紹之calendar

alendar 是與日歷相關(guān)的模塊，該模塊定義了很多類(lèi)型，主要包括：Calendar、TextCalendar、HTMLCalendar，其中 Calendar 是 TextCalendar 和 HTMLCalendar 的基類(lèi)，這些類(lèi)有著十分豐富的日歷處理方法。

calendar 模塊

對(duì)于簡(jiǎn)單的文本日歷，我們使用 calendar 模塊直接調(diào)用的方法或?qū)傩约纯桑旅鎭?lái)具體看一下。

setfirstweekday(firstweekday)

設(shè)置每一周的開(kāi)始（0 表示星期一，6 表示星期天），calendar 提供了 MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY 和 SUNDAY 幾個(gè)常量方便使用。例如，設(shè)置每周的第一天為星期天，示例如下：

import calendar
calendar.setfirstweekday(calendar.SUNDAY)

firstweekday()

返回當(dāng)前設(shè)置的每星期的第一天的數(shù)值，默認(rèn)為星期一。示例如下：

import calendar
print(calendar.firstweekday())

isleap(year)

如果 year 是閏年則返回 True，否則返回 False。示例如下：

import calendar
print(calendar.isleap(9102))

leapdays(y1, y2)

返回在范圍 y1 至 y2 （包含 y1 和 y2 ）之間的閏年的年數(shù)，其中 y1 和 y2 是年份。示例如下：

import calendar
print(calendar.leapdays(1945,2019))

weekday(year, month, day)

返回一周中的某一天（ 0 ~ 6 代表周一至周日）。示例如下：

import calendar
print(calendar.weekday(2019,10,1))

monthrange(year, month)

返回指定年、月份第一天是星期幾和這個(gè)月的天數(shù)。示例如下：

import calendar
print(calendar.monthrange(2019, 10))

monthcalendar(year, month)

返回表示一個(gè)月的日歷的矩陣，每一行代表一周，此月份外的日子由零表示，每周默認(rèn)從周一開(kāi)始，可使用 setfirstweekday() 改變默認(rèn)值。示例如下：

import calendar
print(calendar.monthcalendar(2019,10))

prmonth(theyear, themonth, w=0, l=0)

打印由 month() 返回的一個(gè)月的日歷，每日寬度間隔為 w 字符，l 是每星期的行數(shù)。示例如下：

import calendar
print(calendar.prmonth(2019,10))

prcal(year, w=0, l=0, c=6, m=3)

打印由 calendar() 返回的整年的日歷。示例如下：

import calendar
print(calendar.prcal(2019))

day_name

在當(dāng)前的語(yǔ)言環(huán)境下表示星期幾的列表。示例如下：

import calendar
print(calendar.day_name[0])

day_abbr

在當(dāng)前語(yǔ)言環(huán)境下表示星期幾縮寫(xiě)的列表。示例如下：

import calendar
print(calendar.day_abbr[0])

month_name

在當(dāng)前語(yǔ)言環(huán)境下表示一年中月份的列表，一月的月號(hào)為 1，它的長(zhǎng)度為 13 且 month_name[0] 是空字符串。示例如下：

import calendar
print(calendar.month_name[1])

month_abbr

在當(dāng)前語(yǔ)言環(huán)境下表示月份簡(jiǎn)寫(xiě)的列表。示例如下：

import calendar
print(calendar.month_abbr[1])

Calendar 類(lèi)

Calendar 對(duì)象提供了一些可被用于準(zhǔn)備日歷數(shù)據(jù)格式化的方法，這個(gè)類(lèi)本身不執(zhí)行任何格式化操作，這部分任務(wù)應(yīng)由子類(lèi)來(lái)完成，下面具體看一下。

iterweekdays()

返回一個(gè)迭代器，迭代器的內(nèi)容為一星期的數(shù)字。示例如下：

from calendar import Calendar
c=Calendar()
print(list(c.iterweekdays()))

itermonthdates(year, month)

返回一個(gè)迭代器，迭代器的內(nèi)容為 year 年 month 月（1-12）的日期。示例如下：

from calendar import Calendar
c=Calendar()
print(list(c.itermonthdates(2019,10)))

itermonthdays2(year, month)

返回一個(gè)迭代器，迭代器的內(nèi)容與 itermonthdates() 類(lèi)似為 year 年 month 月的日期，但不受 datetime.date 范圍的限制，迭代器中的元素為一個(gè)由日期和代表星期幾的數(shù)字組成的的元組。示例如下：

from calendar import Calendar
c=Calendar()
print(list(c.itermonthdays2(2019,10)))

itermonthdays3(year, month)

返回一個(gè)迭代器，迭代器的內(nèi)容與 itermonthdates() 類(lèi)似為 year 年 month 月的日期，不受 datetime.date 范圍的限制，迭代器的元素為一個(gè)由年、月、日組成的元組。示例如下：

from calendar import Calendar
c=Calendar()
print(list(c.itermonthdays3(2019,10)))

TextCalendar 類(lèi)

TextCalendar 對(duì)象提供了一些生成純文本日歷的方法，下面具體看一下。

formatmonth(theyear, themonth, w=0, l=0)

返回一個(gè)多行字符串來(lái)表示指定年月的日歷，w 為日期的寬度，始終保持日期居中，l 指定了每星期占用的行數(shù)；以上這些還依賴(lài)于構(gòu)造器或者 setfirstweekday() 方法指定的周的第一天是哪一天。示例如下：

from calendar import TextCalendar
tc=TextCalendar()
print(tc.formatmonth(2019,10))

prmonth(theyear, themonth, w=0, l=0)

與 formatmonth() 方法一樣，返回一個(gè)月的日歷。示例如下：

from calendar import TextCalendar
tc=TextCalendar()
print(tc.prmonth(2019,10))

formatyear(theyear, w=2, l=1, c=6, m=3)

返回一個(gè)多行字符串，這個(gè)字符串為一個(gè) m 列日歷，可選參數(shù) w、l、c 分別表示日期列數(shù)、周的行數(shù)、月之間的間隔；以上這些還依賴(lài)于構(gòu)造器或者 setfirstweekday() 指定哪一天為一周的第一天。示例如下：

from calendar import TextCalendar
tc=TextCalendar()
print(tc.formatyear(2019))

pryear(theyear, w=0, l=0, c=6, m=3)

與 formatyear() 方法一樣，返回一整年的日歷。示例如下：

from calendar import TextCalendar
tc=TextCalendar()
print(tc.pryear(2019))

HTMLCalendar 類(lèi)

HTMLCalendar 對(duì)象提供了一些生成 HTML 日歷的方法，下面具體看一下。

formatmonth(theyear, themonth, withyear=True)

返回一個(gè) HTML 表格作為指定年月的日歷，withyear 為 True，則年份將會(huì)包含在表頭，否則只顯示月份。示例如下：

from calendar import HTMLCalendar
hc=HTMLCalendar()
print(hc.formatmonth(2019,10))

formatyear(theyear, width=3)

返回一個(gè) HTML 表格作為指定年份的日歷，width 用于規(guī)定每一行顯示月份的數(shù)量。示例如下：

from calendar import HTMLCalendar
hc=HTMLCalendar()
print(hc.formatyear(2019))

formatyearpage(theyear, width=3, css=’calendar.css’, encoding=None)

返回一個(gè)完整的 HTML 頁(yè)面作為指定年份的日歷，width 用于規(guī)定每一行顯示的月份數(shù)量，css 為層疊樣式表的名字，如果不使用任何層疊樣式表，可以使用 None，encoding 為輸出頁(yè)面的編碼 (默認(rèn)為系統(tǒng)的默認(rèn)編碼)。示例如下：

家好，很高興又見(jiàn)面了，我是"高級(jí)前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!

1.什么是 FullCalendar

FullCalendar 是一個(gè)用于創(chuàng)建日歷界面的 JavaScript 開(kāi)源庫(kù)，支持全尺寸拖放（Full-sized drag & drop），同時(shí)具有適用于 React 和許多其他框架的適配器，比如：React、Vue、Angular 、Web Component等以及一流的 TypeScript 支持。

FullCalendar 目前非常受歡迎，除了易于使用之外還具有許多內(nèi)置功能和用于充分定制的插件，而官方提供的插件數(shù)量已經(jīng)達(dá)到了 25+。

目前 FullCalendar 在 Github 上通過(guò) MIT 協(xié)議開(kāi)源，有超過(guò) 17.3k 的 star、3.6k 的 fork、項(xiàng)目依賴(lài)量 63.8k、代碼貢獻(xiàn)者 100+、妥妥的前端優(yōu)質(zhì)開(kāi)源項(xiàng)目。

2.為什么要 FullCalendar

2.1 不同視圖支持

FullCalendar 庫(kù)提供各種日歷視圖，例如：每月、每周和每天，還具有 TimeGrid 、 DayGrid 、TimeLine、Multi-Month Stack 等等視圖模式，同時(shí)允許自定義視圖，非常適合構(gòu)建日程安排界面。

比如下面的代碼設(shè)置了視圖模式為 dayGridMonth：

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendar=new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
});

頁(yè)面渲染視圖如下：

2.2 豐富的插件系統(tǒng)

FullCalendar 具有多種用于添加額外功能的插件。

插件系統(tǒng)很有用，因?yàn)殚_(kāi)發(fā)者不需要下載整個(gè)代碼庫(kù)，但可以選擇要包含的插件。這樣做可以縮小代碼庫(kù)的大小，并使管理依賴(lài)項(xiàng)變得更容易。

一些主流的插件包括：

@fullcalendar/interaction：提供點(diǎn)擊、觸摸、拖動(dòng)交互。
@fullcalendar/daygrid：提供每月、每日和每周的日歷視圖。
@fullcalendar/timegrid：提供時(shí)間網(wǎng)格視圖。
@fullcalendar/list：提供簡(jiǎn)化的列表視圖。
@fullcalendar/vue3：支持 Vue3
@fullcalendar/vue：支持 Vue2
@fullcalendar/angular：支持 Angular 組件
@fullcalendar/react：支持 React 組件

下面是在 Vue3 中使用 FullCalendar 的代碼示例：

<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
  components: {
    FullCalendar
     // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

3.使用 FullCalendar

3.1 基礎(chǔ)用法

首先，需要安裝核心 npm 包：

yarn add @fullcalendar/daygrid @fullcalendar/react

接下來(lái)，添加 FullCalendar 組件并包含日期網(wǎng)格插件：

import FullCalendar from '@fullcalendar/react';
import daygridPlugin from '@fullcalendar/daygrid';

export const MyCalendar=()=> {
  return (
    <div>
      <FullCalendar plugins={[daygridPlugin]} />
    </div>
  );
};

下面是設(shè)置以后的基礎(chǔ)視圖：

接下來(lái)可以自定義頂部工具欄并添加每周和每日視圖。 FullCalendar 提供了 headerToolbar 屬性，開(kāi)發(fā)者可以使用它來(lái)選擇想要查看的控件：

<FullCalendar
  headerToolbar={{
    start: 'today prev next',
    end: 'dayGridMonth dayGridWeek dayGridDay',
  }}
  plugins={[daygridPlugin]}
  views={['dayGridMonth', 'dayGridWeek', 'dayGridDay']}
/>

headerToolbar 對(duì)象接受 start, center、end 字段，每個(gè)字段都必須是可以包含標(biāo)題、上一個(gè)、下一個(gè)、上一年、下一年、今天和日歷視圖名稱(chēng)（如 dayGridMonth）的字符串。

開(kāi)發(fā)者可以按照想要的任何順序排列這些字段，F(xiàn)ullCalendar 將正確的渲染。

3.2 添加事件交互

為了給日歷組件添加交互，需要首先添加 @fullcalendar/interaction 插件：

yarn add @fullcalendar/interaction

同時(shí)需要將 editable 和 selectable 屬性設(shè)置為 true 并將事件處理程序放置在 events 屬性中。

import FullCalendar from '@fullcalendar/react';
import daygridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useState } from 'react';
import { v4 as uuid } from 'uuid';

export const MyCalendar=()=> {
  const [events, setEvents]=useState([]);

  const handleSelect=(info)=> {
    const { start, end }=info;
    const eventNamePrompt=prompt('Enter, event name');
    if (eventNamePrompt) {
      setEvents([
        ...events,
        {
          start,
          end,
          title: eventNamePrompt,
          id: uuid(),
        },
      ]);
    }
  };

  return (
    <div>
      <FullCalendar
        editable
        selectable
        events={events}
        // 事件處理
        select={handleSelect}
        headerToolbar={{
          start: 'today prev next',
          end: 'dayGridMonth dayGridWeek dayGridDay',
        }}
        plugins={[daygridPlugin, interactionPlugin]}
        views={['dayGridMonth', 'dayGridWeek', 'dayGridDay']}
      />
    </div>
  );
};

以上代碼首先添加了一個(gè) handleSelect 回調(diào)，其接受 info 對(duì)象作為參數(shù)，該對(duì)象包含有關(guān)用戶(hù)選擇日期的信息。

Prompt() 函數(shù)向用戶(hù)詢(xún)問(wèn)事件標(biāo)題并創(chuàng)建一個(gè)包含開(kāi)始、結(jié)束、標(biāo)題和 ID 的新事件。而 id 屬性需要是唯一的字符串，而這里引入了 uuid 三方庫(kù)。

要添加編輯事件，可以遵循與上面類(lèi)似的模式，只需要使用 eventClick 屬性，而拖放操作則可以使用 eventChange 。

參考資料

https://github.com/fullcalendar/fullcalendar

https://isamatov.com/react-fullcalendar-tutorial/

https://fullcalendar.io/docs/plugin-index

https://fullcalendar.io/docs/vue

https://medevel.com/os-js-calendar/

造項(xiàng)目

CodePen原項(xiàng)目Calendar

場(chǎng)景

自己寫(xiě)個(gè)聚合首頁(yè)，方便自己統(tǒng)一管理常用的網(wǎng)頁(yè)工具，參考的是Mac OS的儀表盤(pán)，如下：

雖然短時(shí)間沒(méi)法做到這么精美，但是起碼功能得差不多吧，時(shí)鐘與天氣都已經(jīng)OK，在做日歷的時(shí)候覺(jué)得比較麻煩，就去CodePen找找看，便有了如此。

源碼遷移

CodePen上的原項(xiàng)目本身難度不高，繁瑣在理清楚日歷邏輯（原作者邏輯），以及將此作者項(xiàng)目中關(guān)于DOM的操作轉(zhuǎn)換成vue的模板操作。

先看邏輯

本月1號(hào)之前有可能存在上個(gè)月的尾巴（假如我們需要將日歷方格全部填滿(mǎn)）
本月內(nèi)容以及當(dāng)天的樣式
本月最后一天后，也有可能會(huì)有下個(gè)月的月頭

分別對(duì)應(yīng)了原項(xiàng)目中這三個(gè)函數(shù)，原作者也有注釋?zhuān)?/p>

lastDayOfLastMonth 上個(gè)月最后一天，這里應(yīng)該是原作者命名問(wèn)題，應(yīng)該是lastDayOfPreviousMonth
firstDayOfMonth 本月第一天
lastDateOfMonth 本月最后一天

i 是本月第幾天，走了一個(gè)do while循環(huán)

上面的意思就是第一天時(shí)候把上個(gè)月尾巴給加到表格標(biāo)簽里面（最后統(tǒng)一加）

上面特殊處理的今天，其他本月內(nèi)容都是常規(guī)加入，可以從class上面區(qū)分看出來(lái)。

上面的意思就是當(dāng)本月最后一天的時(shí)候，順便把下個(gè)月的月頭加進(jìn)來(lái)。

漏了，每行的首尾控制

這里說(shuō)一下，因?yàn)槿諝v是從周日到周六為一行，所以作者這里判斷方案是Sunday與Saturday。

上面這些就是核心代碼，當(dāng)然還有下個(gè)月與上個(gè)月切換，不過(guò)就是清空當(dāng)前日歷再來(lái)一次，這些看源碼即可，沒(méi)有太多邏輯問(wèn)題。

轉(zhuǎn)vue

轉(zhuǎn)起來(lái)難度不是很大，更多的是思維變化。

原項(xiàng)目是直接操作DOM，我們這里通過(guò)數(shù)據(jù)操作模板（姑且區(qū)分下），所以需要構(gòu)建一個(gè)對(duì)象來(lái)承接每個(gè)”天“。

我們申明一個(gè)日歷數(shù)組，由于日歷是由若干個(gè)星期組成，所以我們就命名為：weeks，然后每個(gè)”天“給對(duì)象，屬性如下：

那么我們的”天“會(huì)有這幾種情況：

常規(guī)天
今天
上月或下月的天

接下來(lái)，我們把原邏輯里面對(duì)應(yīng)的html，換成weeks，tr換成week（每次新建一個(gè)空數(shù)組），在周日或者第一天時(shí)候把week置空，在周六或本月最后一天把week閉合并且讓weeks來(lái)push一下week，循環(huán)走完，我們一個(gè)月的關(guān)于weeks、week以及”天“的處理就完成了。

核心邏輯如下：

注意跨年問(wèn)題

最終效果

源碼請(qǐng)直接看原作者項(xiàng)目，感謝閱讀。

在線(xiàn)咨詢(xún)

上一篇：css你想到和想不到的‘居中’
下一篇：HTML+CSS 二級(jí)導(dǎo)航

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

Python 模塊介紹之calendar

calendar 模塊

setfirstweekday(firstweekday)

firstweekday()

isleap(year)

leapdays(y1, y2)

weekday(year, month, day)

monthrange(year, month)

monthcalendar(year, month)

prmonth(theyear, themonth, w=0, l=0)

prcal(year, w=0, l=0, c=6, m=3)

day_name

day_abbr

month_name

month_abbr

Calendar 類(lèi)

iterweekdays()

itermonthdates(year, month)

itermonthdays2(year, month)

itermonthdays3(year, month)

TextCalendar 類(lèi)

formatmonth(theyear, themonth, w=0, l=0)

prmonth(theyear, themonth, w=0, l=0)

formatyear(theyear, w=2, l=1, c=6, m=3)

pryear(theyear, w=0, l=0, c=6, m=3)

HTMLCalendar 類(lèi)

formatmonth(theyear, themonth, withyear=True)

formatyear(theyear, width=3)

formatyearpage(theyear, width=3, css=’calendar.css’, encoding=None)

1.什么是 FullCalendar

2.為什么要 FullCalendar

2.1 不同視圖支持

2.2 豐富的插件系統(tǒng)

3.使用 FullCalendar

3.1 基礎(chǔ)用法

3.2 添加事件交互

參考資料

造項(xiàng)目

場(chǎng)景

源碼遷移

您的項(xiàng)目需求