0.1.6 • Published 2 years ago

katoto-big-calendar v0.1.6

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

katoto-big-calendar

大日历展示，支持各种组件自定义，基本能涵盖日历资源管理类需求(类飞书日历)

基本形态

import React, { useEffect } from 'react'
import moment from 'moment'
import 'katoto-big-calendar/lib/css/big-calendar-custom.css'
import { Calendar, momentLocalizer } from 'katoto-big-calendar'
moment.locale('zh-cn')
const mLocalizer = momentLocalizer(moment)

export default function ({ localizer = mLocalizer, ...props }) {
  return (
    <Calendar
      style={{ minHeight: '450px' }}
      onShowMore={() => {
        console.log('props onShowMore change')
      }}
      onNavigate={() => {
        console.log('props navigate change')
      }}
      popup
      events={[
        {
          id: 15,
          title: '这是事件任务条',
          start: Date.now(),
          end: Date.now() + 72000000,
          allDay: true,
        },
      ]}
      localizer={localizer}
    />
  )
}

哪些区域支持自定义？

如图上标识的均可定制 标注图

API

参数说明类型默认值
localizer必需参数，用于一切日期的格式化momentLocalizer(moment)-
popup是否点击出弹窗；popWrapper 用于弹窗内容自定义booleanfalse
onNavigatedate 改变触发事件function(Date, 'month')-
onSelectEvent选中事件条事件function(eventDataObj, e)-
onShowMore点击更多事件function(eventDataObj[], e)-
onDoubleClickEvent双击事件条事件function(eventDataObj, e)-
onMouseMoveEvent鼠标在日历上的移动坐标, 返回二维数组位置x, y。-1,-1表示移出区域(写了事件开启 mousemove)function(pointArr: number[])-
defaultDate展示默认月份Date() => { new Date()}
getNow默认标记当前日期Date() => {new Date()}
toolbar是否展示日历表头boolean ｜ elementTypetrue
event事件条数组{ title: string, start: Date, end: Date, allDay?: boolean resource?: any, ... }[] ｜[]
formats部分日期格式化配置。见下表Object
messages修改部分默认文案。showMore 用于更多自定义，见下表Object-
components自定义组件，见下表Object-

formats 字段解释

const formats = {
  dateFormat: 'DD',
  dayFormat: 'DD ddd',
  weekdayFormat: 'ddd',

  selectRangeFormat: timeRangeFormat,
  eventTimeRangeFormat: timeRangeFormat,
  eventTimeRangeStartFormat: timeRangeStartFormat,
  eventTimeRangeEndFormat: timeRangeEndFormat,

  timeGutterFormat: 'LT',

  monthHeaderFormat: 'MMMM YYYY', // toolbar标题
  dayHeaderFormat: 'dddd MMM DD',
  dayRangeHeaderFormat: weekRangeFormat,
  agendaHeaderFormat: dateRangeFormat,

  agendaDateFormat: 'ddd MMM DD',
  agendaTimeFormat: 'LT',
  agendaTimeRangeFormat: timeRangeFormat,
}

<Calendar formats={formats} />

messages 字段解释

  const messages = {
    date: 'Date',
    time: 'Time',
    event: 'Event',
    allDay: 'All Day',
    day: 'Day',
    month: 'Month',
    previous: 'Back',
    next: 'Next',
    yesterday: 'Yesterday',
    tomorrow: 'Tomorrow',
    today: 'Today',
    showMore: total => `+${total} more`, // 用于超3个事件后的自定义
  }

  <Calendar messages={messages} />

components 字段解释

// 可自定义components
const components = useMemo(() => ({
  toolbar: MyToolbar,
  event: MyEvent,
  eventWrapper: MyEventWrapper,
  dateCellWrapper: MyDateCellWrapper,
  month: {
    header: MyMonthHeader,
    dateHeader: MyMonthDateHeader,
    event: MyMonthEvent,
  }
}), [])

