Fullcalendar Plugin help

I need help in the new React Fullcalendar plugin

The error thrown in local host =

my code

// – plugin info requested by host app –

this.describePlugin = function(id, lang) {
switch (id) {
case ‘displayName’:
return “Fullshed401”;

case 'shortDisplayText':
  return "Sheduler by Resources vertical .";

case 'defaultNameForNewInstance':
  return "fullsched401";

}
}

// – private variables –
// Here we store internally the values that the user can manipulate in the inspector UI, specified below.
this._data = {
//nowDate: “2019-01-31”,
// slotDuration: “00:15:00”, // 15 minutes slots
// defaultView: “agendaDay”
};

// – persistence, i.e. saving and loading –

this.persist = function() {
return this._data;
}

this.unpersist = function(data) {

this._data = data;

}

// – inspector UI –

this.onCreateUI = function() {

}

this.onUIChange = function(controlId) {

}

// – plugin preview –

this.renderIcon = function(canvas) {
var ctx = canvas.getContext(‘2d’);
var w = canvas.width;
var h = canvas.height;
ctx.save();
if (this.icon == null) {
var path = Plugin.getPathForResource(“512-30.png”);
this.icon = Plugin.loadImage(path);
}
var iconW = this.icon.width;
var iconH = this.icon.height;
var aspectScale = Math.min(w/iconW, h/iconH);
var scale = 0.9 * aspectScale; // add some margin around icon
iconW *= scale;
iconH *= scale;
ctx.drawImage(this.icon, (w-iconW)*0.5, (h-iconH)*0.5, iconW, iconH);
ctx.drawImage(this.icon, 10, 10);
ctx.restore();
}

// – code generation, React web –

this.getReactWebPackages = function() {
return {

@fullcalendar/core”: “^4.0.1”,
@fullcalendar/react”: “*”,
@fullcalendar/daygrid”: “^4.0.1”,
@fullcalendar/timegrid”: “^4.0.1”,
@fullcalendar/resource-common”: “^4.0.1”,
@fullcalendar/resource-timegrid”: “^4.0.1”,
@fullcalendar/interaction”: “^4.0.1”,
“react”: “^16.7.0”,
“react-dom”: “^16.7.0”

};
}

this.getReactWebImports = function(exporter) {
var arr = [

// { path: “…/node_modules/fullcalendar/dist/fullcalendar.min.css” },
{ path: “…/node_modules/@fullcalendar/core/main.css” },
{ path: “…/node_modules/@fullcalendar/daygrid/main.css” },
{ path: “…/node_modules/@fullcalendar/timegrid/main.css” },
//{ varName: “{ Calendar }”, path: “@fullcalendar/core” },

{ varName: " FullCalendar ", path: "@fullcalendar/react" },
{ varName: " dayGridPlugin ", path: "@fullcalendar/daygrid" },
{ varName: " resourceCommonPlugin ", path: "@fullcalendar/resource-common" },
{ varName: " timeGridPlugin ", path: "@fullcalendar/timegrid" },
{ varName: " resourceTimeGridPlugin ", path: "@fullcalendar/resource-timegrid" },
{ varName: " interactionPlugin ", path: "@fullcalendar/interaction" }

];

return arr;

}

this.writesCustomReactWebComponent = false; // change to true if use component template

this.reactWebDataLinkKeys = [
“value”
];

this.reactWebInteractions = [
“valueChange” // This is the id for the default interaction available to plugins in React Studio
];

this.describeReactWebInteraction = function(exporter, interactionId) {
switch (interactionId) {
case ‘valueChange’:
return {
actionMethod: {
// arguments: [‘rating’],
// getDataExpression: ‘rating’
}
};
}
return null;
}

this.getReactWebJSXCode = function(exporter) {

  var jsx = `<FullCalendar`
      jsx += ` defaultView={'resourceTimeGridDay'}`
      jsx +=  ` plugins={[`
       jsx +=  ` {dayGridPlugin},`
       jsx +=  ` {timeGridPlugin},`
       jsx +=  ` {resourceCommonPlugin},`
       jsx +=  ` {resourceTimeGridPlugin},`
       jsx +=  ` {interactionPlugin}`
      jsx +=  `]}`
      jsx += ` slotDuration={'00:15:00'}`
      jsx += ` minTime={'06:00:00'}`
      jsx += ` maxTime={'19:00:00'}`
      jsx += ` nowIndicator={true}`
      jsx += `editable={true} `
      jsx += `selectOverlap={true} `
      jsx += `defaultTimedEventDuration={'00:30'} `
      jsx +=  ` header={{ left: 'prev next today', centre: '',  right: 'dayGridMonth timeGridWeek timeGridDay' }} `

      jsx += `weekends={true} `
      jsx += ` allDaySlot={false} `
        jsx +=  ` resources={[`
      jsx +=  ` { id: 'a', title: 'John Hi-lights' , businessHours: [{ daysOfWeek: [ 0 ], startTime: '09:00', endTime:'11:30' }, { daysOfWeek: [ 2, 3, 4, 5 ], startTime: '09:00', endTime:'16:00' }, { daysOfWeek: [6 ], startTime: '08:00', endTime:'14:30' }] },`
      jsx +=  ` { id: 'b', title: 'John Tint', businessHours: [{ daysOfWeek: [ 0 ], startTime: '09:00', endTime:'12:00' },{ daysOfWeek: [ 2, 3, 4, 5 ], startTime: '09:00', endTime:'16:00' }, { daysOfWeek: [6 ], startTime: '08:00', endTime:'15:00' }] , eventColor: 'rgb(150,50,50)' }`
      jsx +=  `]}`
      jsx +=  ` events={[`
        jsx +=  ` { id: '1',  start: '2019-03-10T14:00:00', end: '2019-03-106T14:30:00', title: 'High Light Medium with cut , Sandry' },`
        jsx +=  ` { id: '2',  start: '2019-03-10T10:00:00', end: '2019-03-10T10:30:00', title: 'Cut  Long, Joan ' },`
        jsx +=  ` { id: '4',  start: '2019-03-10T09:00:00', end: '2019-03-10T09:30:00', title: 'Tint Touchup, Mary' },`
        jsx +=  ` { id: '5',  start: '2019-03-10T11:00:00', end: '2019-03-10T11:30:00', title: 'Cut Short,  Melissa' }`
        jsx +=  `]}`
jsx += ` />`
return (jsx);

}

Thanks. Steve
I have the code that works with react – npm run
that comes from https://fullcalendar.io/docs/react

Hi Steve,

there was a minor syntax error causing the problem. You just need to present the values in ‘plugins’ property without the curly brackets, like this:

...
         jsx +=  ` dayGridPlugin,`
         jsx +=  ` timeGridPlugin,`
         jsx +=  ` resourceCommonPlugin,`
         jsx +=  ` resourceTimeGridPlugin,`
         jsx +=  ` interactionPlugin`
...

-Juha

Thanks you’re a star
Steve

1 Like

I am planning to implement a calendar in my project. Would it be possible to share the working plugin? Or maybe publish it in the React Studio store. It would be awesome and it would save to create it from scratch as I specially struggle linking the data with the dataSlot and/or dataSheet.

Thanks!

Ok. I have taken the task to try to replicate the fullcalendar plugin using the code that shared in this post as well as the documentation. I have had to make some modifications as it’s been some time and the package has changed. The code that I have right now is:

In plugin-data.js:

// – private variables –

this._data = {
};

// – persistence, i.e. saving and loading –

this.persist = function() {
return this._data;
}

this.unpersist = function(data) {
this._data = data;
}

In studio-ui.js:

// – inspector UI –

this.inspectorUIDefinition = [
];

this._uiTextFields = [ ];
this._uiNumberFields = [ ];
this._uiCheckboxes = [ ];
this._uiColorPickers = [ ];
this._uiDataSlotPickers = [ ];
this._uiDataSheetPickers = [ ];
this._uiElementPickers = [ ];
this._uiScreenPickers = [ ];
this._uiComponentPickers = [ ];

this._accessorForDataKey = function(key) {
if (this._uiTextFields.includes(key)) return ‘text’;
else if (this._uiNumberFields.includes(key)) return ‘numberValue’;
else if (this._uiCheckboxes.includes(key)) return ‘checked’;
else if (this._uiColorPickers.includes(key)) return ‘rgbaArrayValue’;
else if (this._uiDataSlotPickers.includes(key)) return ‘dataSlotName’;
else if (this._uiDataSheetPickers.includes(key)) return ‘dataSheetName’;
else if (this._uiElementPickers.includes(key)) return ‘elementId’;
else if (this._uiScreenPickers.includes(key)) return ‘screenName’;
else if (this._uiComponentPickers.includes(key)) return ‘componentName’;
return null;
}

this.onCreateUI = function() {

}

this.onUIChange = function(controlId) {

}

// – plugin preview –

this.renderIcon = function(canvas) {
var ctx = canvas.getContext(‘2d’);
var w = canvas.width;
var h = canvas.height;
ctx.save();

if (this.icon == null) {
var path = Plugin.getPathForResource(“logo_raw.png”);
this.icon = Plugin.loadImage(path);
}
if (this.icon) {
var iconW = this.icon.width;
var iconH = this.icon.height;
var aspectScale = Math.min(w/iconW, h/iconH);
var scale = 0.72 * aspectScale; // add some margin around icon
ctx.globalAlpha = 0.97;
ctx.drawImage(this.icon, (w-iconW)/2, (h-iconH)/2, iconW, iconH);
}
ctx.restore();
};

this.renderEditingCanvasPreview = function(canvas, controller) {
var ctx = canvas.getContext(‘2d’);
var w = canvas.width;
var h = canvas.height;
ctx.save();

ctx.fillStyle = “rgba(128, 128, 128, 0.3)”;
ctx.fillRect(0, 0, w, h);

var fontSize = (h > 40) ? 30 : 15;
ctx.fillStyle = “#000000”;
ctx.font = fontSize+“px Helvetica”;
ctx.textAlign = “center”;
ctx.fillText(“Fullcalendar”, w0.5, h0.5);

ctx.restore();
}

In main.js:

// – plugin info requested by host app –

this.describePlugin = function(id, lang) {
switch (id) {
case ‘displayName’:
return “Fullcalendar”;

case ‘shortDisplayText’:
return “Fullcalendar”;

case ‘defaultNameForNewInstance’:
return “fullcalendar”;
}
}

// – code generation, React web –

this.getReactWebPackages = function() {
// Return dependencies that need to be included in the exported project’s package.json file.
// Each key is an npm package name that must be imported, and the value is the package version.

return {
@fullcalendar/core”: “^5.10.1”,
@fullcalendar/react”: “^5.10.1”,
@fullcalendar/daygrid”: “^5.10.1”,
@fullcalendar/timegrid”: “^5.10.1”,
@fullcalendar/interaction”: “^5.10.1”,
“css-loader”: “^6.6.0”
};
}

this.getReactWebImports = function(exporter) {
var arr = [

{ varName: "FullCalendar", path: "@fullcalendar/react" },
{ varName: "dayGridPlugin", path: "@fullcalendar/daygrid" }, 
{ varName: "timeGridPlugin", path: "@fullcalendar/timegrid" },
{ varName: "interactionPlugin", path: "@fullcalendar/interaction" }

];

return arr;

}

this.writesCustomReactWebComponent = false;

this.reactWebDataLinkKeys = [
“value”
];

this.reactWebInteractions = [
“valueChange” // This is the id for the default interaction available to plugins in React Studio
];

this.describeReactWebInteraction = function(exporter, interactionId) {
switch (interactionId) {
case ‘valueChange’:
return {
actionMethod: {
//arguments: [‘myArg’],
//getDataExpression: ‘myExpr’
}
};
}
return null;
}

this.getReactWebJSXCode = function(exporter) {
var jsx = <FullCalendar
jsx += defaultView={'resourceTimeGridDay'}
jsx += plugins={[
jsx += dayGridPlugin,
jsx += timeGridPlugin,
jsx += interactionPlugin
jsx += ]}
jsx += slotDuration={'00:15:00'}
jsx += minTime={'06:00:00'}
jsx += maxTime={'19:00:00'}
jsx += nowIndicator={true}
jsx += editable={true}
jsx += selectOverlap={true}
jsx += defaultTimedEventDuration={'00:30'}
jsx += header={{ left: 'prev next today', centre: '', right: 'dayGridMonth timeGridWeek timeGridDay' }}

  jsx += `weekends={true} `
  jsx += ` allDaySlot={false} `
    jsx +=  ` resources={[`
  jsx +=  ` { id: 'a', title: 'John Hi-lights' , businessHours: [{ daysOfWeek: [ 0 ], startTime: '09:00', endTime:'11:30' }, { daysOfWeek: [ 2, 3, 4, 5 ], startTime: '09:00', endTime:'16:00' }, { daysOfWeek: [6 ], startTime: '08:00', endTime:'14:30' }] },`
  jsx +=  ` { id: 'b', title: 'John Tint', businessHours: [{ daysOfWeek: [ 0 ], startTime: '09:00', endTime:'12:00' },{ daysOfWeek: [ 2, 3, 4, 5 ], startTime: '09:00', endTime:'16:00' }, { daysOfWeek: [6 ], startTime: '08:00', endTime:'15:00' }] , eventColor: 'rgb(150,50,50)' }`
  jsx +=  `]}`
  jsx +=  ` events={[`
    jsx +=  ` { id: '1',  start: '2019-03-10T14:00:00', end: '2019-03-106T14:30:00', title: 'High Light Medium with cut , Sandry' },`
    jsx +=  ` { id: '2',  start: '2019-03-10T10:00:00', end: '2019-03-10T10:30:00', title: 'Cut  Long, Joan ' },`
    jsx +=  ` { id: '4',  start: '2019-03-10T09:00:00', end: '2019-03-10T09:30:00', title: 'Tint Touchup, Mary' },`
    jsx +=  ` { id: '5',  start: '2019-03-10T11:00:00', end: '2019-03-10T11:30:00', title: 'Cut Short,  Melissa' }`
    jsx +=  `]}`

jsx += />
return (jsx);
}

With that code, I have been able to load the calendar in a screen but I believe there is some issue with loading the css:

Thing is that the fullcalendar has been updated to version 5 and now in the documentation you don’t import the css because it says:

All of FullCalendar’s CSS will be automatically loaded as long as your build system is able to process .css file imports.

This would be done with css-loader. I have tried to get it done incluing the npm package of css-loader within the plugin but it didn’t do it. How would I do this with RS? I have also tried to do it with the previous version of Fullcalendar (version 4) importing the css as in the example shared before, but it gave me an error telling me that it couldn’t find the css.

I have also changed from the previously shared code the premium plugins for Fullcalendar.

Thank you!