taro-calendar-customizable

可定制标记样式的 taro 日历组件。本组件的初期设计完全参考taro-ui中的calendar组件。在其之上进行了功能扩充和优化。

特性

• 可定制样式
• 支持农历显示
• 支持周视图
• 可完全自定义控制器
• 可指定一周的起点

安装

yarn add taro-calendar-customizable

npm install taro-calendar-customizable

使用

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

const Index: FunctionComponent = () => {
  return (
    <Calendar
      marks={[
        { value: '2019-08-11', color: 'red', markSize: '9px' },
        { value: '2019-08-12', color: 'pink', markSize: '9px' },
        { value: '2019-08-13', color: 'gray', markSize: '9px' },
        { value: '2019-08-14', color: 'yellow', markSize: '9px' },
        { value: '2019-08-15', color: 'darkblue', markSize: '9px' },
        { value: '2019-08-16', color: 'pink', markSize: '9px' },
        { value: '2019-08-17', color: 'green', markSize: '9px' }
      ]}
      extraInfo={[
        { value: '2019-08-21', text: '生日', color: 'red' },
        { value: '2019-08-22', text: '休假', color: 'darkblue' },
        { value: '2019-08-23', text: '会议', color: 'gray' }
      ]}
      mode="lunar"
      selectedDateColor="#346fc2"
      onDayClick={item => console.log(item)}
      onDayLongPress={item => console.log(item)}
    />
  );
};

export default Index;

样式定制

这里展示了最简单的样式设置方式，点击查看效果，具体到日期单元格样式的定制可以使用customStyleGenerator

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

const Index: FunctionComponent = () => {
  return (
    <Calendar
      marks={[
        { value: '2019-08-11', color: 'red', markSize: '9px' },
        { value: '2019-08-12', color: 'pink', markSize: '9px' },
        { value: '2019-08-13', color: 'gray', markSize: '9px' },
        { value: '2019-08-14', color: 'yellow', markSize: '9px' },
        { value: '2019-08-15', color: 'darkblue', markSize: '9px' },
        { value: '2019-08-16', color: 'pink', markSize: '9px' },
        { value: '2019-08-17', color: 'green', markSize: '9px' }
      ]}
      mode="normal"
      isMultiSelect
      selectedDateColor="#346fc2"
      onDayClick={item => console.log(item)}
      onDayLongPress={item => console.log(item)}
      headStyle={{
        backgroundColor: 'RGBA(12,36,157,0.5)',
        borderTopLeftRadius: '10px',
        borderTopRightRadius: '10px',
        boxShadow: '0 0 5px RGBA(0,0,0,0.3)',
        width: '90vw',
        marginLeft: '5vw',
        zIndex: 2
      }}
      bodyStyle={{
        backgroundColor: 'lightblue',
        borderBottomLeftRadius: '10px',
        borderBottomRightRadius: '10px',
        boxShadow: '0 0 5px RGBA(0,0,0,0.3)',
        borderTop: 'none',
        width: '90vw',
        marginLeft: '5vw'
      }}
    />
  );
};

export default Index;

自定义控制器

这里通过bindRef方法获取到了Calendar的实例，通过调用内部方法goNext()以及goPrev()实现了翻页控制。查看效果

import Taro, { FunctionComponent, useState } from '@tarojs/taro';
import Calendar from 'taro-calendar-customizable';
import { View, Button, Text, Switch } from '@tarojs/components';

const Index: FunctionComponent = () => {
  const [calendarObj, setCalendarObj] = useState<Calendar>();
  const [currentView, setCurrentView] = useState('2019-08-18');
  const [selected, setSelected] = useState('2019-08-18');
  const [isWeekView, setIsWeekView] = useState(false);
  const [hideController, setHideController] = useState(false);
  return (
    <View>
      <Calendar
        view={isWeekView ? 'week' : 'month'}
        bindRef={ref => {
          setCalendarObj(ref);
        }}
        hideController={hideController}
        currentView={currentView}
        onCurrentViewChange={setCurrentView}
        selectedDate={selected}
        onDayClick={item => setSelected(item.value)}
      />
      <Text style={{ display: 'block', width: '100vw', textAlign: 'center' }}>
        {currentView.slice(0, 7)}
      </Text>
      <Button
        onClick={() => {
          calendarObj ? calendarObj.goPre() : '';
        }}
        style={{ width: '50%', display: 'inline-block' }}
      >
        上一页
      </Button>
      <Button
        onClick={() => {
          calendarObj ? calendarObj.goNext() : '';
        }}
        style={{ width: '50%', display: 'inline-block' }}
      >
        下一页
      </Button>
      <Button onClick={() => setCurrentView('2019-08')}>
        设置view为2019-08
      </Button>
      <Button onClick={() => setSelected('2019-08-08')}>选中2019-08-08</Button>
      <Switch
        checked={isWeekView}
        onChange={e => {
          // @ts-ignore
          setIsWeekView(e.target.value);
        }}
      >
        周视图
      </Switch>
      <Switch
        checked={hideController}
        onChange={e => {
          // @ts-ignore
          setHideController(e.target.value);
        }}
      >
        隐藏控制器
      </Switch>
    </View>
  );
};

export default Index;

自定义标记

样式定制演示

滑动/切换动画演示

范围选择演示

周视图、自定义控制器演示

参数说明

