javascript – Problemas a la hora de mostrar los eventos en FullCalendar

El problema es el siguiente, mi evento (reserva de turno en este casi) tiene como atributos los siguientes campos:

  • id: number;
  • nombreApellido: string;
  • inicio: Date;
  • fin: Date;
  • precio: number;
  • cancha: Cancha;

Y fullCalendar admite como atributos para mostrar ‘title’, ‘start’ y ‘end’. En este caso, ‘start’ estaría formado por ‘nombreApellido’, ‘precio’ y ‘cancha’ (valor numérico solamente – número de cancha). Como se podría hacer para asignarle a los atributos del fullCalendar mis atributos??

Soy nuevo en esto, estoy usando Angular y a fullCalendar es la primera vez que lo uso.

reserva.service.ts

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { Cancha } from './canchas.service';
import { Reserva } from '../models/reserva';
import { UrlService } from './url.service';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';

@Injectable({
  providedIn: 'root'
})
export class ReservaService {

  private reserva: Reserva() = ();

  constructor(private _http: HttpClient, private _url: UrlService) { }

  guardarReserva(reserva: Reserva): Observable<Reserva> {
    reserva.start = moment(reserva.startDate).format('YYYY-MM-DDTHH:mm');
    reserva.end = moment(reserva.endDate).format('YYYY-MM-DDTHH:mm');
    console.log('Reserva servicio: ', reserva);
    return this._http.post<Reserva>(this._url.getURLBase() + '/reserva', reserva);
   }

  getReservas(): Observable<Reserva()> {
    return this._http.get<Reserva()>(this._url.getURLBase() + '/reserva');
  }

}
export interface IReserva {
  id: number;
  title: string;
  cancha: Cancha;
  start: string;
  end: string;
  startDate: Date;
  endDate: Date;
  precio: number;
}

reserva.component.ts

import { Reserva } from 'src/app/models/reserva';
import { ReservaService } from './../../../service/reserva.service';
import { Component, Input, OnInit } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import esLocale from '@fullcalendar/core/locales/es';
import listPlugin from '@fullcalendar/list';

@Component({
  selector: 'app-reserva',
  templateUrl: './reserva.component.html',
  styleUrls: ('./reserva.component.css')
})
export class ReservaComponent implements OnInit {

  public reservas: Reserva();
  optionsReserva: any;
  optionsLista: any;
  title: any;
  start: any;
  end: any;

  constructor(private _servicioReserva: ReservaService) {

    this._servicioReserva.getReservas().subscribe(reservas => {
      this.reservas = reservas}
      );


    /*this.events = (
      {
        "title":"Hola",
        "start":"2020-10-26"
      },
      {
        "title":"Chau",
        "start":"2020-10-26",
        "end":"2020-10-27"
      },
      {
        "title":"Turno",
        "start":"2020-10-26T11:00:00",
      }
    );*/

    this.optionsReserva = {
      plugins: (dayGridPlugin, timeGridPlugin, interactionPlugin),
      defaultDate: new Date(),
      locale: esLocale,
      initialView: 'timeGridWeek',
      firstDay: 1,
      handleWindowResize: true,
      allDaySlot: false,
      headerToolbar: {
          start: 'prev,next', // will normally be on the left. if RTL, will be on the right
          center: 'title',
          end: 'today' // will normally be on the right. if RTL, will be on the left
        }
    };
    this.optionsLista = {
      plugins: (listPlugin, dayGridPlugin, timeGridPlugin, interactionPlugin),
      defaultDate: new Date(),
      locale: esLocale,
      initialView: 'listWeek',
      headerToolbar: {
        start: 'prev,next', // will normally be on the left. if RTL, will be on the right
        center: '',
        end: 'today' // will normally be on the right. if RTL, will be on the left
      }
    };
   }

  ngOnInit(): void {



  }
}

reserva.ts

import { Cancha } from '../service/canchas.service';
import { IReserva } from '../service/reserva.service';
import * as _ from 'lodash';
import * as moment from 'moment';


export class Reserva implements IReserva{

  constructor(data){
    _.set(this, 'data', data);
  }
  get id(): number {
    return _.get(this, 'data.id');
  }
  set id(value: number) {
    _.set(this, 'data.id', value);
  }

  get title(): string {
    return _.get(this, 'data.title');
  }
  set title(value: string) {
    _.set(this, 'data.title', value);
  }

  get cancha(): Cancha {
    return _.get(this, 'data.cancha');
  }

  set cancha(value: Cancha) {
    _.set(this, 'data.cancha', value);
  }

  get start(): string {
    return _.get(this, 'data.start');
  }

  set start(value: string) {
    _.set(this, 'data.start', value);
  }

  get startDate(): Date {
    return _.has(this, 'data.startDate') ? _.get(this, 'data.startDate') : moment(this.start);
  }

  set startDate(value: Date) {
    _.set(this, 'data.startDate', value);
  }

  get end(): string {
    return _.get(this, 'data.end');
  }
  set end(value: string) {
    _.set(this, 'data.end', value);
  }

  get endDate(): Date {
    return _.has(this, 'data.endDate') ? _.get(this, 'data.endDate') : moment(this.end);
  }
  set endDate(value: Date) {
    _.set(this, 'data.endDate', value);
  }

  get precio(): number {
    return _.get(this, 'data.precio');
  }

  set precio(value: number) {
    _.set(this, 'data.precio', value);
  }

  getData(){
    return _.get(this, 'data');
  }

}

Esos son mis códigos por si sirven para guiarse.

Desde ya, muchas gracias.