OttomateNgxRrule

Recurrence rules generator form control for Angular

Inspired and forked from https://github.com/kumar-muthu/ngx-rrule

Description

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

It also uses:

• ngx-bootstrap

Demo

https://LuklaCloud.github.io/ottomate-ngx-rrule/

Installation and Docs

Install

 $ npm i ottomate-ngx-rrule

Import OttomateNgxRruleModule in your app:

import {OttomateNgxRruleModule} from 'ottomate-ngx-rrule';

@NgModule({
    imports: [OttomateNgxRruleModule]
})
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">
  <ottomate-ngx-rrule formControlName="testRule"
             [hideStart]="false"
             [hideEnd]="false"
             tz="America/New_York"
             [frequency]="['Daily','Monthly','Weekly', 'Yearly']"></ottomate-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