NgxRrule

Recurrence rules generator form control for Angular

Inspired and partially forked from https://github.com/Fafruch/react-rrule-generator

Description

This is Angular form control using Bootstrap styling. It's built with the help of a great rrule.js library.

It also uses:

• lodash
• moment
• ng-bootstrap

Demo

https://kumar-muthu.github.io/ngx-rrule/

Installation and Docs

Install

 $ npm i ngx-rrule @ng-bootstrap/ng-bootstrap rrule bootstrap

Import NgxRruleModule in your app:

import {NgxRruleModule} from 'ngx-rrule';

@NgModule({
    imports: [NgxRruleModule]
})
export class AppModule {}

style.scss

Optionally, this can be added to styles section of angular.json

@import '~bootstrap/dist/css/bootstrap.css';

app.component.html

<form [formGroup]="myform">
  <ngx-rrule formControlName="testRule"
             [hideStart]="false"
             [hideEnd]="false"
             tz="America/New_York"
             [frequency]="['Daily','Monthly','Weekly', 'Yearly']"></ngx-rrule>
</form>

app.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myform: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myform = this.formBuilder.group({
      testRule: ''
    });

    this.myform.valueChanges.subscribe(() => {
      const rRuleFormValue = this.myform.value.testRule;

      // Get the rrule object.
      // This is an instance of RRule. Refer to https://github.com/jakubroztocil/rrule on how to use it
      console.log(rRuleFormValue.rRule);

      // Optional - Raw value of the ngxRrule used internally
      console.log(rRuleFormValue.raw);
    });
  }
}

Options

License

MIT