Have ideas to improve npm?Join in the discussion! »

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

    1.7.1 • 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 it to module

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

    Step 4: In the component

    .ts-part
    import { 
      EventModel,
      NewEventConstructorObject, 
      WorkHoursModel, 
      ViewChangedObject, 
      CalendarTypesEnum, 
      EventContextResultModel, 
      EventContextActionModel, 
      ContextActionTypesEnum, 
      NgtrCalendarService 
    } from 'ngtr-calendar';
    
    actions: EventContextActionModel[] = [];
    calendarTypes: string[] = [ CalendarTypesEnum.Week, CalendarTypesEnum.List, CalendarTypesEnum.Month, CalendarTypesEnum.Fourweeks];
    events: BaseEventModel[] = [];
    workHours: WorkHoursModel[] = [];
    currentCalendarType: string = CalendarTypesEnum.Week;
    viewDate: moment.Moment = moment();
    visibleDays: number[] = [1, 2, 3, 4, 5, 6, 7]; //  (mon = 1, tue = 2, ... , sun = 7)
    // ....
    constructor(public calendarService: NgtrCalendarService) { }
    .html-part
    <ngtr-calendar
        [calendarTypes]="calendarTypes"
        [events]="events"
        [workHours]="workHours" 
        [viewDate]="viewDate" 
        [currentCalendarType]="currentCalendarType" 
        (viewDateChanged)="console.log($event)" 
        (eventCreate)="console.log($event)"
        (eventDelete)="console.log($event)" 
        (eventSelected)="console.log($event)"
        (contextAction)="console.log($event)">
      ></ngtr-calendar>

    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;
    }
    • Edit stuff in calendarService as you want.
      • example for a Dutch calendar.
    this.calendarTypes = [CalendarTypesEnum.Week, CalendarTypesEnum.List, CalendarTypesEnum.Month, CalendarTypesEnum.Fourweeks, CalendarTypesEnum.Year];
    
    // every thing apart
    this.calendarService.todayButtonTxt = 'Vandaag';
    this.calendarService.fourweeksFormatNameTxt = 'Periode';
    this.calendarService.fourweeksSelectionNameTxt = 'Vierweken';
    this.calendarService.weekFormatNameTxt = 'Week';
    this.calendarService.monthSelectionNameTxt = 'Maand';
    this.calendarService.listTitleNameTxt = 'Lijstweergave';
    this.calendarService.listSelectionNameTxt = 'Lijst';
    this.calendarService.upToForBetweenDatesTxt = 't/m';
    this.calendarService.visibleDays = this.visibleDays;
    this.calendarService.tooltipEnabled = true;
    this.calendarService.contextActionsEnabled = true;
    this.calendarService.maxHeight = '1000px';
    this.calendarService.minDateTime = DateTime.local().minus({years:10}).startOf('year');
    this.calendarService.maxDateTime = DateTime.local().plus({years:10}).endOf('year');
    
    /** or use @see INgtrCalendarOptions */
    this.calendarService.set({todayButtonTxt: 'today', /** und so weiter */});
    • Add functions for events
      • viewDateChanged() -> ViewDate of calendar changed
      • eventCreate() -> New event added
      • eventDelete() -> Event deleted
      • eventResized() -> CURRENTLY DISABLED: Event got resized, only on block-events in weekview
      • eventDragged() -> CURRENTLY DISABLED: Event got dragged, allday in weekview, everything in month/fourweeks
      • contextAction() -> some Events context-action was used

    Keywords

    none

    Install

    npm i ngtr-calendar

    DownloadsWeekly Downloads

    199

    Version

    1.7.1

    License

    MIT

    Unpacked Size

    968 kB

    Total Files

    89

    Last publish

    Collaborators

    • avatar