Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2019, 21:32
Новичок на форуме
Отправить личное сообщение для oleg23444 Посмотреть профиль Найти все сообщения от oleg23444
 
Регистрация: 27.05.2019
Сообщений: 1

Помогите сделать стиль
Есть готовый код календаря, надо делать стиль по картинке. Ничего не вышло чет


картинка 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите сделать бонус при вводе в текста в форму dezytube Общие вопросы Javascript 1 24.03.2017 08:57
Помогите пожалуйста сделать мне такой слайдер на страничке Misha Vigdarov Элементы интерфейса 0 18.09.2016 17:45
Помогите сделать автозапуск видео на сайте Petrovna80 Ваши сайты и скрипты 4 02.09.2016 23:24
Помогите сделать 47rus Общие вопросы Javascript 8 19.03.2016 21:00
Помогите сделать список из выборки shaltay jQuery 15 03.04.2011 17:54