NgxRrule

Recurrence rules generator form control for Angular

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

Description

This is an Angular form control for generating recurrence rules, styled with Angular Material. It's built with the help of the powerful rrule.js library.

It also uses:

• lodash

This project is a fork of kumar-muthu/ngx-rrule, updated to integrate Angular Material for styling and modern UI enhancements.

Demo

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

Installation and Docs

Install

$ ng add @angular/material
$ npm i @unbroken/ngx-rrule rrule

Import NgxRruleModule in your app:

import { NgxRruleModule } from "ngx-rrule";

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

Global Styles (styles.scss)

Add Angular Material typography and theming to your styles:

@import "@angular/material/prebuilt-themes/indigo-pink.css";
@import "@angular/material/core/theming/all-theme";

Example Usage (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>

Example Component (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) Specifies one or more of the following recurrence options: Daily, Weekly, Monthly, Yearly. | | tz | (optional) Sets the timezone. Defaults to the local timezone. |

Features

• Angular Material Styling: Fully integrated with Angular Material for consistent, modern UI.
• Dynamic Recurrence Options: Supports Daily, Weekly, Monthly, and Yearly recurrence frequencies.
• Timezone Support: Configure timezone for recurrence rules.

Credit

• Forked from kumar-muthu/ngx-rrule
• Inspired by Fafruch/react-rrule-generator

License

MIT