There are plenty of awesome libraries available on GitHub which are easy to integrate with pure Angular projects. We can find wrappers for these libraries on GitHub.
One such pure library is FullCalendar which supports management of events in different views of a calendar like Day, Week, Month and List view.

How to get FullCalendar’s code, initialize a calendar, and other basic principles.
There are a few different ways to install the FullCalendar library.
Initialize with ES6 Build System
For non-trivial projects, it is recommended to use an ES6-compatible build system like Webpack or Rollup along with a package manager like NPM or Yarn.

Initialize with Script Tags
It’s possible to manually include the necessary <script> tags in the head of your HTML page and then initialize a calendar via browser globals. You will leverage one of FullCalendar’s prebuilt bundles to do this.

Handlers

How to attach handlers to your calendar, which execute when other things happen.

Methods

Methods provide ways to manipulate the calendar from JavaScript code.

MORE ADVANCED

CSS Customization

This article describes the various techniques for customizing the CSS of your calendar.

View-Specific Options

You can specify options that apply only to specific calendar views.

Get/Set Options Dynamically

You can get/set calendar options after a calendar has already been initialized.

Render

Will initially render a calendar, or if it is already rendered, will rerender it.

Destroy

Restores the container element to the state before FullCalendar was initialized.

rerenderDelay

The amount of milliseconds to wait before rerendering anything on a calendar.

Calendar::render

Initially render the calendar, or rerender it after initialization.

Calendar::batchRendering

A way to group operations that cause rerenders.

ClassName Inputs

CSS classNames can be injected into FullCalendar’s DOM in various places. They can be provided in the following formats. These examples use eventClassNames from the event render hooks:

Content Injection

Custom content can be injected into FullCalendar’s DOM in various places. This content can be provided in the following formats. These examples use eventContent from the event render hooks:

SEE ALSO

initialDate
The initial date displayed when the calendar first loads.

InitialView
The initial view when the calendar loads.

View API
FullCalendar provides settings, methods, and callbacks for interacting with and switching the current view.

This article describes the step-by-step process of integrating FullCalendar in Angular-6+.

First install through npm:

npm install ng-fullcalendar

Or you can add this in your SCSS pipe

@import “~/fullcalendar/dist/fullcalendar.css”;

your app.component.html

include the FullCalendarModule module in your module.

Import CalendarComponent in your component :

FullCalendar View :

Callbacks
Output 27 EventEmitters
eventDrop
eventResize
eventResizeStart
eventResizeStop
eventClick
clickButton
windowResize
viewRender
eventAfterRender
eventAfterAllRender
viewDestroy
eventRender
eventDestroy
eventMouseOver
eventMouseOut
initialized
select
unselect
dayClick
navLinkDayClick
navLinkWeekClick
eventDragStart
eventDragStop
drop
eventReceive
dayRender
resourceRender

References available.