CODEWITHSUNDEEP
javascriptjsonajaxasp-classicfullcalendar
Mel0nc0lly
Mel0nc0lly

Reputation: 158

FullCalendar Events and resources not displaying when pulled from json source

I have been successfully using static arrays for events and resources injected into fullcalendar at run time by asp (I know, it's ancient, but it's my only tool right now)

I want to upskill, so now i am trying to point the events and resources to asp pages that produce the arrays. I cannot get that bit to work - no events are displayed.

I have, in the code below, simply gone to /resources.asp and /events.asp and copied the output exactly and then pasted it in, hard coded. The calendar works perfectly so I am reasonably certain the two pages are producing the right outputs. Other solutions i have seen have eventually pointed out that JSON or dates or whatever was in the wrong format but I have literally taken the output of my two pages and pasted them in and they work.

When instead i remove the hard coded lines and uncommented the bottom two lines to point the calendar to the two asp pages, the calendar doesn't display anything. The console tells me that both resources were loaded successfully and I can see the content I am expecting to see. No other error messages visible in the console.

What am I missing?

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    displayEventTime : false,
    firstDay: 6,
   // plugins: [ 'resourceTimelinePlugin'],
   slotLabelInterval: {days:1},
   eventTimeFormat: { // will produce something like "Tuesday, September 18, 2018"
    hour: '2-digit',
    minute: '2-digit',
         hour12: false,
  },
    height: "auto",
    timeZone: 'UTC',
    initialView: 'resourceTimelineMonth',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Work Orders',
    resources: [{id:'wo_3', title:'Work Order 57820'},{id:'comp_19', title:'Person in charge of possession (PICOP)', parentId: 'wo_3'},{id:'comp_20', title:'Track Safety Coordinator (TSC)', parentId: 'wo_3'},],
    events: [{title:'Unassigned',start:'2020-10-01 08:21',end:'2020-10-01 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-02 08:21',end:'2020-10-02 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-03 08:21',end:'2020-10-03 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-12 09:14',end:'2020-10-13 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-12 22:14',end:'2020-10-13 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-13 09:14',end:'2020-10-13 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-13 22:14',end:'2020-10-14 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-14 09:14',end:'2020-10-14 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-14 22:14',end:'2020-10-15 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-15 09:14',end:'2020-10-15 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-15 22:14',end:'2020-10-16 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-16 09:14',end:'2020-10-16 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-16 22:14',end:'2020-10-17 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-17 09:14',end:'2020-10-17 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-17 22:14',end:'2020-10-18 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-18 09:14',end:'2020-10-18 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_18', color: 'orange'},]
    //resources: '/resources.asp',
    //events: '/events.asp',
  });

  calendar.render();

});

Upvotes: 1

Views: 728

Answers (1)

Mel0nc0lly
Mel0nc0lly

Reputation: 158

OK, thanks for the inputs here, and of course (cringe) there was some HTML in the response from my pages but the main issues were: fields and data seem have to be wrapped in " and not apostrophes, and the final comma I had at the end (due to laziness of not removing it in the code) were causing non-valid JSON per JSONLINT - but what was getting me was that my hard -coded data had all those issues present and FullCalendar was able to use them anyway, no problem. I guess I assumed it was somewhat forgiving and would work with my JSON-outputting-pages the same way

Suffice to say, it all works now after making those changes.

No issues with sucking eggs, I am still learning this stuff so all pointers are gratefully accepted.

Upvotes: 2

Related Questions