ngtr-calendar v2.1.4

NgtrCalendar ngtr-calendar

The ngtr-calendar module is made for using a calendar in an Angular project. It contains some different components, models and a service for setting details some titles and button-texts.

There is a working example on calendar.troos.nl

Ngtr-calendar uses 3 dependencies:

• momentJS (only versions < 0.13.0)
• Luxon (versions 0.13.0 and later)
• @fortawesome/angular-fontawesome (and @fortawesome/free-solid-svg-icons)

Steps to create

Step 1: Install from npm

npm install ngtr-calendar

Step 2: In tsconfig

No solution for this yet.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Step 3: Add wanted view to a module

import { NgtrCalendarModule } from 'ngtr-calendar';
//..
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // here
    NgtrWeeKViewModule
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Step 4: In the component

.ts-part

import {
  EventModel,
  NewEventConstructorObject,
  WorkHoursModel,
  ViewChangedObject,
  CalendarTypesEnum,
  EventContextResultModel,
  EventContextActionModel,
  ContextActionTypesEnum,
  NgtrCalendarService
} from 'ngtr-calendar';

import type { CalendarType, }

actions: EventContextActionModel[] = [];
calendarTypes: CalendarType[] = ['week', 'month', 'fourweeks', 'year', 'list'];
events: BaseEventModel[] = [];
workHours: WorkHoursModel[] = [];
currentCalendarType: string = 'week';
viewDate: DateTime: = DateTime.local();
visibleDays: number[] = [1, 2, 3, 4, 5, 6, 7]; //  (mon = 1, tue = 2, ... , sun = 7)
options: INgtrCalendarOptions = {};
// ....
constructor(public calendarService: NgtrCalendarService) { }

.html-part

<ngtr-week-view
  [events]="events"
  [workHours]="workHours"
  [viewDate]="viewDate"
  [currentCalendarType]="currentCalendarType"
  [options]="options"
  (viewChange)="console.log($event)"
  (createEvent)="console.log($event)"
  (selectEvent)="console.log($event)"
  (contextAction)="console.log($event)"
>
  ></ngtr-week-view
>

Step 5: import the stylesheet

// if you want, edit the primary, secundary, warning and danger color and the font family
$primary: #0080ff;
$secundary: #80ff00;
$warning: #ff8000;
$danger: #bb0000;
$font-family: "Comic Sans MS";
//.....
// For the full list of overwriteable values see variables.scss file.

// and then this:
@import "~ngtr-calendar/styles/styles.scss";

• There are a lot more values to overwrite. These are an example.

Step 6: Add stuff

• Add events
  • use EventModel or extend it
  • events can contain context-actions
  • events do NOT have group-functions (yet?)

const evt = new EventModel(
  DateTime.local().minus({ days: 2 }).set({ hour: 9, minute: 30 })
);
evt.isEditable = false;
evt.isAllday = false;
evt.title = "Testevent 1";
evt.description = "uneditable event test";
evt.endDateTime = evt.startDateTime.plus({ hours: 5 });

this.events.push(evt);

• Add workhours/businesshours with a WorkhourModel

let whm = new WorkHoursModel(1, "08:00", "17:00");
workHours.push(whm);

• Add context-actions to events using EventContextActionModel
  • each event has context-action.
  • no actions disables them
  • add a do-context-action function

let ecam = new EventContextActionModel(
  "Delete",
  1000,
  ContextActionTypesEnum.Dangerous,
  false
);
evt.contextActions.push(ecam);
//... and a place to use it.
switch (contextaction.contextActionID) {
  case 1000: // delete
    let del = this.events.findIndex((e) => e.calendarID == evt.calendarID);
    this.events.splice(del, 1);
    this.events = [...this.events];
    break;
  default:
    return;
}