Помогите сделать стиль
Есть готовый код календаря, надо делать стиль по картинке. Ничего не вышло чет
картинка https://ibb.co/TcY2wVN <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="moment/min/moment.min.js"></script> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script> <body> <table id="app"></table> <script type="text/babel"> class Calendar extends React.Component { constructor(props) { super(props); var moments = moment().format("MMM"); this.state = { month: moment(), selected: moment().startOf('day') }; this.previous = this.previous.bind(this); this.next = this.next.bind(this); } previous() { const { month, } = this.state; this.setState({ month: month.subtract(1, 'month'), }); } next() { const { month, } = this.state; this.setState({ month: month.add(1,'month'), }); } select(day) { this.setState({ selected: day.date, month: day.date.clone(), }); } renderWeeks() { let weeks = []; let done = false; let date = this.state.month.clone().startOf("month").add("w" -1).day("Sunday"); let count = 0; let monthIndex = date.month(); const { selected, month, } = this.state; while (!done) { weeks.push( <Week key={date} date={date.clone()} month={month} select={(day)=>this.select(day)} selected={selected} /> ); date.add(1, "w"); done = count++ > 2 && monthIndex !== date.month(); monthIndex = date.month(); } return weeks; }; renderMonthLabel() { const { month, } = this.state; return <span className="month-label">{month.format("MMMM YYYY")}</span>; } render() { return ( <section className="calendar"> <header className="header"> <div className="month-display row"> <i onClick={this.previous}> Prev </i> {this.renderMonthLabel()} <i onClick={this.next}> Next </i> </div> <DayNames /> </header> {this.renderWeeks()} </section> ); } } class DayNames extends React.Component { render() { return ( <div className="row day-names"> <td className="day">S</td> <td className="day">M</td> <td className="day">T</td> <td className="day">W</td> <td className="day">T</td> <td className="day">F</td> <td className="day">S</td> </div> ); } } class Week extends React.Component { render() { let days = []; let { date, } = this.props; const { month, selected, select, } = this.props; for (var i = 0; i < 7; i++) { let day = { name: date.format("dd").substring(0, 1), number: date.date(), isCurrentMonth: date.month() === month.month(), isToday: date.isSame(new Date(), "day"), date: date }; days.push( <Day day={day} selected={selected} select={select}/> ); date = date.clone(); date.add(1, "day"); } return ( <div className="row week" key={days[0]}> {days} </div> ); } } class Day extends React.Component { render() { const { day, day: { date, isCurrentMonth, isToday, number }, select, selected } = this.props; return ( <td key={date.toString()} className={"day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : "")} onClick={()=>select(day)}>{number} </td> ); } } ReactDOM.render(<Calendar/>, document.getElementById('app')); </script> </body> </html> |
Часовой пояс GMT +3, время: 02:20. |