Создайте календарь с помощью Angular и Bootstrap

Месячный, еженедельный и ежедневный календарь

Просмотр календаря полезен для многих. Скажем, например, Бизнес, Больница, Логистика, Школы, Колледжи и т. Д. Требует просмотра данных в режиме календаря. В большинстве случаев предпочтение отдается ежемесячному календарю. Недавно у меня было требование от моего клиента о представлении этого календаря в системе управления больницей. Итак, я решил поделиться этим с вами, люди.

В этом руководстве вы узнаете, как реализовать представление календаря с помощью Angular. Реализовать представление календаря очень просто. Просто установите пакет и включите его в свой ts-файл и HTML-файл, он будет работать нормально. Здесь мы увидим некоторые дополнительные вещи, например, как показать количество значков и как просмотреть информацию на определенную дату.

Пример экрана вывода.

Не теряя времени, перейдем к теме. Мы рассмотрим их на пошаговом примере.

1. Создать проект Angular

Откройте командную строку или терминал и просто введите команду ниже, чтобы создать новый проект Angular.

ng new angular-calendar-example

Приведенная выше команда создаст для вас проект. Следующим шагом будет установка необходимой библиотеки. Итак, откройте только что созданный проект Angular в редакторе кода VS. Я использую редактор кода VS. Вы можете использовать любой другой редактор. Но редактор кода VS имел больше функциональных возможностей по сравнению с другими редакторами.

2. Установите библиотеку календаря Angular

По умолчанию пакет Angular Calenda r зависит от структуры Bootstrap CSS. Однако у него была отдельная библиотека CSS для отображения календаря. Вы можете использовать ту же структуру CSS. Или вы можете использовать желаемый CSS-фреймворк. Для простого объяснения я использую Bootstrap Framework. Но в моем проекте я реализован с помощью CSS-фреймворка Angular Material. Так что работать несложно. Однако вам нужно поработать над размещением элемента, если вы используете другие CSS-фреймворки.

См. также:  Угловые RxJ получают только количество значений, а затем испускают

Итак, давайте сначала установим CSS Bootstrap с помощью приведенной ниже команды.

npm install --save bootstrap

И включите установленную библиотеку Bootstrap в файл style.scss.

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

А теперь установите пакет Angular Calendar, используя команду ниже.

npm install --save angular-calendar date-fns

Затем импортируйте файл CSS календаря в файл style.scss.

@import "../node_modules/angular-calendar/css/angular-calendar.css";

Если вы не выполните этот шаг, просмотр календаря не отобразится.

Теперь импортируйте CalendarModule, DateAdapter, adapterFactory в файл app.module.ts.

И включите указанные выше модули в раздел импорта файла app.module.ts, как показано ниже.

Теперь мы установили и настроили необходимые библиотеки в нашем проекте Angular. Следующим шагом будет визуализация представления календаря.

3.Отправить просмотр календаря

Пакет Angular Calendar состоит из трех встроенных компонентов. Они перечислены ниже.

  1. mwl-calendar-month-view -Месячный календарь
  2. mwl-calendar-week-view — Еженедельный календарь
  3. mwl-calendar-day-view -Дневной календарь

3.1.Предоставление ежемесячного календаря

Поэтому добавьте приведенный ниже код в файл app.component.html, чтобы отобразить ежемесячный просмотр.

Здесь нам нужно передать один важный ввод.

  1. viewDate — это простой объект даты JavaScript. Используется для обозначения сегодняшнего дня или желаемой даты.

Итак, создайте новую переменную с именем viewDate в файле app.component.ts.

Ежемесячный просмотр результатов

3.2.Предоставление еженедельного календаря

Используйте приведенный ниже код для отображения еженедельного просмотра в файле app.component.html.

Еженедельный просмотр

3.3. Сдача дневного календаря

Используйте приведенный ниже код, чтобы отобразить дневное представление в файле app.component.html.

4. Назад, Далее и Сегодня

Пакет Angular Calendar предлагает встроенные функции для перехода к предыдущему, следующему и сегодняшнему дню. Это атрибуты тега HTML.

  1. mwlCalendarPreviousView — переход к предыдущему
  2. mwlCalendarToday — перейти к сегодняшнему дню
  3. mwlCalendarNextView — переход к следующему

Навигация основана на текущем представлении календаря. Скажем, например, если у вас есть просмотр календаря на месяц, тогда следующий будет отображаться в следующем месяце. А предыдущий покажет предыдущий месяц.

