項目中又遇到了自定義日歷，記錄下來，方便以后抄代碼~~0_0~

先看看長什么樣子

自定義日歷最重要的三步:

找到當前月有多少天,以及第一天是星期幾--灰常重要!

根據第一步找到需要填充的上月的日期,因為第一步中獲取的到下標剛好是需要顯示的上個月的天數

根據第一步,第二步獲取需要填充的下個月的日期

這里是基于moment實現的~

先介紹幾個moment方法:

一 ：moment.weekdaysMin()

獲取縮寫的星期

二： moment().daysInMonth()

獲取當前月的天數

三： moment().startOf('month').weekday()

獲取當前月第一天是星期幾

?四： moment().subtract(1, 'month')

獲取上個月月份

?四： moment().add(1, 'month')

獲取下個月月份

?上代碼---和業務強相關的代碼未放出來~~

index.jsx

import React, { useState } from 'react'; import classnames from 'classnames'; import { initCalendar } from '../utils'; import { Typography } from 'antd'; import Header from '../header';import './index.less';export default function Content({ className }) {const [days, setDays] = useState(initCalendar());const [active, setActive] = useState(0);return (<div className={classnames('content_container', className)}><div className={classnames('toolbar_container', className)}><Space><Button icon={<LeftOutlined />} type="text" onClick={handleUp} />{currentMonth.format(YEAER_MONTH_FORMAT_ZH)}<Button icon={<RightOutlined />} type="text" onClick={handleDown} /></Space></div><div className="content_wrapper">{days?.map((day, index) => (<divonClick={() => setActive(index)}className={classnames('day_container', {active: index === active,})}key={index}><Typography.Text>{day}</Typography.Text></div>))}</div></div>); }

index.less

.content_container {width: 100%;height: 100%;.toolbar_container {display: flex;justify-content: center;border: 1px solid rgb(215 215 215);background: white;}.calendar_content_wrapper {width: 100%;height: 100%;display: grid;border: 1px solid rgb(215 215 215);grid-template-columns: repeat(7, 1fr);background: white;.day_container {display: flex;justify-content: center;height: 100px;box-sizing: content-box;border-right: 1px solid rgb(215 215 215);border-bottom: 1px solid rgb(215 215 215);cursor: pointer;position: relative;.more {position: relative;width: 23px;height: 23px;border: 1px solid #000;left: 0;bottom: 0;}}.date_title {display: inline-block;width: 24px;height: 20px;line-height: 20px;margin-left: 4px;text-align: center;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgb(103 113 122);}.active {box-shadow: inset 0px 0px 5px 1px lightgreen;}.isToday {background: lightgreen;}} }

utils.js

import moment from 'moment'; import { YEAER_MONTH_FORMAT, INIT_DAYS } from './const'; /*** 獲取當前月的天數*/ console.log(moment().format('YYYY-MM-DD'), 'moment()'); export function getMonthDays() {return moment().daysInMonth(); }/*** 獲取當前月第一天是星期幾*/ export function getWeekDays() {return moment().startOf('month').weekday(); }/*** 獲取上個月份*/ export function getLastMonth() {return moment().subtract(1, 'month').format(YEAER_MONTH_FORMAT); }/*** 獲取下個月份*/ export function getNextMonth() {return moment().add(1, 'month').format(YEAER_MONTH_FORMAT); }/*** 初始化日歷*/ export function initCalendar() {// 當前月天數const totalDaysInMonth = getMonthDays();// 上個月天數let totalDaysInLastMonth = getMonthDays(getLastMonth());// 下個月開始日期let nextFirstDate = 1;const lastDays = [],currentDays = [],nextDays = [];// 當前月第一天是星期幾(索引值)/*** 這里的索引值剛剛好是需要填充的上月的天數*/const currentWeekDay = getWeekDays();for (let i = 0, len = 42; i < len; i++) {// 填充上個月的天數if (i < currentWeekDay) {lastDays.push(totalDaysInLastMonth);totalDaysInLastMonth--;}// 填充下個月的天數else if (i >= totalDaysInMonth + currentWeekDay) {nextDays.push(nextFirstDate);nextFirstDate++;}// 填充當前月天數else {currentDays.push(i - currentWeekDay + 1);}}// 上個月需要倒序顯示return [...lastDays.reverse(), ...currentDays, ...nextDays]; }

const.js

import moment from 'moment';export const YEAER_MONTH_FORMAT_ZH = 'YYYY年MM月'; export const YEAER_MONTH_FORMAT_EN = 'YYYY-MM'; export const YEAER_MONTH_FORMAT_FULL = 'YYYY-MM-DD'; // 獲取星期 const [_, ...rest] = moment.weekdaysMin();// 將星期天放置數組最后 export const WEEk_HEADER = [...rest, _];// 日歷布局為6 * 7單元格 export const TOTAL_LENGTH = 6 * 7;// 初始化一下下 export const INIT_DAYS = Array(TOTAL_LENGTH).fill(0).map((_, index) => +index + 1);

總結

以上是生活随笔為你收集整理的React 实现自定义日历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。