i am unable to display in the customized format in month view

[KSANTHOSHKUMA]

I am very glad to use your component for our application, but i am facing a issue while implementing

please see my component.html code below

<div class="row justify-content-md-center">
  <div class="col-md-11 setbg no-padd">
    <mwl-calendar-month-view 
    [viewDate]="viewDate"
    [events]="events"></mwl-calendar-month-view>
  </div>
</div>

below is my component.ts code

import { Component, OnInit, ViewChild, Output, EventEmitter, TemplateRef } from '@angular/core';
import {
    startOfDay,
    endOfDay,
    subDays,
    addDays,
    endOfMonth,
    isSameDay,
    isSameMonth,
    addHours
} from 'date-fns';

import { Router } from '@angular/router';
import { BookAppointmentService } from '../services/book-appointment.service';
import { JQueryStyleEventEmitter } from 'rxjs/observable/FromEventObservable';
import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';

@Component({
    selector: 'app-book-appointment-view',
    templateUrl: '../views/book-appointment-view.component.html'
})

export class BookAppointmentViewComponent implements OnInit {

    bookAppointmentData: any = {};
    bookAppointmentDataTemp: any[] = [];
    events: any[] = [];
    viewDate: Date = new Date();

    @ViewChild('modalContent') modalContent: TemplateRef<any>;

    constructor(
        private bookService: BookAppointmentService,
        private router: Router
    ) { }
    ngOnInit() {
        this.bookService.getBookAppointmentsMonth(2, { date: '2018-06' })
            .subscribe(suc => {
                console.log('suc', suc);
                this.bookAppointmentData = suc;
                for (let i = 0; i < this.bookAppointmentData.Days.length; i++) {
                    this.bookAppointmentDataTemp.push({
                        start: subDays(startOfDay(this.bookAppointmentData.Days[i].dayId), 1),                   
                        end: addDays(new Date(this.bookAppointmentData.Days[i].dayId), 1),                                                                                   
                        title: 'DoctorsCount: ' + this.bookAppointmentData.Days[i].doctorCount + '\n' + 'Total Appointments: ' + this.bookAppointmentData.Days[i].bookedCount
                            + '\n' + 'Booked: ' + this.bookAppointmentData.Days[i].bookedCount + '\n' + 'Cancelled: ' + this.bookAppointmentData.Days[i].cancelledCount + '\n' +
                            'Missed:' + this.bookAppointmentData.Days[i].missedCount
                    });
                }
                this.showData();
            }, err => { });
    }
    showData() {
        this.events = this.bookAppointmentDataTemp;
    }

    eventClick(event) {
        debugger;
        console.log('data', event);
        this.router.navigate(['/cloud/bookappointment/dayview']);
    }

    dayClickEvent(event?) {
        console.log(event);
    }

}

output:

required output:

please help me to complete issue

Thanks Santhosh K

[frederickfogerty]

@KSANTHOSHKUMA I don't think this is the component you are looking for... this is the repository for the npm registry, which is not a javascript/angular component

[jefflembeck]

Correct. Please reach out to the module publisher. Thanks!