custom-calendar-taro

一款基于 taro3 的自定义日历组件，支持周，月的展示，若有些许帮助，在下不胜荣幸，如有瑕疵，还请不吝赐教！

注意事项：因taro的swiper在h5下circular 为true时显示异常，所以若业务中涉及h5，可不用考虑此组件。

特性

• 支持周,月视图
• 可自定义渲染
• 支持类taroui的marks圆点标记
• 可指定一周的起点

安装

yarn add custom-calendar-taro

npm install custom-calendar-taro

使用

详细使用方式可见 pages 下的 index 及 custRender

import Taro from "@tarojs/taro";
import Calendar from "custom-calendar-taro";
import 'custom-calendar-taro/dist/index.css';

const Index = () => {
  return (
    <Calendar
      marks={[
        { value: '2022-09-21', color: 'red' },
        { value: '2022-09-22', color: 'pink' },
        { value: '2022-09-23', color: 'gray' },
        { value: '2022-09-24', color: 'yellow' },
        { value: '2022-09-25', color: 'darkblue' },
        { value: '2022-09-26', color: 'pink' },
        { value: '2022-09-27', color: 'green' }
      ]}
      extraInfo={[
        { value: '2022-09-25', text: '生日', color: 'red' },
        { value: '2022-09-26', text: '休假', color: 'darkblue' },
        { value: '2022-09-27', text: '会议', color: 'gray' }
      ]}
      selectedDateColor="#346fc2"
      onDayClick={(item) => console.log(item)}
      onDayLongPress={(item) => console.log(item)}
    />
  );
};

export default Index;

样式定制

默认样式如下

周视图

月视图

因为业务的复杂多变，通常会有自定义的样式控制

详细使用方式可见 pages 下的 custRender

import Taro, { FunctionComponent } from "@tarojs/taro";
import Calendar from "taro-calendar-customizable";

const Index: FunctionComponent = () => {
  const custWeekRender = (weekItem: string) => {
    return (
      <View style={['六', '日'].includes(weekItem) ? { color: 'red' } : {}}>
        {weekItem}
      </View>
    );
  };
  const custDayRender = (dayProps: DayProps) => {
    const isRest = [6, 0].includes(dayProps.weekDay);
    return (
      <>
        <View style={isRest ? { color: 'red' } : {}}>{dayProps.day}</View>
        {isRest && <View className={styles.tips}>休息</View>}
      </>
    );
  };
  return (
    <Calendar
      className={styles.cust}
      onDayClick={(item) => console.log(item)}
      onDayLongPress={(item) => console.log(item)}
      custDayRender={custDayRender}
      custWeekRender={custWeekRender}
    />
  );
};

export default Index;

class组件及function组件各自获取ref的方式

1. class 组件

import React, { Component, createRef } from 'react';
...
constructor(props) {
  super(props);
  this.custCalendarInstance= createRef();
}
goPre = () => {
  this.custCalendarInstance.current.goPre();
};
goNext = () => {
  this.custCalendarInstance.current.goNext();
};
...
<Calendar ref={this.custCalendarInstance} />

2. function 组件

import React, { useRef } from 'react';
...
const custCalendarInstance = useRef();
  const goPre = () => {
    custCalendarInstance.current.goPre();
  };
  const goNext = () => {
    custCalendarInstance.current.goNext();
  };
...
<Calendar ref={custCalendarInstance} />
...

参数说明

参数	说明	类型	默认值
view	视图模式	"week"|"month"	"month"
selectedDate	当前选中的时间，格式：YYYY-MM-DD	string	Date.now()
currentView	月视图时为当前视图显示的月份YYYY-MM，周视图下为当前显示的周内的某一天YYYY-MM-DD	string	当前系统时间年月
minDate	最小的可选时间，格式：YYYY-MM-DD	string	1970-01-01
maxDate	最大的可选时间，格式：YYYY-MM-DD	string	2100-12-31
isSwiper	是否可以滑动	boolean	true
isVertical	是否垂直滑动	boolean	false
monthWrapHeigh	月视图下的高度	string	19rem
weekWrapHeight	周视图下的高度	string	3rem
marks	需要标记的时间	Array<{value:string,color:string}>	[]
extraInfo	额外信息	Array<{value:string,text:string,color:string,fontSize:string}>	[]
hideArrow	是否隐藏箭头	boolean	false
hideController	是否显示控制器	boolean	false
ref	组件实例，class 组件及 function 组件各自获取ref的方式	(ref:Calendar)=>any	-
custDayRender	自定义渲染日期的方法	(props: DayProps) => ReactElement`	-

事件说明

参数	说明	类型
onDayClick	点击日期时候触发	(info: DayType, dateFormate: string) => any
onDayLongPress	长按日期时触发(长按事件与点击事件互斥)	(info: DayType, dateFormate: string) => any
onSelectDate	选中日期时候触发	(value: SelectDate) => any

类型说明

DayProps

每个单元格包含的所有信息

参数	说明	类型
day	当前月的第几天 1 ~ 31	number
selected	是否被选中	boolean
hasMarker	当前日期是否有mark	boolean
extraInfo	当前日期的 extraInfo	{text: string, color: string}
disabled	是否为禁用日期	boolean
notCurMonth	是否为非本月	boolean
isToday	是否为当天的日期	boolean
dateFormate	格式化后的日期	string