Месячный, еженедельный и ежедневный календарь
Просмотр календаря полезен для многих. Скажем, например, Бизнес, Больница, Логистика, Школы, Колледжи и т. Д. Требует просмотра данных в режиме календаря. В большинстве случаев предпочтение отдается ежемесячному календарю. Недавно у меня было требование от моего клиента о представлении этого календаря в системе управления больницей. Итак, я решил поделиться этим с вами, люди.
В этом руководстве вы узнаете, как реализовать представление календаря с помощью 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-фреймворки.
Итак, давайте сначала установим 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 состоит из трех встроенных компонентов. Они перечислены ниже.
- mwl-calendar-month-view -Месячный календарь
- mwl-calendar-week-view — Еженедельный календарь
- mwl-calendar-day-view -Дневной календарь
3.1.Предоставление ежемесячного календаря
Поэтому добавьте приведенный ниже код в файл app.component.html, чтобы отобразить ежемесячный просмотр.
Здесь нам нужно передать один важный ввод.
- viewDate — это простой объект даты JavaScript. Используется для обозначения сегодняшнего дня или желаемой даты.
Итак, создайте новую переменную с именем viewDate в файле app.component.ts.
Ежемесячный просмотр результатов
3.2.Предоставление еженедельного календаря
Используйте приведенный ниже код для отображения еженедельного просмотра в файле app.component.html.
Еженедельный просмотр
3.3. Сдача дневного календаря
Используйте приведенный ниже код, чтобы отобразить дневное представление в файле app.component.html.
4. Назад, Далее и Сегодня
Пакет Angular Calendar предлагает встроенные функции для перехода к предыдущему, следующему и сегодняшнему дню. Это атрибуты тега HTML.
- mwlCalendarPreviousView — переход к предыдущему
- mwlCalendarToday — перейти к сегодняшнему дню
- mwlCalendarNextView — переход к следующему
Навигация основана на текущем представлении календаря. Скажем, например, если у вас есть просмотр календаря на месяц, тогда следующий будет отображаться в следующем месяце. А предыдущий покажет предыдущий месяц.
Если у вас есть еженедельный просмотр календаря, то следующая будет отображать следующую неделю, а предыдущая — предыдущую. То же самое применимо и к дневному обзору.
Я собираюсь использовать эти атрибуты с элементом кнопки. И нам нужно привязать представление календаря к предыдущему и следующему. Поэтому нам нужно импортировать CalendarView в ваш файл app.component.ts и создать представление, как показано ниже.
По умолчанию я назначаю просмотр за месяц. Вы можете изменить его на еженедельный или ежедневный.
Теперь добавьте приведенный ниже код в файл app.component.html, чтобы перейти к желаемой дате просмотра.
Здесь мы прикрепили представление календаря с атрибутом представления. Если вы нажмете предыдущую кнопку, отобразится календарь за предыдущий месяц. И если вы нажмете кнопку «Далее», то отобразится календарь на следующий месяц.
5. С помощью календаря
Теперь у нас есть статический календарь (только ежемесячно, еженедельно или ежедневно). Мы можем изменить это с помощью Angular Switch. Мы собираемся изменить существующий код с помощью переключателя. Событие нажатия кнопки переключает представление календаря. Создайте три кнопки с событием click, чтобы изменить представление в файле app.component.html.
Затем создайте функцию setView () в вашем ts-файле.
Нам также нужны небольшие дополнительные изменения в файле HTML. Значит, мы не реализовали корпус переключателя. Итак, реализуйте случай переключения, подобный приведенному ниже, в вашем HTML-файле.
Если вы нажмете Месяц, Неделю или День, появится соответствующий вид.
6.Показать количество значков мероприятия
Пока мы сделали только необходимое. Только часть просмотра. Теперь главный вопрос — как добавить событие в календарь или как показать количество событий в календаре. В моем клиентском требовании они должны видеть, сколько встреч забронировано в день (количество всех встреч в день), и когда щелкает конкретный день, он показывает все забронированные встречи.
Показать все зарезервированные данные в модальном режиме очень просто. Это простое событие щелчка. Теперь возникает сложный вопрос, как показать счет в дате. Мы должны использовать атрибут событий. Для этого нам нужно импортировать класс CalendarEvent. И создайте объект события, как показано ниже.
Вставьте приведенный выше код в файл app.component.ts. Событию нужно несколько важных параметров, они перечислены ниже.
- начало — дата или время объекта. Обязательный
- конец — дата или время объекта. По желанию
- title — Ваша информация. Обязательный
И добавьте событие в представление календаря в файле app.component.html.
Он покажет количество значков 1 на вашу текущую дату. Если вы хотите показать другое событие в тот же день, добавьте еще одно событие в файл ts.
Теперь он покажет два счета в один и тот же день. Здесь проблема в том, что он покажет точки на основе подсчета. Если у вас есть 100 событий, то будет отображаться 100 точек. Если вы не хотите отображать точки, просто используйте этот код в своем файле style.scss.
.cal-events {
display: none !important;
}
Если вы хотите получить данные из базы данных, передайте дату или время для параметра start и задайте значение заголовка с помощью объекта CalendarEvent. Итерируйте данные, используя цикл for, как показано ниже.
Событие 7-дневного клика
Когда пользователь щелкает дату в месячном представлении, он должен показать всю информацию о встрече в конкретный день в модальном окне. Для этого
в месячном календаре есть событие dayClicked. Добавьте событие dayClicked в свой ежемесячный просмотр, как показано ниже.
Затем создайте функцию dayClicked () в вашем ts-файле, как показано ниже.
Здесь я показал демонстрационный код. Вы можете реализовать модальное окно для отображения данных на основе даты, когда пользователь щелкнул мышью.
Резюме
В этом уроке мы узнали разные вещи. От базовой установки до добавления событий в календарь. Вот краткий список.
- Как создать ежемесячный календарь
- Как создать еженедельный календарь
- Как создать дневной календарь
- Как перейти на следующий и предыдущий день / неделю / месяц
- Как динамически переключаться на ежедневный / еженедельный / ежемесячный просмотр.
- Как добавить события к определенной дате
- Событие Day Click
Это все. Надеюсь, вам понравился этот урок.
Если есть вопросы, то прокомментируйте.
Получите полный исходный код на GitHub.
https://github.com/bharathirajatut/angular-examples/tree/master/angular-calendar-example
Демо-ссылка
Https://angular-calendar.com/#/kitchen-sink
Ссылка на пакет Angular Calendar
