反应-内生-大日历

跨平台 gcal/ 外观为 React Natural 的日历组件 .

帮助我调试此组件

在三个平台上调试这个库是一项艰巨的任务. 我通常先用Web版本开发,然后用真正的设备确认其功能. 我的电脑是Linux,我的手机是Android,所以在Android上很容易测试,但是要在iOS上调试,我必须把我的Macbook Pro从我的车库拿来,连接我妻子的iPhone并测试. 每次我推出我的"MacBook Pro"时,都需要更新Xcode,甚至需要完成一个完整的系统更新. 开始调试需要很长时间. 由于React Industrial在iOS上的工作优于Android,我 永远 有时会跳过测试,所以iOS上应该有bug. 如果你帮我调试,我会很感激的!

模块

特征

• 交叉平台:在网络,iOS,Android上运行,具有回放的力量
• 类型安全: 完全写入类型脚本
• 自定义: 能够提供您自己的主题, 并传递您的组件来渲染 .
• 轻量:~9KB(min + gzip),依赖是 dayjs 财务报告和审定财务报表 calendarize

安装

npm install --save react-native-big-calendar

或者如果你用雅恩的话:

yarn add react-native-big-calendar

其他依赖关系

请确保安装对等依赖 .

npm install react react-native

类型脚本

如果使用类型脚本保证 @types/react 财务报告和审定财务报表 @types/react-native 已安装. react-native-big-calendar 内部使用.

npm install --save-dev @types/react @types/react-native

网上的使用

如果您在网络上使用此模块, 请安装 react-native-web。 。 。 .

npm install react-native-web

如果您正在使用 Create React App, 您已经准备好去QQ

详见官方反应-内设-网络安装指南.

https://github.com/necolas/ react-native-web 互联网档案馆的存檔,存档日期2013-12-21

开始

import { Calendar } from 'react-native-big-calendar'

const events = [
  {
    title: 'Meeting',
    start: new Date(2020, 1, 11, 10, 0),
    end: new Date(2020, 1, 11, 10, 30),
  },
  {
    title: 'Coffee break',
    start: new Date(2020, 1, 11, 15, 45),
    end: new Date(2020, 1, 11, 16, 30),
  },
]

function App() {
  return <Calendar events={events} height={600} />
}

API 文档

内容提要

export interface CalendarProps<T extends ICalendarEventBase> {
  events: T
  height: number
  overlapOffset?: number
  hourRowHeight?: number
  ampm?: boolean
  date?: Date
  eventCellStyle?: EventCellStyle<T>
  eventCellAccessibilityProps?: AccessibilityProps
  eventCellTextColor?: string
  allDayEventCellStyle?: allDayEventCellStyle<>
  allDayEventCellAccessibilityProps?: AccessibilityProps
  calendarCellAccessibilityPropsForMonthView?: AccessiblityProps
  allDayEventCellTextColor?: string
  calendarContainerStyle?: ViewStyle
  calendarCellAccessibilityProps?: AccessibilityProps
  headerContainerStyle?: ViewStyle
  headerContainerAccessibilityProps?: AccessibilityProps
  headerCellAccessibilityProps?: AccessibilityProps
  bodyContainerStyle?: ViewStyle
  renderEvent?: (
    event: T,
    touchableOpacityProps: CalendarTouchableOpacityProps,
  ) => ReactElement | null
  renderHeader?: React.ComponentType<CalendarHeaderProps<T> & { mode: Mode }>
  renderHeaderForMonthView?: React.ComponentType<CalendarHeaderForMonthViewProps>
  locale?: string
  hideNowIndicator?: boolean
  mode?: Mode
  scrollOffsetMinutes?: number
  showTime?: boolean
  minHour?: number
  maxHour?: number
  swipeEnabled?: boolean
  weekStartsOn?: WeekNum
  weekEndsOn?: WeekNum
  onChangeDate?: DateRangeHandler
  onPressCell?: (date: Date) => void
  onPressDateHeader?: (date: Date) => void
  onPressEvent?: (event: ICalendarEvent<T>) => void
  eventMinHeightForMonthView?: number
  activeDate?: Date
  moreLabel?: string
  showAdjacentMonths?: boolean
  sortedMonthView?: boolean
  showVerticalScrollIndicator?: boolean
  timeslots?: number
}

<Calendar /> 道具为:

事件渲染器

type EventRenderer<T> = (
  event: ICalendarEvent<T>,
  touchableOpacityProps: CalendarTouchableOpacityProps,
) => ReactElement | null

更多信息见 故事书

ICalendar EventBase 日历

interface ICalendarEventBase {
  start: Date
  end: Date
  title: string
  children?: ReactElement | null
  disabled?: boolean
}

小时渲染器

type HourRenderer = {
  appm: boolean
  hour: number
}

全天活动

所有日事均应以时,分,秒(T:00:00)开始并结束. 例如:

{
    title: 'all day event',
    start: "2021-12-24T00:00:00.000Z",
    end: "2021-12-24T00:00:00.000Z", // same date as `start`
}

使用自定义事件渲染函数

您可以指定接收计算结果的自定义事件渲染函数 TouchableOpacity 螺旋桨和 event。 。 。 .