Если у вас есть еженедельный просмотр календаря, то следующая будет отображать следующую неделю, а предыдущая — предыдущую. То же самое применимо и к дневному обзору.

См. также:  Культ мастерства и как слова «я не знаю» могут вас спасти

Я собираюсь использовать эти атрибуты с элементом кнопки. И нам нужно привязать представление календаря к предыдущему и следующему. Поэтому нам нужно импортировать CalendarView в ваш файл app.component.ts и создать представление, как показано ниже.

По умолчанию я назначаю просмотр за месяц. Вы можете изменить его на еженедельный или ежедневный.

Теперь добавьте приведенный ниже код в файл app.component.html, чтобы перейти к желаемой дате просмотра.

Здесь мы прикрепили представление календаря с атрибутом представления. Если вы нажмете предыдущую кнопку, отобразится календарь за предыдущий месяц. И если вы нажмете кнопку «Далее», то отобразится календарь на следующий месяц.

5. С помощью календаря

Теперь у нас есть статический календарь (только ежемесячно, еженедельно или ежедневно). Мы можем изменить это с помощью Angular Switch. Мы собираемся изменить существующий код с помощью переключателя. Событие нажатия кнопки переключает представление календаря. Создайте три кнопки с событием click, чтобы изменить представление в файле app.component.html.

Затем создайте функцию setView () в вашем ts-файле.

Нам также нужны небольшие дополнительные изменения в файле HTML. Значит, мы не реализовали корпус переключателя. Итак, реализуйте случай переключения, подобный приведенному ниже, в вашем HTML-файле.

Если вы нажмете Месяц, Неделю или День, появится соответствующий вид.

6.Показать количество значков мероприятия

Пока мы сделали только необходимое. Только часть просмотра. Теперь главный вопрос — как добавить событие в календарь или как показать количество событий в календаре. В моем клиентском требовании они должны видеть, сколько встреч забронировано в день (количество всех встреч в день), и когда щелкает конкретный день, он показывает все забронированные встречи.

Показать все зарезервированные данные в модальном режиме очень просто. Это простое событие щелчка. Теперь возникает сложный вопрос, как показать счет в дате. Мы должны использовать атрибут событий. Для этого нам нужно импортировать класс CalendarEvent. И создайте объект события, как показано ниже.

Вставьте приведенный выше код в файл app.component.ts. Событию нужно несколько важных параметров, они перечислены ниже.

  1. начало — дата или время объекта. Обязательный
  2. конец — дата или время объекта. По желанию
  3. title — Ваша информация. Обязательный
См. также:  5 ключевых тем интеллектуальной автоматизации на 2021 год

И добавьте событие в представление календаря в файле app.component.html.

Он покажет количество значков 1 на вашу текущую дату. Если вы хотите показать другое событие в тот же день, добавьте еще одно событие в файл ts.

Теперь он покажет два счета в один и тот же день. Здесь проблема в том, что он покажет точки на основе подсчета. Если у вас есть 100 событий, то будет отображаться 100 точек. Если вы не хотите отображать точки, просто используйте этот код в своем файле style.scss.

.cal-events {
    display: none !important;
}

Если вы хотите получить данные из базы данных, передайте дату или время для параметра start и задайте значение заголовка с помощью объекта CalendarEvent. Итерируйте данные, используя цикл for, как показано ниже.

Событие 7-дневного клика

Когда пользователь щелкает дату в месячном представлении, он должен показать всю информацию о встрече в конкретный день в модальном окне. Для этого
в месячном календаре есть событие dayClicked. Добавьте событие dayClicked в свой ежемесячный просмотр, как показано ниже.

Затем создайте функцию dayClicked () в вашем ts-файле, как показано ниже.

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

Резюме

В этом уроке мы узнали разные вещи. От базовой установки до добавления событий в календарь. Вот краткий список.

  1. Как создать ежемесячный календарь
  2. Как создать еженедельный календарь
  3. Как создать дневной календарь
  4. Как перейти на следующий и предыдущий день / неделю / месяц
  5. Как динамически переключаться на ежедневный / еженедельный / ежемесячный просмотр.
  6. Как добавить события к определенной дате
  7. Событие Day Click

Это все. Надеюсь, вам понравился этот урок.

Если есть вопросы, то прокомментируйте.

Получите полный исходный код на GitHub.

https://github.com/bharathirajatut/angular-examples/tree/master/angular-calendar-example

Демо-ссылка

Https://angular-calendar.com/#/kitchen-sink

Ссылка на пакет Angular Calendar

Https://www.npmjs.com/package/angular-calendar

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: