NgxEventsCalendar

An Angular Material package for calendar events.

Supports:

• Angular
• Angular Material
• Angular MDB UI Kit

Images

Installation

Install This Library

$ npm install ngx-event-calendar --save $ npm install mdb-angular-ui-kit --save

Usage

Add path reference (angular.json)

"styles": [ "node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss" ],

Import

import { NgxEventsCalendarModule } from "ngx-country-dropdown"; import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';

Add NgxEventsCalendarModule to your module file: Add NMdbPopoverModule to your module file:

imports: [
    NgxEventsCalendarModule,
    MdbPopoverModule
  ]

Example

Refer to test app in this repository for working example.

<ngx-events-calendar [eventData]="events" [enableButton]="true" (viewEvent)="goToEvent($event)"></ngx-events-calendar> 
   <p>Event Details: {{ selectedEvent }}</p>

//EventModel
export class EventModel{
    title!:string; //required
    startDate!:string | Date; //required
    endDate!:string | Date; //required
    description!:string; //required
    createdBy?:string; //can be null
    eventUrl?:string; 
}

export class AppComponent {
  selectedEvent:any; 
  events:Array<EventModel>=[];
  ngOnInit(){
    //  event data
    let event: EventModel ={
      title:"Event title",
      startDate: "2023/4/15",
      endDate: "2023/4/18",
      description:"About the event.....",
    };
    this.events.push(event);
  
  }
  //handling button event
  goToEvent(event:any){
    this.selectedEvent = JSON.stringify(event);
    console.log(event)
  }
}

Options

Options	Type	Default	Description
[evenData]	EventModel[]	[]	add events as EventModel list.
[enableButton]	boolean	false	enable View Event button.
(viewEvent)	EventEmittor		to handle View Event button.

Library Contributions

• Fork repo.
• Go to ./projects/ngx-event-calendar
• Update ./src/lib with new functionality.
• Update README.md
• Pull request.

keywords

angular npm event calendar