• 职能 renderEvent 必须返回 ReactElement。 。 。 .
• 构成部分 应 被包裹在一个 TouchableOpacity 或者说 任意 接受定位和单击事件的DOM元素(onPress(中文(简体) ).

export interface MyCustomEventType {
  color: string
}

const renderEvent = <T extends ICalendarEventBase>(
  event: T,
  touchableOpacityProps: CalendarTouchableOpacityProps,
) => (
  <TouchableOpacity {...touchableOpacityProps}>
    <Text>{`My custom event: ${event.title} with a color: ${event.color}`}</Text>
  </TouchableOpacity>
)

<Calendar renderEvent={renderEvent} />

显示事件笔记

您的事件可以包含一个道具 children 可以找到一个实例 这里。 。 。 .

const eventNotes = useMemo(
  () => (
    <View style={{ marginTop: 3 }}>
      <Text style={{ fontSize: 10, color: 'white' }}> Phone number: 555-123-4567 </Text>
      <Text style={{ fontSize: 10, color: 'white' }}> Arrive 15 minutes early </Text>
    </View>
  ),
  [],
)

export const myEvents: ICalendarEventBase[] = [
  {
    title: 'Custom reminder',
    start: dayjs().set('hour', 16).set('minute', 0).toDate(),
    end: dayjs().set('hour', 17).set('minute', 0).toDate(),
    children: eventNotes,
  },
]

主题

您可以自定义日历 theme 道具 (英语). theme 应该像这个接口 :

export interface Palette {
  main: string
  contrastText: string
}

export type Typography = Pick<
  TextStyle,
  'fontFamily' | 'fontWeight' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'textAlign'
>

export interface ThemeInterface {
  palette: {
    primary: Palette
    nowIndicator: string
    gray: {
      100: string
      200: string
      300: string
      500: string
      800: string
    }
    moreLabel: string
  }
  isRTL: boolean
  typography: {
    fontFamily?: string
    xs: Typography
    sm: Typography
    xl: Typography
    moreLabel: Typography
  }
  eventCellOverlappings: readonly Palette[]
  moreLabel: TextStyle
}

例如:

const darkTheme = {
  palette: {
    primary: {
      main: '#6185d0',
      contrastText: '#000',
    },
    gray: {
      '100': '#333',
      '200': '#666',
      '300': '#888',
      '500': '#aaa',
      '800': '#ccc',
    },
  },
}

<Calendar
  height={SCREEN_HEIGHT}
  theme={darkTheme}
/>

I18n 时

请通过您的地址 locale 道具 财务报告和审定财务报表 导入 day.js locale 文件 :

import 'dayjs/locale/ja'

<Calendar
  locale="ja"
  {/* ... */}
/>

你可以在这里找到你的日地:

https://github.com/iamkun/dayjs/tree/dev/src/locale 互联网档案馆的存檔,存档日期2013-12-22

丰富事件逻辑( 绩效提示)

执行数据结构

我们创建并缓存一个按日期键的字典,其中包含所有事件属性以及重叠的计数:

{
    [YYYY-MM-DD]: [
        {
            ...all event information,
            overlapPosition: int
            overlapCount: int
        }
    ]
}

多日活动

当一个活动跨出多天时,我们会为它的每一天创造出一个新的活动. 例如从2021-05-01起起至2021-05-03起止的事件将作为3起事件进行代表,每天一次,并配有以下时间道具: 1

--- First day
2021-05-01: {
   ...other data
   start: event start datetime
   end: current day midnight
}
-- All the intermediate days:
2021-05-02: {
   ...other data
   start: previous day midnight
   end: current day midnight
}
-- Final day
2021-05-03: {
   ...other data
   start: previous day midnight
   end: event start datetime
}

丰富事件渲染器

优化的渲染器从词典中获取每个事件,并在不添加过滤或排序等任何额外逻辑的情况下来渲染.

预处理数据

你可以自己编字典,通过道具寄到图书馆 enrichedEventsByDate。 。 。 .

例如,当您想要在背景工作中构建词典时, 这样做特别有用 .

在真实设备上运行演示并开发

设置

检查后,请运行:

yarn install
yarn sync-rndemo
cd rndemo
yarn install

开始

在演示目录中启动 React 原生开发服务器 :

cd rndemo
yarn start

然后,打开另一个终端运行:

# For ios
pod install
yarn ios

# For Android
yarn android

每次修改此库的代码时, 您应该在根目录中运行以下命令 :

yarn sync-rndemo

截图

谁用这个?

如果你使用这个图书馆,请发送公关 添加你的组织!

发起人

企业支助

首先,谢谢你对这个项目的兴趣。 随着这个图书馆越来越出名,很多人都要求具备他们需要的特征. 我想尽可能地回应他们 但我在做这项工作的时间有限 要成为全职开放源代码,使这个项目可持续,我决定增加企业支持.

企业客户可以获得:

• 完全定制,如颜色,标志,图像,等等.
• 优先应对与发展.
• React, TypeScript, 和 React Indust 应用程序的咨询 .

请注意,一些企业功能也将与开放源码软件版本合并.

如果您对这些功能感兴趣,请发电子邮件给: [email protected] (英语)

聘请我

我是一个自由职业的软件工程师,专门研究反应,反应原生和TypeScript. 还可用于GraphQL和RDB后端,以及Node.JS应用.

如果您有兴趣雇用我,请发电子邮件给: [email protected] (英语)

我住在日本(在美丽的海边),所以远程合同工作特别受欢迎.