English | 简体中文

@ray-js/components-ty-calendar

涂鸦风格日历组件

Installation

$ npm install @ray-js/components-ty-calendar
# or
$ yarn add @ray-js/components-ty-calendar

Usage

import Calender from '@ray-js/components-ty-calendar';

const cur = new Date();
const [date, setDate] = React.useState<string>(
  `${cur.getFullYear()}-${cur.getMonth() + 1}-${cur.getDate()}`
);

<Calender
  customStyle={{
    calendarContainer: {
      background: '#fff',
    },
    day: {
      color: '#000',
    },
    currentDayCircle: {
      background: 'lightblue',
    },
    selectedDayCircle: {
      background: 'lightblue',
    },
    dayHeading: {
      color: '#000',
    },
    weekendHeading: {
      color: '#000',
    },
    controlButton: {
      color: '#000',
    },
    weekendDayButton: {
      background: '#fff',
    },
    weekendDayText: {
      color: '#000',
    },
    controlButtonIconColor: '#000',
    title: {
      color: '#000',
    },
  }}
  currentMoment={date}
  onDateSelect={setDate}
  showControls
/>;