Рубрики
Без рубрики

Строительство календаря, используя js js, меньше css и шрифт потрясающе

Узнайте, как создать свой собственный контроль календаря, используя React JS, меньшие CSS, Stone Awesome, а момент JS.

Автор оригинала: Chris Harrington.

Сегодня я собираюсь поговорить о том, как создать календарный контроль, используя Реагировать js , Меньше CSS , Шрифт потрясающий и Момент JS Отказ Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше. Сам календарь будет реагировать класс JS, который позволяет пользователю выбрать дату, которая устанавливается на свойство контроллера. Я ввел календарь, и я буду включать этот стиль в этом руководстве, но вы, очевидно, не стесняетесь настроить, как он смотрит на содержание вашего сердца. Если вы тот читатель, который предпочитает просмотреть завершенный продукт и просто проверить источник самостоятельно, я собрал демонстрационную страницу, которая показывает календарь. Вы можете увидеть это здесь Отказ Этот календарный контроль не следует принимать как копию и вставить решение проблемы, у вас есть; Это подразумевается в качестве руководства, чтобы реагировать в себе, в отличие от предоставления продуктивного календаря.

образец

Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.

Я разбил контроль календаря в несколько разных классов: календарь, понтер и неделю. Класс календаря содержит два других. Daynames – это простой заголовок для календаря, который отображает (неудивительные) недели имен, в то время как урок недели несет ответственность за рендеринг каждой отдельной недели.

Календарь

var Calendar = React.createClass({
  getInitialState: function() {
    return {
      month: this.props.selected.clone()
    };
  },

  previous: function() {
    var month = this.state.month;
    month.add(-1, "M");
    this.setState({ month: month });
  },

  next: function() {
    var month = this.state.month;
    month.add(1, "M");
    this.setState({ month: month });
  },

  select: function(day) {
    this.props.selected = day.date;
    this.forceUpdate();
  },

  render: function() {
    return 

      

        
        {this.renderMonthLabel()}
        
      

      
      {this.renderWeeks()}
    
;
  },

  renderWeeks: function() {
    var weeks = [],
      done = false,
      date = this.state.month.clone().startOf("month").add("w" -1).day("Sunday"),
      monthIndex = date.month(),
      count = 0;

    while (!done) {
      weeks.push();
      date.add(1, "w");
      done = count++ > 2 && monthIndex !== date.month();
      monthIndex = date.month();
    }

    return weeks;
  },

  renderMonthLabel: function() {
    return {this.state.month.format("MMMM, YYYY")};
  }
});

При рендеринге этого класса единственным предпризом требуется первоначально установленная дата; Все остальное происходит от этого. В нашем Получающийся стадь Метод, мы устанавливаем текущий месяц, чтобы быть таким же, как выбранная дата. Месяц и выбранные даты являются двумя разными переменными для учета пользователей, движущейся с февраля, например, к марту, не выбирая новую дату. Снаружи рендеринга наш календарный класс имеет три метода: предыдущий , Следующий и Выберите Отказ предыдущий и Следующий Методы несут ответственность за перемещение представления календаря пользователя из текущего месяца до предыдущего и в следующем месяце, соответственно, в то время как метод выбора позаботится о маркировке новой даты в качестве выбранной даты. Нам нужно выполнить ForceUpdate Здесь заставить визуализацию вида, поскольку класс календаря не смотрит выбранную собственность.

оказывать Способ выписывает немного довольно стандартных HTML. Здесь мы используем Шрифт потрясающий Чтобы сделать некоторые предыдущие и следующие стрелки, которые обертывают этикетку текущего месяца. Тогда мы оказываем Тайны Класс, а затем список Неделя классы. Там есть какая-то логика, чтобы позволить показать трейлинг и ведущие дни тоже.

Дневные реакции

Тайны Класс самый простой из трех. Осуществленная исключительная обязанность заключается в том, чтобы сделать имена дней возле вершины календаря.

