Автор оригинала: Chris Harrington.
Этот промежуточный мини-учебник Angularjs Mini является частью 1 из 5 серийных серий с каждым учением, как создать то, что вы можете использовать на вашей веб-странице. Этот учебник научит вас, как сделать календарь, используя директивы Angularjs среди других инструментов.
Другие сообщения в серии:
- Часть 2 – Анимированные флип-плитки
- Часть 3 – Как сделать скользящее меню с директивами
- Часть 4 – Создание контроля текстового блока фокусировки с модной обратной связью
- Часть 5 – Создание раскрывающегося управления для вашего сайта
Сегодня я собираюсь поговорить о том, как создать календарный контроль, используя Угловые js , Меньше CSS , Шрифт потрясающий и Момент Отказ Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше.
Сам календарь будет угловой директивой JS, которая позволяет пользователю выбрать дату, которая устанавливается на свойство контроллера. Я ввел календарь, и я буду включать этот стиль в этом руководстве, но вы, очевидно, не стесняетесь настроить, как он смотрит на содержание вашего сердца. Если вы тот читатель, который предпочитает просмотреть завершенный продукт и просто проверить источник самостоятельно, я собрал демонстрационную страницу, которая показывает календарь. Вы можете увидеть это здесь Отказ
Я собираюсь сломать запись в пару разных разделов. Во-первых, HTML. Это довольно просто, так как это просто директива календаря HTML. Затем мы пройдем через код JavaScript, который показывает, как я использую угловые J, чтобы обновить состояние Директивы, которое, в свою очередь, обновляет вид календаря. Наконец, я опишу, что я делаю с каждой из правил CSS, этот стиль календаря. Хотя большинство CSS просты, есть несколько вещей, которые я собираюсь перейти, это может быть новым для читателя.
Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.
HTML
Директива
В этом случае переменная на контроллере, которая обновляется с выбранной датой, будет «День».
Шаблон календаря
Поскольку шаблон календаря довольно велик, я извлек его и поместил его в свой собственный HTML-файл, который является лучшей практикой.
{{month.format("MMMM, YYYY")}}Sun Mon Tue Wed Thu Fri Sat{{day.number}}
Большая часть этого простой, но есть пара вещей, которые я должен перейти. Во-первых, мы используем шрифт Awesome, чтобы сделать стрелки, которые позволяют пользователю менять месяцы. Шрифт Awesome использует серию классов CSS для выполнения рендеринга, который в нашем случае – «угол угла) и« угол для законов », а также класс« FA ». Вам не нужно использовать тег I, но это как шрифт потрясающие парни показывают все свои примеры, поэтому я склонен следовать.
Следующая строка показывает, как мы используем угловые JS и момент, чтобы рендерировать текущий выбранный день. Переменная месяца, где мы храним ценность месяца дня. Мы используем функцию формата момента, чтобы сделать только имя месяца. Обратите внимание, что месяц – это отдельная переменная от выбранной даты, поскольку пользователь может выбрать дату вне выбранного месяца, используя трейлинг и ведущие недели. Например, конец месяца может быть в среду, но мы прокладываем остаток недели, используя дни с следующего месяца.
Последний раздел HTML содержит рендеринг для каждой из недель и дней. Мы зацикливаемся через список недель (как показано, используя Directive Ungular NG-Repeat), а затем еще один цикл внутри что для рендеринга дней недели (другой NG-Repeat). Синтаксис для Директивы NG-Repeat немного странно, но простой. «Неделя за несколько недель» указывает на то, что мы хотим повторить за несколько недель, и назначьте каждый элемент в массиве недель до переменной недели. Это похоже на Array.foreach метод. Затем мы устанавливаем пару стилей на каждый день в зависимости от состояния нашей директивы. Например, мы хотим выбранный день и сегодня иметь другой стиль из обычных дней. Мы выполняем это, используя директиву NG-класса Angular, что устанавливает класс CSS на элементе на основе правдивой переменной. Наконец, мы устанавливаем директиву NG-Click, которая позволяет нам выбрать день.
Javascript
Вот угловой код для настройки директивы календаря, а также контроллер для нашей тестовой страницы. Чтобы уменьшить путаницу, я бы разбил контроллер и директива в отдельные файлы, так как угловая лучшая практика. Ради краткости я включил весь сценарий в одном разделе.
var app = angular.module("demo", []);
app.controller("calendarDemo", function($scope) {
$scope.day = moment();
});
app.directive("calendar", function() {
return {
restrict: "E",
templateUrl: "templates/calendar.html",
scope: {
selected: "="
},
link: function(scope) {
scope.selected = _removeTime(scope.selected || moment());
scope.month = scope.selected.clone();
var start = scope.selected.clone();
start.date(1);
_removeTime(start.day(0));
_buildMonth(scope, start, scope.month);
scope.select = function(day) {
scope.selected = day.date;
};
scope.next = function() {
var next = scope.month.clone();
_removeTime(next.month(next.month()+1)).date(1));
scope.month.month(scope.month.month()+1);
_buildMonth(scope, next, scope.month);
};
scope.previous = function() {
var previous = scope.month.clone();
_removeTime(previous.month(previous.month()-1).date(1));
scope.month.month(scope.month.month()-1);
_buildMonth(scope, previous, scope.month);
};
}
};
function _removeTime(date) {
return date.day(0).hour(0).minute(0).second(0).millisecond(0);
}
function _buildMonth(scope, start, month) {
scope.weeks = [];
var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
while (!done) {
scope.weeks.push({ days: _buildWeek(date.clone(), month) });
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
}
function _buildWeek(date, month) {
var days = [];
for (var i = 0; i < 7; i++) {
days.push({
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
});
date = date.clone();
date.add(1, "d");
}
return days;
}
});
Во-первых, мы устанавливаем угловое приложение для демонстрации. Затем мы настроили контроллер для страницы, и, наконец, мы создаем директиву календаря. Единственное, что мы делаем в контроллере, устанавливают дневной переменной, календарь отправляет его выбранный день. Сама директива календаря немного сложнее. Во-первых, мы устанавливаем начальное значение для выбранного дня, основанного на том, установлен ли день контроллера еще. Если это не так, мы просто используем сегодняшнюю дату.
Мы используем Момент Чтобы установить время до полуночи, а затем генерировать текущую дату начала для начального месяца календаря. Затем мы создаем месяц, позвонив _buildmonth Функция, которая устанавливает список недель на объеме. Что, в свою очередь, называет _Buildweek Функция, которая делает то же самое в течение нескольких дней. Объект Day содержит коммунальные свойства, которые указывают на различные вещи, как будь то текущий день до выбранного месяца или, если сегодня день. Наконец, мы добавляем некоторые методы в объем, которые позволяют пользователю менять месяцы и выбирать день. Функция выбора тривиальна; Он просто устанавливает выбранную переменную сферу прохожденной в день. Предыдущие и следующие методы уменьшают и увеличивают месяц соответственно, а затем восстановить текущий месяц.
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 не поддерживает без предварительного префикса.
Затем мы устанавливаем некоторые переменные, связанные с стилем и интервалом, которые используются более одного раза. Если вы хотите изменить цвет, например, вторичная переменная цвета – это то, что вам нужно обновить. Остальные – это просто стандартное стиль, чтобы календарь выглядел несколько красивым и интервал, чтобы он был правильно выровнен.
Заключение
Вот и все! Как я уже упоминал выше, я собрал демонстрационную страницу, которая показывает календарь в своей окончательной форме. Вы можете увидеть это здесь Отказ
Спасибо за прочтение!