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

Option	Description
hideStart	(optional) Hides the start date part in the form.Defaults to false
hideEnd	(optional) Hides the until(end) date part in the form.Defaults to false
frequency	(required) One or many of the following recurrence options Daily Weekly Monthly Yearly
tz	(optional) Timezone. Defaults to local timezone

License

MIT