Plugin npm - link css files

have seem to have sorted the “jsx” syntax now am getting the following errors
see screen shots

my revised main.js below

// – plugin info requested by host app –
this.__pluginHostId = “com.neonto.studio.element”;
this.__pluginPackageId = “com.neonto.plugin.reactstudio.fullshed4b4”;

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

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

case 'defaultNameForNewInstance':
  return "fullsched400b4";

}
}

// – private variables –

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.0-beta.4”,
@fullcalendar/resource-timegrid”: “^4.0.0-beta.4”
//"@fullcalendar/interaction": “^4.0.0-beta.4”
};
}

this.getReactWebImports = function(exporter) {
var arr = [
{ path: “…/node_modules/@fullcalendar/core/main.css” },
{ path: “…/node_modules/@fullcalendar/timegrid/main.css” },
{ path: “…/node_modules/@fullcalendar/resource-timegrid/main.css” },
{ varName: “{ Calendar }”, path: “@fullcalendar/core” },
{ varName: “resourceTimeGridPlugin”, path: “@fullcalendar/resource-timegrid” },
//{ varName: “interaction”, 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 = `<Calendar `
jsx +=  ` plugins={resourceTimeGridPlugin} `
//jsx +=  ` defaultView={resourceTimeGridDay} `
jsx +=  ` resources={[`
jsx +=  `{ id: 'a', title: 'John Hi-lights' },`
jsx +=  ` { id: 'b', title: 'John Tint', eventColor: 'green' }`
jsx +=  `]}`
jsx +=  ` events={[`
jsx +=  ` { id: '1', resourceId: 'a', start: '2019-02-07T02:00:00', end: '2019-02-07T02:30:00', title: 'High Light Medium with cut' },`
jsx +=  ` { id: '2', resourceId: 'b', start: '2019-02-07T05:00:00', end: '2019-02-07T05:30:00', title: 'event 2' },`
jsx +=  ` { id: '4', resourceId: 'a', start: '2019-02-07T03:00:00', end: '2019-02-07T03:30:00', title: 'event 4' },`
jsx +=  ` { id: '5', resourceId: 'a', start: '2019-02-07T09:00:00', end: '2019-02-07T09:30:00', title: 'event 5' }`
jsx +=  `]}`
jsx +=  ` />;`
//jsx +=  ` Calendar.render();`

return jsx;
}

removed the. – ; – and used curly brackets not – ’ or " –

maybe its the last line I commented out – Calendar.render() – do I need to run this render line?

Your help is most appreciated.

Steve

Hi Steve,

the error seems to happen inside Calendar component. Maybe there’s something with the setup like missing config parameters etc.?

Calendar.render() don’t need to be called manually. Also there seems to be still one additional semicolon after /> mark.

-Juha

Got it too work
Thanks for all the assistance

Steve

Awesome, looks great! :+1: