React-日历组件（原生JS代码）
使用
<CalendarMonth default={true} method={this.state.checkType} room_id={this.state.roomNoValue.length > 0 && this.state.roomNoValue[0]} setCurrent={(current) => { this.setState({ current, bookingButton:false }) const currentTime = moment().format('HH:mm') if(this.state.forbid){ this.setState({ bookingButton:false }) return } this.setState({ bookingButton:this.state.checkType ===1? moment().format('YYYY-MM-DD') === current&&this.state.lastTime > currentTime? true: ( moment(moment().format('YYYY-MM-DD')).isBefore(current)?!this.state.forbid:false): moment().format('YYYY-MM-DD') === current[0]? true:( moment(moment().format('YYYY-MM-DD')).isBefore(current[0])?true:false), lastTime:this.state.lastTime }) }} time={moment(this.state.date).format('YYYY-MM')}/>
详细代码
import React, {Component} from 'react';
import DateItem from "./DateItem";
import PropTypes from 'prop-types';
import moment from "moment";
import HttpUtils from "../../../utils/HttpUtils";
import {ActivityIndicator} from "antd-mobile";
// import console = require("console");
const days = [ '日', '一', '二', '三', '四', '五', '六'];
class CalendarMonth extends Component {
//method 1:按小时 2：按天
static defaultProps = {
time: moment().format('YYYY-MM'),
method: 2,
room_id: 65,
default: true
}
static propTypes = {
//YYYY-MM-DD
room_id: PropTypes.number,
time: PropTypes.string,
// time: PropTypes.,
method: PropTypes.number,
default: PropTypes.bool
}
constructor(props) {
super(props);
this.state = {
list: [],
data: [],
week: 0,
current: props.default ? moment().format('YYYY-MM-DD') : '',
}
}
getList() {
this.setState({loading: true})
HttpUtils.postForm('/api/room/order/list', {
room_id: this.props.room_id,
start_date: moment(this.props.time).date(1).format('YYYY-MM-DD'),
end_date: moment(this.props.time).date(moment().daysInMonth()).format('YYYY-MM-DD')
}).then(res => {
if (res.status === 10000) {
this.getData(res.data);
}
})
}
componentDidMount() {
if (this.props.room_id) {
this.getList();
} else {
this.getData()
}
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.time !== this.props.time || prevProps.room_id !== this.props.room_id) {
this.getList();
}
}
getData = (data) => {
const day = moment(this.props.time).daysInMonth();
const list = [];
for (let i = 0; i < day; i++) {
list.push({
title: i + 1,
time: moment(this.props.time).date(i + 1).format('YYYY-MM-DD'),
count: data && data.find((item) => item.date === moment(this.props.time).date(i + 1).format('YYYY-MM-DD')) ? data.find((item) => item.date === moment(this.props.time).date(i + 1).format('YYYY-MM-DD')).count : 0
})
}
this.setState({
list,
disabled: data ? data.map((item) => item.date) : [],
week: moment(this.props.time).day(),
loading: false
})
}
render() {
const {week} = this.state;
const {method} = this.props;
return (
<div className={'month_card'} style={{position: 'relative'}}>
{this.state.loading &&
<div style={{
height: '100%',
width: '100%',
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
top: 0,
left: 0,
backgroundColor: 'rgba(255,255,255,0.48)'
}}>
<ActivityIndicator size={'large'}/>
</div>
}
<div style={{filter: this.state.loading ? 'blur(3px)' : ''}}>
<div className='month_title'>
{days.map((item, index) => (
<span key={index}>{item}</span>
))}
</div>
<div style={{flex: 1}}>
<div className='month'>
{week > 0 ? days.slice(0, week).map((item, index) => (
<span className='empty' key={'month' + index}></span>
)) : null}
{this.state.list.map((item, index) => (
<div className='item' onClick={() => {
if (method === 1) {
this.setState({
current: item.time
}, () => {
this.props.setCurrent && this.props.setCurrent(item.time);
})
} else {
if (method === 2 && item.count > 0) {
return;
}
if (this.state.current && this.state.current[0] === this.state.current[1] && moment(item.time).isAfter(this.state.current[0])) {
let start = moment(this.state.current[0]);
for (let i = 0; i <= moment(item.time).diff(start, 'days'); i++) {
if (this.state.disabled.indexOf(start.add(i, 'd').format('YYYY-MM-DD')) !== -1) {
this.setState({
current: [item.time, item.time]
}, () => {
this.props.setCurrent && this.props.setCurrent(this.state.current);
})
return;
}
}
this.setState({
current: [this.state.current[0], item.time]
}, () => {
this.props.setCurrent && this.props.setCurrent(this.state.current);
})
} else {
this.setState({
current: [item.time, item.time]
}, () => {
this.props.setCurrent && this.props.setCurrent(this.state.current);
})
}
}
}}
>
<DateItem item={item} key={'month01_' + index}
disabled={ moment(this.props.time).date(index + 1).format('YYYY-MM-DD')<moment(new Date()).format('YYYY-MM-DD')?true: method === 2 ? item.count > 0 : false}
current={method === 1 ? this.state.current === item.time : this.state.current.length === 2 ? moment(item.time).isBetween(moment(this.state.current[0]).subtract(1, 'd'), moment(this.state.current[1]).add(1, 'd')) : false}/>
</div>
))}
</div>
</div>
</div>
</div>
)
}
}
export default CalendarMonth;
额外文本
import React, {Component} from 'react';
export default class DateItem extends Component {
constructor(props) {
super(props);
this.state = {
category: 0
}
}
componentDidMount() {
// this.getActivityStatus();
}
componentDidShow() {
}
render() {
const {item} = this.props;
return (
<div>
<div>
<span className={this.props.disabled?'disabled-item':this.props.current ? 'current-item' : 'inactive-item'}>{item.title}</span>
{item.count !== 0 && <span className={'book-item'}>{item.count}场</span>}
</div>
</div>
)
}
}
实例2 ： 以周日开始 到周六， 只显示一周的时间 / 当前日期放在中间，（日、一、二、三、四、五、六 每天变化）
思路：找到开始日期和结束日期
开始日期：在当前日期的前七天中去寻找 周日，找到以后 将这个日期作为开始日期
结束日期：开始日期往后7天
关键代码： 用dayOfYear
const { events, year, month, selected, today, day, initList } = this.props.auth; const current = moment().year(year).dayOfYear(day).week(week); let start = current.clone(); let end = current.clone().add(7, 'days'); const start2 = current.clone().subtract(7,'days'); let dates = []; let dates2 = []; while (start2.isBefore(current)) { // 这里找到前七天，并把日期放到数组dates2中 dates2.push(start2.clone()); start2.add(1, 'days'); } dates2.map(item=>{ // 设置开始日期和结束日期 if(item.format('E') === '7'){ start = item end = item.clone().add(7,'days') } }) while (start.isBefore(end)) { dates.push(start.clone()); start.add(1, 'days'); } let dayList = ['日','一','二','三','四','五','六']
全部代码：
import './Calendar.scss'; import React, { Component } from 'react'; import filter from 'lodash/filter'; import { actions, connect } from 'mirrorx' import moment from 'moment' import { Flex, Box } from 'reflexbox'; import loadable from 'common/Loadables'; import LeftSearchBar from '../LeftSearchBar/index' import TagItem from './components/TagItem' const DrawerBox = loadable(() => import('components/DrawerBox/index')); const SwipeBotton = loadable(() => import("components/SwipeBotton")); const ListBox = loadable(() => import("components/ListBox")); class Calendar extends Component { constructor(props) { super(props); this.state = { searchValue: '', tagList: this.props.auth.tagList, allList:false, showNotes:true, showTags:true } } toPrevMonth() { const { year, day } = this.props.auth; const current = moment().year(year).dayOfYear(day).subtract(1, 'weeks'); actions.auth.change({ year: current.year(), day: current.dayOfYear(), }) } toNextMonth() { const { year, day} = this.props.auth; const current = moment().year(year).dayOfYear(day).add(1, 'week'); actions.auth.change({ year: current.year(), day: current.dayOfYear(), }) } getDateD = (item) => { this.setState({ allList:false }) actions.auth.change({ selected: item }) } setAdd = () => { this.enter('新建') actions.auth.change({ DrawerAlter: undefined, ErrorType: undefined, DrawerOpen: true, DrawerType: 'add', }) } scheduleQuery = (item) => { actions.auth.scheduleQuery({ task_xh: item.task_xh }) actions.auth.change({ task_type:item.task_type }) } setThours = (start, end) => { let start_date = moment(start, "YYYY-MM-DD HH:mm:ss"); let end_date = moment(end, "YYYY-MM-DD HH:mm:ss"); //秒 let seconds = end_date.diff(start_date, "seconds"); //分钟 let mintus = (seconds / 60); //小时 let hours = (mintus / 60); if (hours.toFixed(0) === 0) { return } if (start != "" && end != "") { return <div>{hours.toFixed(0)}小时</div> } else { return } } enter = (txt) => { let eleArr = document.getElementsByClassName('am-tabs-pane-wrap') for (let i = 0; i < eleArr.length; i++) { eleArr[i].style['overflow-y'] = 'hidden' eleArr[i].scrollTop = 0 } this.setState({ allList:false }) actions.auth.change({ tabTitle: txt }) } onchange = (v) => { this.setState({ allList:true, searchValue: v }) } // 删除标签 delete = (e, item) => { e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); actions.auth.Schedule({ data: { task_xh: item.task_xh }, url: 'remove' }) } componentWillReceiveProps(newProps) { if (!newProps.DrawerOpen) { this.setState({ tagList: newProps.auth.tagList }) } } render() { const { events, year, selected, today, day, initList } = this.props.auth; const current = moment().year(year).dayOfYear(day); let start = current.clone(); let end = current.clone().add(7, 'days'); const start2 = current.clone().subtract(7,'days'); let dates = []; let dates2 = []; while (start2.isBefore(current)) { dates2.push(start2.clone()); start2.add(1, 'days'); } dates2.map(item=>{ if(item.format('E') === '7'){ start = item end = item.clone().add(7,'days') } }) while (start.isBefore(end)) { dates.push(start.clone()); start.add(1, 'days'); } let dayList = ['日','一','二','三','四','五','六'] // switch (current.format('E')) { // 处理星期每天变化 // case '1': // dayList = ['五','六','日','一','二','三','四'] // break; // case '2': // dayList = ['六','日','一','二','三','四','五'] // break; // case '3': // dayList = ['日','一','二','三','四','五','六'] // break; // case '4': // dayList = ['一','二','三','四','五','六','日'] // break; // case '5': // dayList = ['二','三','四','五','六','日','一'] // break; // case '6': // dayList = ['三','四','五','六','日','一','二'] // break; // case '7': // dayList = ['四','五','六','日','一','二','三'] // break; // default: // dayList = ['五','六','日','一','二','三','四'] // break; // } // let list = let list1 = []; let list2 = []; const createItem = () => { return ( <div> <Flex wrap="wrap" py="0.1rem" className="calendar-date webfont"> {dates.map((item, index) => { const className = ['date']; className.push('t_month'); if (item.isSame(moment(), 'day')) { className.push('t_day'); } const exist = filter(events, function (currentValue) { return moment(moment(item).format('YYYY-MM-DD')).isSame(moment(currentValue.start_date_time).format('YYYY-MM-DD')) || moment(moment(item).format('YYYY-MM-DD')).isSame(moment(currentValue.end_date_time).format('YYYY-MM-DD')) && moment(moment(currentValue.end_date_time).format('YYYY-MM-DD HH:mm:ss')).isAfter(moment(currentValue.end_date_time).set({ 'hour': 8, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')) || moment(moment(item).format('YYYY-MM-DD')).isBetween(moment(currentValue.start_date_time).format('YYYY-MM-DD'), moment(currentValue.end_date_time).format('YYYY-MM-DD')); }); if (item.isSame(selected, 'day')) { list1 = exist.filter(item=>item.task_type === '1'); list2 = exist.filter(item=>item.task_type === '2'); } if (item.isSame(today, 'day')) { className.push('active'); } if (exist.length > 0) { className.push('fixedDate'); } if(this.state.allList){ list1 = initList.filter(item=>item.task_type === '1'); list2 = initList.filter(item=>item.task_type === '2'); } return ( <Box key={index} w={1 / 7} className='date-wrapper'> <div onClick={() => this.getDateD(item)} className={className.join(' ')}>{item.date()}</div> </Box> ) })} </Flex> </div> ) } const createDate = () => { const { tagList,showNotes,showTags } = this.state; return ( <Box mt={1} pl="5%" className={"createDate"}> <LeftSearchBar styles={{ marginRight: '1.25rem' }} title='请输入关键字' submit={(v) => { if (v.length > 0) { this.setState({ allList:true },()=>{ actions.auth.onWorkNotes({ tags: v }); }) } else { this.setState({ allList:false },()=>{ actions.auth.onWorkNotes(''); }) } }} onchange={(currValue,oldValue) => { if(currValue!==oldValue){ this.setState({ searchValue: currValue, },()=>{ if (!currValue) { this.setState({ allList:false }) actions.auth.onWorkNotes(); } }) } }} value={this.state.searchValue} /> <div className='calendar_tag'> <ul> { tagList.length > 0 && tagList.map((item, index) => ( <TagItem key={`${item}_${index}`} delete={this.delete} onchange={this.onchange} item={item} index={index} list={true} /> )) } </ul> </div> { list1.length > 0 && <div> <div style={{marginTop:14,color:'rgba(17,115,225,.65)'}}>我的日程</div> <ul id="timeline" style={{ marginBottom: '1rem'}}> {list1.map((l, k) => { return ( <SwipeBotton key={k} item={l} refresh={() => actions.auth.onWorkNotes()} onClick={() => { this.scheduleQuery(l) this.enter('编辑') }} type='schedule' > <ListBox type='schedule' disabled={true} key={k} item={l} goToPath={() => { this.scheduleQuery(l) this.enter('编辑') }} setThours={this.setThours} /> </SwipeBotton> ); })} </ul> </div> } { list2.length > 0 && <div> <div style={{marginTop:14,color:'rgba(17,115,225,.65)'}}>我的便笺</div> <ul id="timeline" style={{ marginBottom: '1rem' }}> {list2.map((l, k) => { return ( <SwipeBotton key={k} item={l} refresh={() => actions.auth.onWorkNotes()} onClick={() => { this.scheduleQuery(l) this.enter('编辑') window.scrollTo(0, 0) }} type='schedule' > <ListBox type='schedule' disabled={true} key={k} item={l} goToPath={() => { this.scheduleQuery(l) this.enter('编辑') }} setThours={this.setThours} /> </SwipeBotton> ); })} </ul> </div> } </Box> ); }; return ( <div className={'Calendar FormStyle'} style={{paddingTop: 0}}> <DrawerBox> <div className={'relative'}> <div> <div className="calendar"> <Flex align="center" className="webfont pb-1"> <Box w={1 / 3} className="center"> <div className="sjx leftsanjiao" onClick={this.toPrevMonth.bind(this)} > </div> </Box> <Box auto className="center"> <div className="theDate"> {current.format('YYYY/MM')} </div> </Box> <Box w={1 / 3} className="center"> <div className="sjx rightsanjiao" onClick={this.toNextMonth.bind(this)} /> </Box> </Flex> <Flex py="0.2rem" className="center webfont dayfont"> { dayList.map(item=>( <Box key={item} w={1 / 7}>{item}</Box> )) } </Flex> {createItem()} <style> {dates.length === 42 ? ` .Calendar .calendarBox {top: 16rem} ` : dates.length === 7 ? ` .Calendar .calendarBox {top: 2rem} ` : `` } </style> <div className={'calendarBox'} /> <div className={'addIcon zindex2'} onClick={() => this.setAdd()}><i className={'iconfont iconxinjianricheng'} /></div> <div className={'addIcon zindex1'}><i className={'iconfont iconcaidan'} /></div> </div> </div> {createDate()} </div> </DrawerBox> </div> ); } } function dispatch(state) { return { auth: state.auth, DrawerOpen: state.auth.DrawerOpen, tagList: state.auth.tagList } } export default connect(dispatch)(Calendar);
最新代码
import './Calendar.scss'; import React, { Component } from 'react'; import filter from 'lodash/filter'; import { actions, connect } from 'mirrorx' import moment from 'moment' import dayjs from 'dayjs' import { Flex, Box } from 'reflexbox'; import loadable from 'common/Loadables'; import LeftSearchBar from '../LeftSearchBar/index' import TagItem from './components/TagItem' const weekOfYear = require('dayjs/plugin/weekOfYear') dayjs.extend(weekOfYear) const DrawerBox = loadable(() => import('components/DrawerBox/index')); const SwipeBotton = loadable(() => import("components/SwipeBotton")); const ListBox = loadable(() => import("components/ListBox")); class Calendar extends Component { constructor(props) { super(props); this.state = { searchValue: '', tagList: this.props.auth.tagList, allList:false, showNotes:true, showTags:true } } toPrevMonth() { const { year, day } = this.props.auth; let current = moment().year(year).dayOfYear(day).subtract(1, 'weeks'); actions.auth.change({ year: current.year(), day: current.dayOfYear(), nextToday:current.format('YYYY-MM-DD') }) } toNextMonth() { const { year, day } = this.props.auth; let current = moment().year(year).dayOfYear(day).add(1, 'weeks'); actions.auth.change({ year: current.year(), day: current.dayOfYear(), nextToday:current.format('YYYY-MM-DD') }) } getDateD = (item) => { this.setState({ allList:false }) actions.auth.change({ selected: item }) } setAdd = () => { this.enter('新建') actions.auth.change({ DrawerAlter: undefined, ErrorType: undefined, DrawerOpen: true, DrawerType: 'add', }) } scheduleQuery = (item) => { actions.auth.scheduleQuery({ task_xh: item.task_xh }) actions.auth.change({ task_type:item.task_type }) } setThours = (start, end) => { let start_date = moment(start, "YYYY-MM-DD HH:mm:ss"); let end_date = moment(end, "YYYY-MM-DD HH:mm:ss"); //秒 let seconds = end_date.diff(start_date, "seconds"); //分钟 let mintus = (seconds / 60); //小时 let hours = (mintus / 60); if (hours.toFixed(0) === 0) { return } if (start != "" && end != "") { return <div>{hours.toFixed(0)}小时</div> } else { return } } enter = (txt) => { let eleArr = document.getElementsByClassName('am-tabs-pane-wrap') for (let i = 0; i < eleArr.length; i++) { eleArr[i].style['overflow-y'] = 'hidden' eleArr[i].scrollTop = 0 } this.setState({ allList:false }) actions.auth.change({ tabTitle: txt }) } onchange = (v) => { this.setState({ allList:true, searchValue: v }) } // 删除标签 delete = (e, item) => { e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); actions.auth.Schedule({ data: { task_xh: item.task_xh }, url: 'remove' }) } componentWillReceiveProps(newProps) { if (!newProps.DrawerOpen) { this.setState({ tagList: newProps.auth.tagList }) } } render() { const { events, year, selected, nextToday, day, initList } = this.props.auth; let current = moment().year(year).dayOfYear(day); if(nextToday){ current = moment(nextToday) }else { current = moment().year(year).dayOfYear(day); } // nextToday let start = ''; let end = ''; let tempStart = current.clone().subtract(7,'days'); let tempEnd = ''; // 如果今天是周日 if(current.clone().format('E') === '7'){ start = current.clone(); end = current.clone().add(1, 'weeks'); }else{ start = current.clone().subtract(1, 'weeks'); end = current.clone(); } if(current.clone().format('E') === '7'){ tempStart = current.clone(); tempEnd = current.clone().add(1, 'weeks'); }else{ tempStart = current.clone().subtract(1,'weeks'); tempEnd = current; } const dates = []; const dates2 = []; while (tempStart.isBefore(tempEnd)) { dates2.push(tempStart.clone()); tempStart.add(1, 'days'); } dates2.filter(item=>{ if(item.format('E') === '7'){ start = item.clone(); end = item.clone().add(1,'weeks'); } }) while (start.isBefore(end)) { dates.push(start.clone()); start.add(1, 'days'); } let dayList = ['日','一','二','三','四','五','六'] let list1 = []; let list2 = []; const createItem = () => { return ( <div> <Flex wrap="wrap" py="0.1rem" className="calendar-date webfont"> {dates.map((item, index) => { const className = ['date']; if (item.month() === current.month()) { className.push('t_month'); } if (item.isSame(moment(), 'day')) { className.push('t_day'); } const exist = filter(events, function (currentValue) { return moment(moment(item).format('YYYY-MM-DD')).isSame(moment(currentValue.start_date_time).format('YYYY-MM-DD')) || moment(moment(item).format('YYYY-MM-DD')).isSame(moment(currentValue.end_date_time).format('YYYY-MM-DD')) && moment(moment(currentValue.end_date_time).format('YYYY-MM-DD HH:mm:ss')).isAfter(moment(currentValue.end_date_time).set({ 'hour': 8, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')) || moment(moment(item).format('YYYY-MM-DD')).isBetween(moment(currentValue.start_date_time).format('YYYY-MM-DD'), moment(currentValue.end_date_time).format('YYYY-MM-DD')); }); if (item.isSame(selected, 'day')) { list1 = exist.filter(item=>item.task_type === '1'); list2 = exist.filter(item=>item.task_type === '2'); className.push('active'); } // if (item.isSame(today, 'day')) { // className.push('active'); // } if (exist.length > 0) { className.push('fixedDate'); } if(this.state.allList){ list1 = initList.filter(item=>item.task_type === '1'); list2 = initList.filter(item=>item.task_type === '2'); } return ( <Box key={index} w={1 / 7} className='date-wrapper'> <div onClick={() => this.getDateD(item)} className={className.join(' ')}>{item.date()}</div> </Box> ) })} </Flex> </div> ) } const createDate = () => { const { tagList,showNotes,showTags } = this.state; return ( <Box mt={1} pl="5%" className={"createDate"}> <LeftSearchBar styles={{ marginRight: '1.25rem' }} title='请输入关键字' submit={(v) => { if (v.length > 0) { this.setState({ allList:true },()=>{ actions.auth.onWorkNotes({ tags: v }); }) } else { this.setState({ allList:false },()=>{ actions.auth.onWorkNotes(''); }) } }} onchange={(currValue,oldValue) => { if(currValue!==oldValue){ this.setState({ searchValue: currValue, },()=>{ if (!currValue) { this.setState({ allList:false }) actions.auth.onWorkNotes(); } }) } }} value={this.state.searchValue} /> <div className='calendar_tag'> <ul> { tagList.length > 0 && tagList.map((item, index) => ( <TagItem key={`${item}_${index}`} delete={this.delete} onchange={this.onchange} item={item} index={index} list={true} /> )) } </ul> </div> { list1.length > 0 && <div> <div style={{marginTop:14,color:'rgba(17,115,225,.65)'}}>我的日程</div> <ul id="timeline" style={{ marginBottom: '1rem'}}> {list1.map((l, k) => { return ( <SwipeBotton key={k} item={l} refresh={() => actions.auth.onWorkNotes()} onClick={() => { this.scheduleQuery(l) this.enter('编辑') }} type='schedule' > <ListBox type='schedule' disabled={true} key={k} item={l} goToPath={() => { this.scheduleQuery(l) this.enter('编辑') }} setThours={this.setThours} /> </SwipeBotton> ); })} </ul> </div> } { list2.length > 0 && <div> <div style={{marginTop:14,color:'rgba(17,115,225,.65)'}}>我的便笺</div> <ul id="timeline" style={{ marginBottom: '1rem' }}> {list2.map((l, k) => { return ( <SwipeBotton key={k} item={l} refresh={() => actions.auth.onWorkNotes()} onClick={() => { this.scheduleQuery(l) this.enter('编辑') window.scrollTo(0, 0) }} type='schedule' > <ListBox type='schedule' disabled={true} key={k} item={l} goToPath={() => { this.scheduleQuery(l) this.enter('编辑') }} setThours={this.setThours} /> </SwipeBotton> ); })} </ul> </div> } </Box> ); }; return ( <div className={'Calendar FormStyle'} style={{paddingTop: 0}}> <DrawerBox> <div className={'relative'}> <div> <div className="calendar"> <Flex align="center" className="webfont pb-1"> <Box w={1 / 3} className="center"> <div className="sjx leftsanjiao" onClick={this.toPrevMonth.bind(this)} > </div> </Box> <Box auto className="center"> <div className="theDate"> {current.format('YYYY/MM')} </div> </Box> <Box w={1 / 3} className="center"> <div className="sjx rightsanjiao" onClick={this.toNextMonth.bind(this)} /> </Box> </Flex> <Flex py="0.2rem" className="center webfont dayfont"> { dayList.map(item=>( <Box key={item} w={1 / 7}>{item}</Box> )) } </Flex> {createItem()} <style> {dates.length === 42 ? ` .Calendar .calendarBox {top: 16rem} ` : dates.length === 7 ? ` .Calendar .calendarBox {top: 2rem} ` : `` } </style> <div className={'calendarBox'} /> <div className={'addIcon zindex2'} onClick={() => this.setAdd()}><i className={'iconfont iconxinjianricheng'} /></div> <div className={'addIcon zindex1'}><i className={'iconfont iconcaidan'} /></div> </div> </div> {createDate()} </div> </DrawerBox> </div> ); } } function dispatch(state) { return { auth: state.auth, DrawerOpen: state.auth.DrawerOpen, tagList: state.auth.tagList } } export default connect(dispatch)(Calendar);
