Want to learn about the feature to drag and create events in your angular app? Understand how you can Implement Angular Calendar Component in this tutorial

1. Implement
Angular Calendar
Component: How
to Drag & Create
Events?
www.bacancytechnology.com

2. Introduction

3. Angular Calendar is a component
that allows a user to drag and
create events in a calendar and
also shows events on the month,
week, or day view. In this
tutorial, we will learn how to
implement Angular Calendar
component with the feature to
drag and create events.

4. Tutorial Goal:
Implement
Angular
Calendar
Component

5. Before building the demo
click the below link to watch
video and see what are we
going to build.
Video

6. Create an
Angular CLI
Project

7. To install Angular CLI run the
below-given command:
npm install -g @angular/cli
Run the following command for
creating a new Angular Project:
ng new angular-calendar-demo
cd angular-calendar-demo

8. Install Angular
Calendar

9. Install angular-calendar &
date-fns through npm:
npm install angular-calendar date-fns

10. Adding
Angular
Calendar to
your
Application

11. Import the CSS in global styles of
the project i.e. src/styles.css.
@import "../node_modules/angular-
calendar/css/angular-calendar.css";
Import angular-calendar & date-fns
in the app.module.ts file as shown in
the following code.

12. import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { AppRoutingModule } from './app-
routing.module';
import { AppComponent } from
'./app.component';
import { CalendarModule, DateAdapter } from
'angular-calendar';
import { adapterFactory } from 'angular-
calendar/date-adapters/date-fns';
import { DragCompComponent } from
'./view/drag-comp/drag-comp.component';
@NgModule({
declarations: [AppComponent,
DragCompComponent],
imports: [
BrowserModule,
// app.module.ts

13. AppRoutingModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory,
}),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

14. Development. Optimization.
Maintenance. Everything at Bacancy!
Get ready to lessen your struggle! Hire
Angular developer from Bacancy today
and start developing your dream product!
We are here for you!

15. Create a New
Component

16. ng generate component drag-comp
Use the following TypeScript code: Business Logic
// drag-comp.component.ts
<div class="container">
<ng-template
#weekViewHourSegmentTemplate
let-segment="segment" vent
let-locale="locale"
let-
segmentHeight="segmentHeight"
let-isTimeLabel="isTimeLabel"
>
import { ChangeDetectorRef } from
'@angular/core';
import {
ChangeDetectionStrategy,

17. Component,
OnInit,
ViewEncapsulation,
} from '@angular/core';
import { CalendarEvent,
CalendarEventTitleFormatter } from
'angular-calendar';
import { WeekViewHourSegment } from
'calendar-utils';
import { addDays, addMinutes,
endOfWeek } from 'date-fns';
import { fromEvent } from 'rxjs';
import { finalize, takeUntil } from
'rxjs/operators';
function floorToNearest(amount: number,
precision: number) {
return Math.floor(amount / precision) *
precision;
}

18. @Component({
selector: 'app-drag-comp',
templateUrl: './drag-
comp.component.html',
styleUrls: ['./drag-
comp.component.scss'],
changeDetection:
ChangeDetectionStrategy.OnPush,
providers: [
{
provide:
CalendarEventTitleFormatter,
},
],
encapsulation:
ViewEncapsulation.None,
})
export class DragCompComponent
implements OnInit {
viewDate = new Date();

19. weekStartsOn: 0 = 0;
dragToCreateActive = false;
events: CalendarEvent[] = [];
days: any[] = [];
slots: any[] = [];
constructor(private cdr:
ChangeDetectorRef) {}
ngOnInit(): void {
this.initDays();
}
initDays() {
this.days = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',

20. f ];
for (let i = 0; i < this.days.length; i++) {
let a = { day: this.days[i], time: [] };
this.slots.push(a);
};
}
startDragToCreate(
segment: WeekViewHourSegment,
mouseDownEvent: MouseEvent,
segmentElement: HTMLElement
) {
const dragToSelectEvent: CalendarEvent
= {
id: this.events.length,
title: 'New slot',
start: segment.date,
meta: {
tmpEvent: true,

21. },
actions: [
{
label: '',
onClick: ({ event }: { event:
CalendarEvent }): void => {
this.events =
this.events.filter((iEvent) => iEvent !==
event);
this.removeSlot(event.id);
},
},
],
};
this.events = [...this.events,
dragToSelectEvent];
const segmentPosition =
segmentElement.getBoundingClientRect
();
this.dragToCreateActive = true;

22. const endOfView =
endOfWeek(this.viewDate, {
weekStartsOn: this.weekStartsOn,
});
fromEvent(document, 'mousemove')
.pipe(
finalize(() => {
delete
dragToSelectEvent.meta.tmpEvent;
this.dragToCreateActive = false;
this.refresh();
}),
takeUntil(fromEvent(document,
'mouseup'))
)
.subscribe((mouseMoveEvent:
MouseEvent) => {
const minutesDiff = ceilToNearest(
mouseMoveEvent.clientY -

23. segmentPosition.top,
30
);
const daysDiff =
floorToNearest(
mouseMoveEvent.clientX -
segmentPosition.left,
segmentPosition.width
) / segmentPosition.width;
const newEnd =
addDays(addMinutes(segment.date,
minutesDiff), daysDiff);
if (newEnd > segment.date &&
newEnd < endOfView) {
dragToSelectEvent.end = newEnd;
}
this.refresh();
});

24. }
private refresh() {
this.events = [...this.events];
this.cdr.detectChanges();
this.getSlots();
}
convertTime(t) {
return new Date(t).toTimeString();
}
convertDay(d) {
return new Date(d).toLocaleString('en-
us', {
weekday: 'long',
});
}
getSlots() {
this.slots.map((day, i) => {
this.slots[i].time = [];

25. this.events.forEach((e) => {
if (day.day == this.convertDay(e.start)) {
this.slots[i].time.push({
startTime: e.start,
endTime: e.end,
id: e.id,
});
}
});
});
}
removeSlot(id) {
for (let j = 0; j < this.slots.length; j++) {
this.slots[j].time =
this.slots[j].time.filter((t) => t.id !== id);
}
}
}

