2.0.1 • Published 12 months ago

custom-calendar-taro v2.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

custom-calendar-taro

NPM version NPM downloads MIT Licence

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

注意事项:因taroswiper在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;

样式定制

默认样式如下

周视图

npm.io

月视图

npm.io

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

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

npm.io

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-DDstringDate.now()
currentView月视图时为当前视图显示的月份YYYY-MM,周视图下为当前显示的周内的某一天YYYY-MM-DDstring当前系统时间年月
minDate最小的可选时间,格式:YYYY-MM-DDstring1970-01-01
maxDate最大的可选时间,格式:YYYY-MM-DDstring2100-12-31
isSwiper是否可以滑动booleantrue
isVertical是否垂直滑动booleanfalse
monthWrapHeigh月视图下的高度string19rem
weekWrapHeight周视图下的高度string3rem
marks需要标记的时间Array<{value:string,color:string}>[]
extraInfo额外信息Array<{value:string,text:string,color:string,fontSize:string}>[]
hideArrow是否隐藏箭头booleanfalse
hideController是否显示控制器booleanfalse
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 ~ 31number
selected是否被选中boolean
hasMarker当前日期是否有markboolean
extraInfo当前日期的 extraInfo{text: string, color: string}
disabled是否为禁用日期boolean
notCurMonth是否为非本月boolean
isToday是否为当天的日期boolean
dateFormate格式化后的日期string
2.0.1

12 months ago

2.0.0

2 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.7

3 years ago

1.0.2

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.1

3 years ago