@eqproject/eqp-calendar v3.0.0

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• @fullcalendar/angular v5
• @fullcalendar/daygrid v5
• @fullcalendar/interaction v5
• @fullcalendar/timegrid v5

Getting started

This package is a wrapper for the v5 FullCalendar calendar component. It extends the basic functionalities of the undelying package simplifying the configuration process through exposing a series of input.

Notes

It is based on FullCalendar v5.10.0, go to this link to read the official documentation.

Step 1: Install eqp-calendar:

NPM

npm install --save @eqproject/eqp-calendar

Step 2:

Import EqpCalendarModule:

import { EqpCalendarModule } from '@eqproject/eqp-calendar';

@NgModule({
  declarations: [AppComponent],
  imports: [
    EqpCalendarModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

API

Inputs

Notes

The HeaderToolbarStart, HeaderToolbarCenter and HeaderToolbarEnd sets what to display in each portion of the header. Each piece you want to display needes to be specified in one of the input and to separate them from one another in the same section you need to use a space or a comma. Names separated with space will have some margin between them, using a comma the pieces will be rendered attached. Open this link to read the official documentation.

Outputs

Interfaces and Models used

IEvent Interface

NOTES:

This interface is based on the FullCalendar Event Object. To read the official documentation click here.

ViewDateChangeEvent Model

Use cases

Use Example in class :

<eqp-calendar [EventList]="eventList" [CustomStyle]="customStyle" [InitialView]="initialView" [FirstDay]="firstDay" [Locale]="locale"
    [EventOrder]="eventOrder" (OnViewDateChange)="onViewDateChange($event)" (OnDateClick)="onDateClick($event)"
    (OnEventClick)="onEventClick($event)">
</eqp-calendar>

    import { ViewDateChangeEvent } from '@eqproject/eqp-calendar';
    import { IEvent } from '@eqproject/eqp-calendar';

    eventList: Array<IEvent> = new Array<IEvent>();

    customStyle: any = { 'text-transform': 'capitalize' };
    initialView: string = "dayGridMonth";
    firstDay: number = 1;
    locale: string = "it-IT";
  
    // Example of a custom eventOrder function:
    eventOrder(eventA: IEvent, eventB: IEvent) {
        if (eventA && eventB)
            return (eventA.extendedProps.Priority > eventB.extendedProps.Priority) ? 1 : ((eventB.extendedProps.Priority > eventA.extendedProps.Priority) ? -1 : 0);
        else
            return 0;
    }
    
    onViewDateChange(event: ViewDateChangeEvent) {
        // TODO
    }

    onDateClick(event: Date) {
        // TODO
    }

    onEventClick(event: IEvent) {
        // TODO
    }

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it