26. Use the following HTML code: User Interface
// drag-comp.component.html
<div class="container">
<ng-template
#weekViewHourSegmentTemplate
let-segment="segment" vent
let-locale="locale"
let-
segmentHeight="segmentHeight"
let-isTimeLabel="isTimeLabel"
>
<div #segmentElement
class="cal-hour-segment"
[style.height.px]="segmentHeight"
[class.cal-hour-
start]="segment.isStart"

27. [class.cal-after-hour-
start]="!segment.isStart"
[ngClass]="segment.cssClass"
(mousedown)="startDragToCreate(s
egment, $event, segmentElement)">
<div class="cal-time"
*ngIf="isTimeLabel">
{{ segment.date |
calendarDate:'weekViewHour':locale
}}
</div>
</div>
</ng-template>
</div>

28. <mwl-calendar-week-view
[viewDate]="viewDate"
[events]="events"
[hourSegmentTemplate]="weekVie
wHourSegmentTemplate"
[weekStartsOn]="weekStartsOn">
</mwl-calendar-week-view>
<hr>
<div>Selected Slots</div>
<pre>{{ slots | json }}</pre>

29. Run the Application
ng serve
Then, open the following URL in your
browser: http://localhost:4200

30. Github Repository:
Angular Calendar
Source Code

31. You can visit the source code and clone
the github repository to play around
with the code.

32. Conclusion

33. So this was all about how to implement
Angular Calendar Component in your
Angular application. I hope now you can
easily create your events and play
around with the feature. The Angular
Calendar component does provide
various useful features we will discuss
that surely as well! Want to learn more
about Angular? Visit the Angular
tutorials page! No doubt, you will love
the tutorials that our team has been
curated for you! Reach out to us in case
you have any
suggestions/queries/feedback. We’re
always delighted to answer!

34. Thank You!
www.bacancytechnology.com