var DayNames = React.createClass({
  render: function() {
    return 

      Sun
      Mon
      Tue
      Wed
      Thu
       	Fri
       	Sat
    
;
  }
});

Не очень много говорить об этом. Обратите внимание на использование классное значение вместо Класс ; Это легкая ошибка, чтобы сделать при первом запуске с реагированными.

Неделя

var Week = React.createClass({
  render: function() {
    var days = [],
      date = this.props.date,
      month = this.props.month;

    for (var i = 0; i < 7; i++) {
      var 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.number});
      date = date.clone();
      date.add(1, "d");

    }

    return 

      {days}
    

  }
});

Неделя Класс принимает четыре реквизита: дата, месяц, выберите и выбранный. Первый указывает на начало недели, а месяц дает нам текущий месяц для определения, если нам нужны трейлинг или ведущие дни. Третий и четвертый реквизит справится с выбором даты. Метод Render оказывает семь дней, при этом установив различные классы CSS в день, один для каждого для выбранного, сегодня или трейлинг/ведущие дни.

CSS.

.vertical-centre (@height) {
    height:@height;
    line-height:@height !important;
    display:inline-block;
    vertical-align:middle;
}

.border-box {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

@border-colour:#CCC;
calendar {
    float:left;
    display:block;
    .border-box;
    background:white;
    width:300px;
    border:solid 1px @border-colour;
    margin-bottom:10px;
    
    @secondary-colour:#2875C7;
    @spacing:10px;
    @icon-width:40px;
    @header-height:40px;

    >div.header {
        float:left;
        width:100%;
        background:@secondary-colour;
        height:@header-height;
        color:white;
        
        >* { 
            .vertical-centre(@header-height);
        }
        
        >i {
            float:left;
            width:@icon-width;
            font-size:1.125em;
            font-weight:bold;
            position:relative;
            .border-box;
            padding:0 @spacing;
            cursor:pointer;
        }
        
        >i.fa-angle-left {
            text-align:left;
        }
        
        >i.fa-angle-right {
            text-align:right;
            margin-left:@icon-width*-1;
        }
        
        >span { 
            float:left;
            width:100%;
            font-weight:bold;
            text-transform:uppercase;
            .border-box;
            padding-left:@icon-width+@spacing;
            margin-left:@icon-width*-1;
            text-align:center;
            padding-right:@icon-width;
            color:inherit;
        }
    }
    >div.week {
        float:left;
        width:100%;
        border-top:solid 1px @border-colour;
        
        &:first-child {
            border-top:none;
        }
        
        >span.day {
            float:left;
            width:100%/7;
            .border-box;
            border-left:solid 1px @border-colour;
            font-size:0.75em;
            text-align:center;
            .vertical-centre(30px);
            background:white;
            cursor:pointer;
            color:black;
            
            &:first-child {
                border-left:none;
            }
            
            &.today {
                background:#E3F2FF;
            }
            
            &.different-month {
                color:#C0C0C0;
            }
            
            &.selected {
                background:@secondary-colour;
                color:white;
            }
        }
        
        &.names>span {
            color:@secondary-colour;
            font-weight:bold;
        }
    }
}

Первые несколько строк определяют несколько полезных смеси, используя меньше CSS. Первый позволяет нам центрировать элементы вертикально, предполагая, что у нас есть высота упаковочного элемента. Второе устанавливает свойство Box-Sizing, которое Firefox не поддерживает без предварительного префикса.

Затем мы устанавливаем некоторые переменные, связанные с стилем и интервалом, которые используются более одного раза. Если вы хотите изменить цвет, например, вторичная переменная цвета – это то, что вам нужно обновить. Остальные – это просто стандартное стиль, чтобы календарь выглядел несколько красивым и интервал, чтобы он был правильно выровнен.

Заключение

Вот и все! Как я уже упоминал выше, я собрал демонстрационную страницу, которая показывает календарь в своей окончательной форме. Вы можете увидеть это здесь Отказ Спасибо за прочтение!

Читайте ещё по теме: