So I posted an issue on the github page for angular fullcalendar, but I figured I'd take a stab here and see if anyone could spot the issue with my code or if I've discovered a bug.
So I've been having issues loading resources in timeline view. Below is a simple recreation of what I've done:
component.ts:
import { Component, OnInit, ViewChild, Input, AfterViewInit, OnDestroy } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { CalendarFunctionsService } from '@_shared/calendar-functions.service';
import resourceCommon from '@fullcalendar/resource-common';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import moment from 'moment';
import { take } from 'rxjs/operators';
@Component({
selector: 'app-acalendar',
templateUrl: './acalendar.component.html',
styleUrls: ['./acalendar.component.sass']
})
export class AcalendarComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() calendarOutlet: string;
@ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent;
initialLoad: boolean = true;
options: any;
events = (fetchInfo, successCallback, failureCallback) => {
// debugger;
this.week = this.fns.weekResolver(fetchInfo);
this.day = fetchInfo.start.getDay();
// console.log(this.week + " " + this.day);
this.adminApi.getSlots(this.week, this.day).pipe(take(1)).subscribe (
res => { if (res && this.initialLoad === true) {
this.alertService.success('Availability slots successfully loaded!', true);
successCallback(res);
} else { successCallback(res); console.log("loaded events") }
},
error => { console.log("response: " + error); this.alertService.error("There was a problem loading availabilities: " + error );
})
}
resources = (fetchInfo, successCallback, failureCallback) => {
// debugger;
// the following line is commented because fetchInfo is undefined:
// this.adminApi.getSlots(this.fns.weekResolver(fetchInfo), fetchInfo.start.getDay())
// using scalar values because fetchInfo is undefined
this.adminApi.getSlots(47, 3)
.pipe(take(1))
.subscribe (
res => {
let resourceArray = [];
if (res && this.initialLoad == true){
this.alertService.success('Availability slots loaded', true);
this.initialLoad = false;
for (let item of res){
resourceArray.push({id: item.resourceId, title: item.caregiver, caregiver: item.caregiver, day: this.fns.dayNameResolver(item.day)})
}
successCallback(resourceArray);
}
},
error => {console.log("response: "+error); this.alertService.error("There was a problem loading availabilities: "+error);}
)
}
constructor (
private alertService: AlertService,
private adminApi: AdminApiService,
private fns: CalendarFunctionsService
) { }
ngOnInit() {
this.options = {
plugins: [resourceCommon, resourceTimelinePlugin],
header: {
left: '',
center: 'title',
right: 'day, prev, next'
},
views: {
resourceTimelineDay: {
type: 'resourceTimelineDay',
minTime: '06:00:00',
maxTime: '24:00:00',
slotDuration: '00:30:00',
resourceOrder: 'caregiver',
resourceLabelText: 'Caregiver',
resourceAreaWidth: '15%',
refetchResourcesOnNavigate: true,
}
},
}
}
ngAfterViewInit(): void {
//Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
//Add 'implements AfterViewInit' to the class.
console.log("Api: ");
console.log(this.calendarComponent.getApi());
this.calendarComponent.getApi().refetchResources;
}
component.html.ts:
<full-calendar #calendar
schedulerLicenseKey = "GPL-My-Project-Is-Open-Source"
[plugins] = "this.options.plugins"
defaultView = "resourceTimelineDay"
[header] = "this.options.header"
[views] = "this.options.views"
contentHeight = "auto"
[events] = "events"
[resources] = "resources"
>
</full-calendar>
shared module for Calendar:
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FullCalendarModule } from '@fullcalendar/angular';
import { EcalendarComponent } from '@layouts/components/ecalendar/ecalendar.component';
import { AcalendarComponent } from '@layouts/components/acalendar/acalendar.component';
@NgModule({
imports: [
CommonModule,
FullCalendarModule
],
declarations: [
EcalendarComponent,
AcalendarComponent
],
exports: [
EcalendarComponent,
AcalendarComponent
],
providers: [],
bootstrap: []
})
export class CalendarModule {
// static forRoot(): ModuleWithProviders {
// return {
// ngModule: CalendarModule,
// providers: [ ]
// };
// }
}
As you can see, I'm using resources as a function. When using scalar values, everything works correctly, but I am unable to use dynamic information passing to the backend.
So I did a little digging and learned that while events options are being populated, resources is not. In fact, I get resources with a null range which in the following piece of code, fails the if (arg.range) section.
registerResourceSourceDef({
parseMeta: function (raw) {
if (typeof raw === 'function') {
return raw;
}
else if (typeof raw.resources === 'function') {
return raw.resources;
}
return null;
},
fetch: function (arg, success, failure) {
var dateEnv = arg.calendar.dateEnv;
var func = arg.resourceSource.meta;
var publicArg = {};
if (arg.range) {
publicArg = {
start: dateEnv.toDate(arg.range.start),
end: dateEnv.toDate(arg.range.end),
startStr: dateEnv.formatIso(arg.range.start),
endStr: dateEnv.formatIso(arg.range.end),
timeZone: dateEnv.timeZone
};
}
// TODO: make more dry with EventSourceFunc
// TODO: accept a response?
unpromisify(func.bind(null, publicArg), function (rawResources) {
success({ rawResources: rawResources }); // needs an object response
}, failure // send errorObj directly to failure callback
);
}
});
I have tried quite a few different methods to resolve the issues with resources, but unfortunately I keep getting null on the fetch of arg.range I have tried switching from timeline view to timeGrid view, still using resources of course, and it still produces the same issues.
package.json:
"dependencies": {
"@angular/animations": "^8.2.4",
"@angular/cdk": "^8.1.4",
"@angular/common": "~8.2.3",
"@angular/compiler": "~8.2.3",
"@angular/core": "~8.2.3",
"@angular/forms": "~8.2.3",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "~8.2.3",
"@angular/platform-browser-dynamic": "~8.2.3",
"@angular/router": "~8.2.3",
"@auth0/angular-jwt": "^3.0.0",
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fullcalendar/angular": "^4.3.1",
"@fullcalendar/bootstrap": "^4.3.0",
"@fullcalendar/core": "^4.3.1",
"@fullcalendar/daygrid": "^4.3.0",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/luxon": "^4.3.0",
"@fullcalendar/moment": "^4.3.0",
"@fullcalendar/resource-common": "^4.3.1",
"@fullcalendar/resource-daygrid": "^4.3.0",
"@fullcalendar/resource-timegrid": "^4.3.0",
"@fullcalendar/resource-timeline": "^4.3.0",
"@fullcalendar/timegrid": "^4.3.0",
"@fullcalendar/timeline": "^4.3.0",
"@ng-bootstrap/ng-bootstrap": "^5.1.0",
"@types/jquery": "^3.3.31",
"bootstrap-css-only": "^4.3.1",
"bulma": "^0.7.5",
"chart.js": "^2.8.0",
"express": "^4.17.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"ngx-uploader": "^7.1.0",
"particles.js": "^2.0.0",
"perfect-scrollbar": "^1.4.0",
"rxjs": "~6.4.0",
"shortid": "^2.2.15",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.1",
"@angular/cli": "~8.3.1",
"@angular/compiler-cli": "~8.2.3",
"@angular/language-service": "~8.2.3",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.9.5",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
Please advise!
