import { View } from '@tarojs/components'
import Calendar from 'taro-calendar-customizable'

function Index() {
  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)}
      bodyStyle={{
        borderBottomLeftRadius: '10px',
        borderBottomRightRadius: '10px',
        borderTop: 'none',
        width: '90vw',
      }}
    />
  )
}

export default Index
