Angular: Как создать полноэкранный календарь, такой как в Outlook

Angular: Как создать полноэкранный календарь, такой как в Outlook

От автора: некоторое время назад в проекте Angular мне нужно было отобразить полноэкранный календарь, такой как в outlook. Поэтому, как обычный ленивый разработчик, я начал искать в Интернете пакет NPM, который мог бы сделать эту работу.

К моему удивлению, я не нашел ничего, что могло бы покрыть мои потребности на 100%, поэтому я построил свой собственный календарь! Это конечный результат:

PS: Пожалуйста, будьте снисходительны ко мне, HTML и CSS не являются моей сильной стороной.

Вот история того, как я это сделал.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

1-й давайте создадим компонент Angular

Это наша отправная точка, компонент Angular и массив, который будет содержать дни, для которых будет отображаться календарь.

2-й давайте посмотрим, как выглядит класс CalendarDay

Позвольте немного объяснить конструктор.

Я установил свойство isPastDate, чтобы календарь знал, как отображать или отключать прошлые даты, и свойство isToday, чтобы пользовательский интерфейс знал, как выводить сегодняшнюю дату.

Причина, по которой я использую .setHours (0,0,0,0), заключается в том, что я хочу быть уверен, что сравниваю начало дня, а часы не имеют значения.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

3-й давайте заполним календарь необходимыми днями

У меня есть комментарии в коде, которые объясняют логику.

В-четвертых, давайте добавим немного HTML и CSS, чтобы фактически отобразить календарь

В HTML вы увидите, что я использую пайп с именем chunk. Я немного объясню его использование и код.

5-й сейчас пришло время объяснить и показать код для пайпа chunk

Поскольку массив календаря содержит 42 элемента, но мы хотим показать 7 элементов в каждой строке, пайп chunk будет создавать массив из 6 массивов внутри для каждой недели.

Этот пост был написан с любовью.

Автор: Ricky Stam

Источник: https://dev.to

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Angular 4 NgRx

Посмотрите видео по Angular 4 NgRx

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий