Recurring event in FullCalendar starts from today

I'm using FullCalendar along with rrule plugin for the first time. Non -recurring events appear correctly. Recurring events for some reason start from today even though the start date is in future.

Here is my code:

<div class="text-center">
<div id="calendar" class="pt-3"></div>
</div>
@section Scripts {
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            eventDisplay: 'block', 
            dayMaxEvents: true,
            headerToolbar: {
                left: 'prev,next,today',
                center: 'title',
                right: 'multiMonthYear,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            dateClick: function (info) {
                var clickedDate = getDateWithoutTime(info.date);
                var nowDate = getDateWithoutTime(new Date())
                if (clickedDate >= nowDate) {
                    window.location.replace("/CalendarEvents/Create");
                }
                else alert("Sorry, you cannot create event for the past date.");
            },
            events: function (fetchInfo, successCallback, failureCallback) {
                $.ajax({
                    url: "@Url.Action("GetCalendarEvents", "CalendarEvents")",
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        var events = [];
                        $.each(response, function () {
                            events.push({
                                title: this.title,
                                start: this.event_start,
                                end: this.event_end,
                                backgroundColor: this.color,
                                borderColor: this.color,
                                textColor: '#ffffff',
                                dtstart:this.dtstart,
                                rrule: this.rrule,
                                extendedProps: {
                                    description: this.description,
                                    color: this.color,
                                    id: this.id
                                }
                            });
                        });

                        successCallback(events);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        failureCallback();
                    }
                });
            },
            eventMouseEnter: function (info) {
                $(info.el).attr("tabindex", -1);
                var editURL = 'https://' + window.location.host + '/CalendarEvents/Edit/' + info.event.extendedProps.id;
                var deleteURL = 'https://' + window.location.host + '/CalendarEvents/Delete/' + info.event.extendedProps.id;
                var details = "<div id='popover-content'><strong>Start Time:</strong> " + moment(info.event.start).format('MMMM D, YYYY, h:mm a') + "<br /><strong>End Time:</strong> " + moment(info.event.end).format('MMMM D, YYYY, h:mm a') + "<br /><strong>Description:</strong> " + info.event.extendedProps.description + "<br /><a href='" + editURL + "' class='mt-2 btn btn-sm btn-primary'>Edit</a>  <a href='" + deleteURL + "' class='mt-2 btn btn-sm btn-danger'>Delete</a></div>";
                $(info.el).popover({ title: info.event.title, content: details, html: true, trigger: 'hover focus', }).popover('toggle');
            }
        });

        calendar.render();
    });

    function getDateWithoutTime(dt) {
        dt.setHours(0, 0, 0, 0);
        return dt;
    }
  </script>
}

Here is what I see in console log:

 event_start: 2024-10-31T14:30:00
 event_end: 2024-11-08T15:31:00
 dtstart: 2024-10-31T14:30:00
 rrule: FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20241109

But this recurring event is rendered from today instead of Oct 31st. Any idea what mistake I'm making?

You seem to have got a bit confused between the 2 formats in which fullCalendar accepts RRule data.

As per the the fullCalendar RRule plugin documentation you can either supply fullCalendar with an RRule string, or a object enumerating individual properties of the rrule. Your code is a half-way house where you've got some of the data in an RRule string, and some of it in properties (dtstart specifically). This isn't going to work. You need to take one approach or the other, and stick to it.

Also you don't need to supply start and end properties to fullCalendar when using RRule. Those properties only apply to non-recurring events and will be ignored.

So your event object should look like this:

{
  title: this.title,
  backgroundColor: this.color,
  borderColor: this.color,
  textColor: '#ffffff',
  rrule: this.rrule,
  extendedProps: {
    description: this.description,
    color: this.color,
    id: this.id
  }
}

And your RRule string needs to include the DTSTART property within it - as per your example above, this would look like:

DTSTART:20241031T143000\nRRULE:FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20241109

Live demo: https://codepen.io/ADyson82/pen/MWNGWZv