Fullcalendar Plugin help


#1

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


#2

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


#3

Thanks you’re a star
Steve