<Calendar components={components} />
参数说明类型默认值
toolbar日历表头 props = { label, onNavigate }PropTypes.elementType-
event事件条内容自定义 props = {event, title ...}PropTypes.elementType-
eventWrapper事件条容器自定义，dom 事件需自己维护 props = {event,onSelect,onDoubleClick ...}PropTypes.elementType-
dateCellWrappercell 单元格背景 props = {value: Date, range, ...}PropTypes.elementType-
popWrapperpopup 为 true 弹窗内容 props = {events, ...}PropTypes.elementType-
month日历中间部分，见下表Object-

month 字段解释

参数说明类型默认值
header星期 header 区域 props = { label, Date }PropTypes.elementType
dateHeadercellHeader 区域 props = { label, Date }PropTypes.elementType-
event同上 event--

参考

import React, { useEffect } from 'react'
import moment from 'moment'
import 'katoto-big-calendar/lib/css/big-calendar-custom.css'
import { Calendar, momentLocalizer } from 'katoto-big-calendar'
moment.locale('zh-cn')
const mLocalizer = momentLocalizer(moment)

export default function ({ localizer = mLocalizer, ...props }) {
  return (
    <Calendar
      style={{ height: '500px' }}
      onShowMore={(event) => {
        console.log(event)
        console.log('props onShowMore change')
      }}
      onNavigate={() => {
        console.log('props navigate change')
      }}
      onSelectEvent={(evtObj, e) => {
        // 事件点击回调 返回evtobj
        console.log('props onSelectEvent change')
      }}
      onDoubleClickEvent={() => {
        console.log('props onDoubleClickEvent change')
      }}
      onMouseMoveEvent={(point) => {
        const [pointX, pointY] = point // 鼠标位置
      }}
      messages={{
        showMore: (count) => {
          return <span style={{ color: 'red' }}>+${count}</span>
        },
      }}
      defaultDate={new Date()}
      events={[
        {
          id: 0,
          title: 'long title',
          allDay: true,
          start: new Date(),
          end: new Date().getTime() + 172000000,
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(),
          end: new Date() + 720000000,
        },
      ]}
      localizer={localizer}
      popup
      components={{
        toolbar: ({ label, onNavigate }) => {
          return (
            <div style={{ display: 'flex', border: '1px solid red' }}>
              <button
                onClick={() => {
                  onNavigate('PREV')
                }}
              >
                上
              </button>
              <div>月份：{label}</div>
              <button
                onClick={() => {
                  onNavigate('NEXT')
                }}
              >
                下
              </button>
              <button
                onClick={() => {
                  onNavigate('TODAY')
                }}
              >
                回到当前日期页
              </button>
            </div>
          )
        },
        month: {
          dateHeader: ({ label, date }) => {
            return (
              <div>
                {moment(date).format('YYYY-MM-DD')}
                {label}
              </div>
            )
          },
          header: ({ label, date }) => {
            return (
              <div>
                {moment(date).format('YYYY-MM-DD')}
                {label}
              </div>
            )
          },
        },
        eventWrapper: (props) => {
          return (
            <div
              onClick={(e) => {
                e.stopPropagation() // 阻止冒泡
                props.onSelect && props.onSelect(props.event, e)
              }}
              style={{ border: '1px solid red' }}
            >
              {props.event.title}
            </div>
          )
        },
        dateCellWrapper: (val) => {
          return <div style={{ borderLeft: '1px solid #ddd', flex: 1 }}></div>
        },
        dateCellWrapper: ({ value, range }) => {
          return (
            <div
              style={{
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                borderRight: '1px solid #ccc',
              }}
            >
              cell背景 {moment(value).format('YYYY-MM-DD')}
            </div>
          )
        },
      }}
    />
  )
}

上线效果

最新业务效果

tips

commit 的时候，记得加 --no-verify 。babel 处理.js 组件有问题。不影响包功能

开始业务调试

yarn
yarn dev
// 本地调试： http://localhost:9002/?path=/story/examples--example-1

yarn build 发本地link包
yarn link
// 使用业务处：
yarn link "katoto-big-calendar"
react-componentreactcalendarfull calendar
classnamesdate-arithmeticdom-helperslodash-esmemoize-oneprop-typesreactreact-domreact-overlaysuncontrollable
@infinitebrahmanuniverse/nolb-kat@everything-registry/sub-chunk-2007katoto-business@zalastax/nolb-kat
0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago