Angular-calendar

Angular-calendar

Angular used to implement the event in a month, day and week views. This will be used to schedule the timesheet, patient details or any other appointments, etc.

In the Angular calendar, in-build styles are easily overridden and can make it as own website. No restriction in the angular calendar.

For using this angular calendar, we need to import the global form in the angular app. and install the angular calendar in the project.

In angular-calendar, no dependencies are using in the project, but to avoid repetition, the code is split into several modules. so easily access the calendar. 

For Date dependency, import the date-fns in the project and customize it.

This will support from angular 4 to angular 7.  In angularjs, it's a difficult job to do, need to write all the typescript formation to javascript.

Installing the angular-calendar

In the New project, angular-calendar is a dependency on using the calendar format, import the angular-calendar in the app-module, and use it in pages.

This will be installed as an npm package globally or only in the project.

npm install angular-calendar

ap-angular2-fullcalendar

In the ap-angular-2-full calendar, it has the same dependency on the previous package, the only difference, it was the customized package for the users.

Same as previous packages, view the month, date, year descriptions, and also customize well. 

Install the ap-angular2-fullcalendar

Install the ap-angular2-fullcalendar, to use in our project

npm install ap-angular2-fullcalendar

Config the calendar component in app.module

Let's talk about the dependency module, for accessing the angular-calendar, need to import the calendar module in app-modules, The app-module basically used to import all the pages and dependency plugins. Without importing in the app-module, can't access package in the pages.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";
import { CalendarModule } from 'angular-calendar';
@ngModule({
      declarations: [
            CalendarComponent
       ],
        imports: [
            BrowserModule,
            CalendarModule.forRoot() 
       ],
       providers: []
 })
  export class AppModule {}

Config the code on the HTML page.

After importing the calendar-module, add the angular-calendar tags in the Html page basically, it will be used to show the calendar to the user.

<div>

<angular2-fullcalendar id="calendar" [options]="calendarOptions" ></angular2-fullcalendar>
</div>

Add the config in component.ts page

In component.ts page, import the some of in-build functionality like calendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent etc. also declare the options for calendar show in HTML page.

import {startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours} from 'date-fns';

import {CalendarEvent,CalendarEventAction,CalendarEventTimesChangedEvent} from 'angular-calendar';
@Component({
  selector: 'home',
  templateUrl: './home.html',
  styleUrls: ['./home.css']
})

export class homecomponent {
calendarOptions  =  {
        dayClick: function(date, allDay, jsEvent, view){
        },
};
options: DatepickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
  };
constructor() {}
}

mwl-calendar

 This will be another calendar component to list the set of data in date, month and year wise. This also has the same dependency as previous packages and follow the same steps listed above

Add  the calendar in Html page

Add the mwl-calendar tag in the HTML page. It will separated as day and month view. also set the tooltip and call the event from this calendar.

<div>
<mwl-calendar-day-view
                                   [viewDate] = "viewDate"
                                   [events] = "events"
                                   [eventTitleTemplate] = "eventTemplate"
                                   [tooltipTemplate] = "tooltipTemplate" >
<mwl-calendar-day-view>
</div>

Config the calendar Module

In the calendar module, add the custom calendar format and can as it. Basically, this custom format helpful for me, need to convert the date and time as 24 hours, this will be more helpful for conversion. 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CalendarModule, DateAdapter, CalendarDateForamtter } from 'angular-calendar';
@ngModule({
      declarations: [
            CalendarComponent
       ],
        imports: [
            BrowserModule,
            CalendarModule.forRoot({
                   provide: DateAdapter,
                   useFactory: adapterFactory
            }, {
               dateFormatter: {
                  provide: CalendarDateForamtter,
                  useClass: CustomDateForamtter
            })
       ],
       providers: []
 })
  export class AppModule {}

Config the custom format in calendar

This will be the new service for converting the 12 hours time to 24 hours time, Then use this in app-module in the project.

import { Injectable } from '@angular/core;
import { CalendarNativeDateFormatter, DataFormatterParams } from 'angular-calendar';
@Injectable()
export class CustomDateFormatter extend CalendarNativeDateFormatter {

    public dayViewHour({date, locale}: DateFormatterParams): string {
         return new Intl.DateTImeFormat('ca', {
                hour: 'numeric',
                minute: 'numeric'
         }).format(date);
    }
}