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;
}