rcm-calendar

A react calendar view with day, week and month

📦 Install

npm install rcm-calendar

yarn add rcm-calendar

🔨 Usage

import Calendar from 'rcm-calendar';

const App = () => (
  <>
    <Calendar 
      date={date}
      viewType={'week'}
      isWhichHour={"24"}
      isVisibleSolar2lunar={true}
      schedules={[]}
    />
  </>
);

也可以单独引入日、周、月视图： DayCalendar、WeekCalendar、MonthCalendar,

import {WeekCalendar} from 'rcm-calendar';

const App = () => (
  <>
    <WeekCalendar 
      date={date}
      viewType={'week'}
      isWhichHour={"24"}
      isVisibleSolar2lunar={true}
      schedules={[]}
    />
  </>
);

API

日历视图的属性说明如下：

属性	说明	类型	默认值
view	视图类型,有day/week/month	string	-
date	视图的显示日期	Dayjs	dayjs()
isEnglish	是否是英语状态	boolean	false
isWhichHour	时间 日视图或周视图的时刻轴的时间类型：24/12	string	'24'
schedules	日程的数据	ISchedules[]	-
monthVisibleWeeksCount	月视图每天显示的日程数	number	2
isVisibleSolar2lunar	是否显示农历	boolean	false
renderHeaderTemplate	视图头部的自定义	ReactNode	-
alldayName	全天的名称	string	全天
clickSchedule	单个日程的点击事件	(e, schedule) => void	-
rightMouseClick	右键日程	(e, schedule) => void	-
clickBlank	点击空白处	(e, time) => void	-
dbclickBlank	双击空白处 (单双击只能有一个)	(e, time) => void	-
monthClickMore	月视图点击还有几项按钮事件	(e, schedules) => void	-

ISchedules：日程字段说明

属性	说明	类型
id	id,可以不用传入	string
calendarId	calendarId,可以不用传入	string
recurrenceId	recurrenceId,可以不用传入	string
title	日程标题	string
start	日程开始时间	number 时间戳（秒）
end	日程结束时间	number 时间戳（秒）
isAllDay	是否是全天日程	boolean
location	日程的地点	string
attendees	日程参与人	Array
color	日程的title颜色	string
bgColor	日程的背景颜色	string
borderColor	日程左边框的颜色	string
customStyle	自定义css	{}
state	记录日程的状态	string
raw	用户自定所需要的字段	{}