problems with displaying recurring events in fullcalendar using rrule plugin npm in visual studio core app

Question

Recurring events do not seem to appear on the calendar, single events do appear in c# core app. Ive installed rrule via npm in visual studio 2017

(recurring events do appear when i try in scripts tags as described below

How to implement recurring event with all day set to true?)

Ive built my app on top of esau's work github.com/esausilva/fullcalendar-aspnet-core. Can you please advise all the necessary environments to check? I can see rrule (2.6.2) under "dependencies/npm/"

calendar.js

$('#calendar').fullCalendar({
plugins: ['interaction', 'dayGrid', 'timeGrid', 'momentTimezonePlugin', 'rrule','list'],
    timezone: 'UTC', 
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
    },
events: [
        {
            "id": "3",
            "title": "Title ",
            "start": "2019-07-14T15:00:00+11:00",
            "end": "2019-07-14T15:30:00+11:00"
        },
        {
            title: 'my recurring event',
            rrule: {
                dtstart: '2019-07-01',
                freq: 'monthly',
                count: 13,
                bymonthday: [13]
            }
        },
        {
            title: 'RR',
            allDay: true,
            rrule: {
                freq: 'weekly',
                byweekday: null,
                bymonthday: null,
                dtstart: '2019-07-05',
                until: '2019-08-05'
            },
        }
    ],
});
//the below works
import { RRule, RRuleSet, rrule } from 'rrule'
const rule = new RRule({
    freq: RRule.WEEKLY,
    interval: 5,
    byweekday: [RRule.MO, RRule.FR],
    dtstart: new Date(Date.UTC(2019, 1, 1, 10, 30)),
    until: new Date(Date.UTC(2019, 12, 31))

})
console.log("rule.all(): "+rule.all());


package.json –

{ 
"name": "fullcalendar-core", 
"main": "index.js", 
"scripts": 
{ 
"dev:styles": "parcel watch Styles/calendar.scss --out-dir wwwroot/css --no-source-maps", 
"dev:scripts": "parcel watch Scripts/calendar.js --out-dir wwwroot/js --no-source-maps", 
"prod:styles": "parcel build Styles/calendar.scss --out-dir wwwroot/css --out-file calendar.min.css", 
"prod:scripts": "parcel build Scripts/calendar.js --out-dir wwwroot/js --out-file calendar.min.js", 
"dev": "webpack --watch", 
"build": "cross-env NODE_ENV=production webpack" }
"devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "babel-loader": "^8.0.4",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.1",
    "cssnano": "^4.1.10",
    "file-loader": "^2.0.0",
    "mini-css-extract-plugin": "^0.4.5",
    "node-sass": "^4.10.0",
    "parcel-bundler": "^1.12.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.4.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.26",
    "rrule": "^2.6.2"
  }



index.cshtml
*the below is for draggable stuff
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css" media='print' />

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

----------------------------

if RRule is included in your page properly then there should be no issue: https://jsfiddle.net/b5cszga3/ . Since we can't see your environment or how you have created your view, how you have included the various dependencies then it's hard to help you. It seems your environment is probably at fault, rather than your code. — ADyson, Jul 22 '19 at 15:22
There are no errors on the browser and when i declare a rule outside (modified above) $('#calendar').fullCalendar and it prints all the events properly. — Gino, Jul 24 '19 at 12:45
Sorry I just noticed...what version of fullCalendar did you install?? Because the syntax `$('#calendar').fullCalendar({` using jQuery, will only work with version 3 and below. But the "plugins" functionality and the recurring event functionality is only supported in version 4. Make sure you install whatever is the latest version (4.x) and all the associated plugin files — ADyson, Jul 24 '19 at 13:51
If there's no npm package for version 4 then you might just have to load it using script tags instead — ADyson, Jul 24 '19 at 13:52

problems with displaying recurring events in fullcalendar using rrule plugin npm in visual studio core app

0 Answers0