Nicely Pruned Marigolds

    ngtr-calendar
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

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

    Keywords

    none

    Install

    npm i ngtr-calendar

    DownloadsWeekly Downloads

    272

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    1.14 MB

    Total Files

    143

    Last publish

    Collaborators

    • timroos