FullCalendar adds "undefined" next to each date

Question

I am using vue-fullcalendar which is a wrapper for FullCalendar library. I've set up the calendar and it is working fine, but as soon I import Scheduler, which is add-on that provides FullCalendar functionality to display resources I got "undefined" next to each date in the calendar (As you can see on the image).

I found two articles on the stackoverflow about this issue:

jQuery fullCalendar displayed undefined on title - I have tried to change the order of moment.js but that doesn't help. This issue is also happening even if I not impor moment.js at all.
How to edit Title in Fullcalendar - Also tried to revert to older version of FullCalendar but without success.

This is the code that I am using:

<template>
<div>
    <full-calendar
            ref="calendar"
            :events="events"
            :config="config"
    >
    </full-calendar>
</div>
</template>

<script>
  import * as moment from 'moment'
  import {FullCalendar} from 'vue-full-calendar'
  import 'fullcalendar/dist/fullcalendar.min.css'
  import 'fullcalendar-scheduler'
  import "fullcalendar-scheduler/dist/scheduler.min.css"

  export default {
    data() {
      return {
        config: {},

        events: [
          {
            id: 1,
            title: 'Title',
            start: moment().add(2, 'd').add(2, 'h'),
            end: moment().add(2, 'd').add(4, 'h'),
            resourceId: 'a'
          }
        ]
      }
    },

    methods: {},

    components: {
      FullCalendar
    }

  }
</script>

you need jQuery as well as momentJS, and also the right version of these tools as per https://fullcalendar.io/support/ . Check that vue isn't importing somethings automatically for you. Watch your browser's network tab to see if any of these are being loaded multiple times, that's the usual reason for this issue — ADyson, Jan 16 '18 at 06:33
I managed to find out why is this happening. When execute: `npm install fullcalendar-schedule` npm add node-modules inside fullcalendar-schedule and inside it is one more fullcalendar. So it seems that there are 2 fullcalendars in the project. When I manually delete fullcalendar from fullcalendar-schedule everything works fine. Do you know maybe why is this happening? — Diego Armando Maradona, Jan 16 '18 at 18:32
fullcalendar-scheduler is an add-on for fullcalendar, but it requires fullcalendar in order to run. Really I'd have thought it would just have the other fullcalendar package as a dependency, but maybe it can be used standalone, or maybe someone made a mistake when creating the package, it's hard to know without asking the maintainer of the package. Anyway I guess you can just remove the basic fullcalendar package and use only the scheduler package (without deleting bits from it manually!). — ADyson, Jan 16 '18 at 21:09
@DiegoArmandoMaradona Thanks for pointing to this, that fixed it!! — Cabuxa.Mapache, Feb 20 '19 at 07:27

score 1 · Answer 1 · answered Mar 19 '19 at 15:38

Add this to your FullCalendar config and undefined will be striped from the title

viewRender: function(view, element) {
              $('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), "");
          }

If you are using vue better to import * as $ from 'jquery';

FullCalendar adds "undefined" next to each date

1 Answers1