0

I'm trying to render reccurring events in Angular using fullcalendar 4.0.0-alpha2 and RRULE.

angular.json:

"scripts": [
    "node_modules/fullcalendar/dist/fullcalendar.js",
    "node_modules/rrule/dist/es5/rrule.js",
    "node_modules/fullcalendar/dist/plugins/rrule.min.js"
]

mycomponent.component.ts:

import { Calendar } from 'fullcalendar';
import { RRule } from "rrule";

ngOnInit(): void {

    const rule = new RRule({
        freq: RRule.DAILY,
        interval: 1,
        byweekday: [RRule.MO, RRule.FR],
        dtstart: new Date(Date.UTC(2018, 1, 1, 10, 30)),
        until: new Date(Date.UTC(2020, 12, 31))
    });

    var calendarEl = document.getElementById('calendarDirectTest');

    var calendar = new Calendar(calendarEl, {
        events: [
            {
                "title": "Test A",
                "start": "2018-10-09T16:00:00",
                rrule: rule
            }
        ]
    });

    calendar.render();
}

Result

The event renders but just once, meaning fullcalendar completely ignores the RRULE property, despite me including the rrule library AND the rrule plugin.

This is the documentation regarding that plugin: https://fullcalendar.io/docs/v4/rrule-plugin

The only thing that I see that's different is the way they import the connector / plugin, which is:

import 'fullcalendar/plugins/rrule';

But that doesn't work on Angular, unless I'm missing something.

Thank you

Yozki
  • 73
  • 1
  • 2
  • 13
  • which version of fullCalendar are you using? As you can see from the documentation link you posted, this plugin only works with fullCalendar version 4, which is currently in alpha and not released yet, so unless you downloaded the version from https://fullcalendar.io/docs/v4/release-notes then it's unlikely you've got a supported version – ADyson Oct 04 '18 at 08:24
  • Hi ADyson, I am using 4.0.0-alpha2 – Yozki Oct 04 '18 at 13:34
  • did you finally manage to do it? were the events rendered? If so, then maybe you can help me with my problem: https://stackoverflow.com/questions/63115857/how-to-install-and-use-rrule-for-fullcalendar-in-angular – Peyman Kheiri Jul 27 '20 at 13:00

1 Answers1

2

If you are using the rrule plugin you should not include the start or end fields in your event data. It will use the dtstart and duration values.

David Keen
  • 613
  • 7
  • 11