| 参数 | 说明 | 类型 | 默认值 | | -------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- | | mode | 显示模式，普通或农历 | "normal"|"lunar" | "normal" | | view | 视图模式 | "week"|"month" | "month" | | selectedDate | 当前选中的时间，格式：YYYY-MM-DD | string | Date.now() | | currentView | 当前视图显示的月份YYYY-MM | string | 当前系统时间年月 | | minDate | 最小的可选时间，格式：YYYY-MM-DD | string | 1970-01-01 | | maxDate | 最大的可选时间，格式：YYYY-MM-DD | string | null | | isSwiper | 是否可以滑动 | boolean | true | | isVertical | 是否垂直滑动 | boolean | false | | isMultiSelect | 是否范围选择 | boolean | false | | marks | 需要标记的时间 | Array<{value:string,color:string,markSize:string}> | [] | | extraInfo | 额外信息 | Array<{value:string,text:string,color:string,fontSize:string}> | [] | | hideArrow | 是否隐藏箭头 | boolean | false | | hideController | 是否显示控制器 | false | boolean | | showDivider | 是否显示分割线 | boolean | false | | bindRef | 父组件通过 ref 可以调用内部方法，主要用于实现自定义控制器 | (ref:Calendar)=>any | - |

事件说明

| 参数 | 说明 | 类型 | | ------------------- | -------------------------------------- | ------------------------------ | | onClickPre | 点击左箭头 | () => any | | onClickNext | 点击右箭头 | () => any | | onDayClick | 点击日期时候触发 | (item:{value:string}) => any | | onDayLongPress | 长按日期时触发(长按事件与点击事件互斥) | (item:{value:string}) => any | | onCurrentViewChange | 月份/周 改变时触发 | (value: string) => any | | onSelectDate | 选中日期时候触发 | (value: SelectDate) => any |

样式定制参数

| 参数 | 说明 | 类型 | | -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ | | selectedDateColor | 选中日期的颜色 | string | | customStyleGenerator | 单元格样式生成器 | (dateInfo:StyleGeneratorParams ) => CustomStyles | | pickerTextGenerator | 日期选择器文本的生成器 | (currentView:Date)=>string | | headStyle | head 整体样式 | CSSProperties | | headCellStyle | head 单元格样式 | CSSProperties | | bodyStyle | body 整体样式 | CSSProperties | | leftArrowStyle | 左箭头样式 | CSSProperties | | rightArrowStyle | 右箭头样式 | CSSProperties | | datePickerStyle | 日期选择器样式 | CSSProperties | | pickerRowStyle | 日期选择器&左右箭头 所在容器样式 | CSSProperties |

进行样式定制时可以参考组件内部结构图：

重点:

给customStyleGenerator赋值的时候不要使用临时对象，否则性能会很差

错误用法:

<Calendar
    ...
    customStyleGenerator={
        params => {
            return {
                containerStyle: {

                }
            };
        }
    }
/>

正确用法:

在引用Calendar的组件的外部创建const对象，然后赋值：

const customStyleGenerator = params => {
                     return {
                         containerStyle: {
         
                         }
                     };
                 };
export default class XXXX extends Component {
    render () {
        return (
            ...
            <Calendar
                ...
                customStyleGenerator={customStyleGenerator}
            />
        );
    }
}

类型说明

StyleGeneratorParams

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

| 参数 | 说明 | 类型 | | ------------ | ------------------------------------------------------------------------------- | ------------------------------------- | | date | 当前月的第几天 1 ~ 31 | number | | currentMonth | 是否是属于当前显示的月份（比如 7 月 31 日不属于 8 月，但是会显示在 8 月这一页） | boolean | | fullDateStr | 时间 YYYY-MM-DD | string | | selected | 是否被选中 | boolean | | marked | 是否标记 | boolean | | hasExtraInfo | 是否含有额外信息 | boolean | | multiSelect | 多选模式参数 | MultiSelectParam | | lunar | 农历信息（仅在农历模式下生效） | LunarInfo 或 null | | startDay | 指定周几为一行的起点，0 为周日，1 为周一 | number |

CustomStyles

样式生成器返回结果

| 参数 | 说明 | 类型 | | -------------- | -------------- | --------------- | | lunarStyle | 农历样式 | CSSProperties | | dateStyle | 日期样式 | CSSProperties | | markStyle | 标记样式 | CSSProperties | | containerStyle | 容器单元格样式 | CSSProperties | | extraInfoStyle | 额外信息样式 | CSSProperties |

MultiSelectParam

多选模式参数

| 参数 | 说明 | 类型 | | ----------------- | ---------------- | --------- | | multiSelected | 是否在选择范围内 | boolean | | multiSelectedStar | 是否是选择起点 | boolean | | multiSelectedEnd | 是否是选择终点 | boolean |

LunarInfo

农历信息

| 参数 | 说明 | 类型 | | -------- | ------------------------ | ---------------- | | Animal | 生肖 | string | | IDayCn | 中文 农历 日 (例:'初二') | string | | IMonthCn | 中文 农历 月 (例:'八月') | string | | Term | 二十四节气 | string或null | | astro | 星座 | string | | cDay | 公历 日 | number | | cMonth | 公历 月 | number | | cYear | 公历 年 | number | | gzDay | 天干地支纪年 日 | string | | gzMonth | 天干地支纪年 月 | string | | gzYear | 天干地支纪年 年 | string | | isLeap | 是否是闰月 | boolean | | isTerm | 是否是节气 | boolean | | isToDay | 是否是今天 | boolean | | lDay | 农历 日 | number | | lMonth | 农历 月 | number | | lYear | 农历 年 | number | | nWeek | 一周的第几天 1~7 | number | | ncWeek | 星期 (例:'星期五) | string |

农历信息的生成使用的是calendar.js，可直接调用农历信息生成工具

农历生成工具调用

import { CalendarTools } from 'taro-calendar-customizable';

const LunarInfo = CalendarTools.solar2lunar('2019-08-17');