ANGULAR EXAMPLES

Simple calendar in angular

Making own calendar is easy

In this article we will make our own calendar using angular.

Our calendar will use only one model. This model contains information about year, month, weekday we will call — Day.

Model

day.model.ts

Service

Next step is create a calendar service. This service will make an array of days for a month.

calendarCreator.service.ts

Functions “getMonthName” and “getWeekDayName” are just a bunch of switch cases that returns a name of a week and month by index.

Functions ‘getMonthName’ and ‘getWeekDayName’

Main function ‘getMonth’ create an array of days. It has two cycles first one create empty days of last month if they are in a first week of a month, second cycle create days of a current month.

Function ‘getMonth’

The last function in our service is ‘createDay’. This function initialize our Day model.

Function ‘createDay’

Component

Finish step is create a component for a calendar. All properties of this component we are going to use in HTML and some functions we also going to use in html like ‘onNextMonth’ and ‘onPreviusMounth’.

calendar.component.ts

Method ‘OnInit’ initializes an array of week name for HTML and it also initializes array of month days by using other function ‘setMonthDays’.

Methods ‘onNextMonth’ and ‘onPreviousMonth’ just changing month number a year if it need and make a new array of days.

Methods of calendar.component.ts

In HTML we make a markup for two buttons ‘onNextMonth ‘and ‘onPreviousMonth’ showing a year and a name of the month and we two cycles one for days of week another for days of a month.

calendar.component html and css

In CSS we are setting for main div and each spam fixed width, because of that after seven spans next span will be showen on next line and user will see a table.

Result

Our to do calendar is ready. If you need to take a close look on project here is the link.

Originally published at http://tomorrowmeannever.com on June 21, 2020.