anouarghali / ngx-rrule

Angular form UI control for Rrule js

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

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