vue calendar fullCalendar. no jquery required. Schedule events management

How to change locale? I've been trying - fr, zh, ru but all in vein... Locale always stays default - 'en'

<full-calendar :events="events"
                     locale="ru"
                     firstDay="1"
                     @eventClick="eventClick">
      </full-calendar>

I have removed the "sort by duration" method so I can apply absolute positioning to events using the cssClass. The reason for this is that I have a set number of users (U1-U6) and I want their events to always show in a specific order and in a specific location within the day card. However, this has broken the eventClick in certain places. For example, when U1 has an event spanning all week, I can't click the last two days of the event to launch the body-card. This glitch seems to be connected to the 3-day event for U3. See the attached image.

If I change U3's event from the 15th to the 19th to match U1, then all the cell are clickable for U1 again. Really strange.

When I look at the components in the Vue plugin for Chrome, I see that the event on the 18th is duplicated for U1, one with the correct classes and one incorrect :

Here's an example of the styles I applied:

.U1 { position: absolute; top: 0; right: 0; left: 0; background-color: #ccff66; } .U2 { position: absolute; top: 20px; right: 0; left: 0; background-color: #ccccfc; } .U3 { position: absolute; top: 40px; right: 0; left: 0; background-color: #ffabc7; }

Is there a way to resolve this? Perhaps a better way to position the event-items without using position: absolute? Any help would be appreciated!

Hey, I am trying to create a series of different events (with different colours) and I'd love to be able to set something like this:

events = [
  {
    title     :  'event1',
    start     : '2016-07-01'，
    class     : 'birthday'
    YOUR_DATA : {}
  },
  {
    title     : 'event2',
    start     : '2016-07-02',
    end       : '2016-07-03',
    class     : 'vacation away'
    YOUR_DATA : {}
  }
]         

Now each event would get a class name where in vuejs I could add CSS to that specific class name. Thoughts?

Thanks for all your hard work! Andrew

Can you help please :) something wrong again:

That's when I include like this

import fullCalendar from 'vue-fullcalendar';

No errors in console

Trying to find problem. Set including like this

import fullCalendar from 'vue-fullcalendar/src/fullCalendar.vue';

There is error in console:

Uncaught (in promise) ReferenceError: defMonthNames is not defined
    at Object.format (eval at 809 (chunk.14.7d0cbdbb.js:28), <anonymous>:53:32)
    at VueComponent.dispatchEvent (eval at 811 (chunk.14.7d0cbdbb.js:44), <anonymous>:82:78)
    at VueComponent.boundFn [as dispatchEvent] (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:127:12)
    at VueComponent.created (eval at 811 (chunk.14.7d0cbdbb.js:44), <anonymous>:26:10)
    at callHook (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2610:19)
    at VueComponent.Vue._init (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:3366:5)
    at new VueComponent (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:3485:12)
    at createComponentInstanceForVnode (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2761:10)
    at init (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2771:31)
    at createComponent (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:4122:9)

If change const defMonthNames = [ to var defMonthNames = [ all works again.

What I'm doing wrong?

P.S.: Using

• vue.js 2.1.8
• vue-fullcalendar 1.0.7

[Vue warn]: Error when rendering component <full-calendar> at /Users/SunnyWang/code/vue-fullcalendar/src/fullCalendar.vue: 

Found that in vue-calendar.js there are some place with wrong path:

__vue_options__.__file = "/Users/SunnyWang/code/vue-fullcalendar/src/components/header.vue"

Using vue.js 2.1.6

Looks like need to be recompiled with latest version: https://github.com/vuejs/vue/commit/4b51ad048306367a6fb6fbee7445e086d855f31e

Hi, all events doesn't working in my App, could you help me?

<appoiment-list inline-template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <full-calendar :events="events" v-on:changeMonth="updateMonth" lang="en"></full-calendar>
            </div>
        </div>
    </div>
</appoiment-list>

Vue.component('appoiment-list', {
    data() {
        return {
	    	events: []
		}
    },
    components : {
        'full-calendar': require('vue-fullcalendar')    
    },
    methods: {
        'updateMonth' (start, end, current) {
            console.log('changeMonth', start, end, current)
        }
    }
});

If i try to import fullCalendar in my .vue file, server starts normally, but when I navigate to localhost I get the following error:

Error: window is not defined ReferenceError: window is not defined at vue_ssr_bundle:6236:32 at vue_ssr_bundle:6231:49 at module.exports (vue_ssr_bundle:6253:70) at Object. (vue_ssr_bundle:6133:38) at webpack_require (vue_ssr_bundle:6037:31) at Object. (vue_ssr_bundle:6084:3) at webpack_require (vue_ssr_bundle:6037:31) at Object.vue_styles (vue_ssr_bundle:6066:23) at webpack_require (vue_ssr_bundle:6037:31) at vue_ssr_bundle:6057:19

Do you have any idea, what am I doing wrong? Some guidance would be much appreciated. I am just starting with vue and have some problems figuring out SSR. Did some basic examples, now I am trying these in practice.

Fullcalendar has a huge list of available object properties for events, and it seems many of which are not supported in vue-fullcalendar? These should just be passed through but it seems they are not.

For example, I am currently assigning a "backgroundColor" property to each of my events from my server and fetching in Vue, but this property does not seem to translate to the fullcalendar instance.

Documentation is not clear here on how I would achieve this. I can hack it in, but would rather avoid that.

I have set the cssClass for my events, using Chrome Inspector, I can see the styling is set OK.

This is how I'm creating the events:

...
  getCalendar () {
      var url = this.getEndpoint('/view/calendar/now')

      axios.get(url).then(response => {
        this.selEvents = []

        for (let item in response.data) {
          let thing = {
            title: response.data[item].siteId + ' - ' + response.data[item].item,
            start: response.data[item].date,
            cssClass: 'event-' + response.data[item].type.toLowerCase(),
            data: response.data[item]
          }
          this.selEvents.push(thing)
        }
      })
      .catch(e => {
        this.selEvents = loadIssuesEvents
      })
    }
  },
...

My data displays fine.

However, it doesn't show in the calendar with styling I want, I've tried different approaches, none work:

First Try:

<style>
 .event-complaint {background-color: gold;}
</style>

Second Try:

<style>
 .event-item .event-complaint {background-color: gold;}
</style>

What I am doing wroing?

As a suggestion, more examples of how to use this component, e.g. doing event popups, calling remotedatasources etc. it would help a lot.

Thanks for creating a great component.

am using vue-calendar . it works fine for month view . Is there a way to show week view using this calendar ? or can you recommend any other calendar that have week view ?

Hi, can't parse title-format in English to get the Month displaying as TEXT instead of Numbers. What formatting am I expect to send to the title-format prop?

我在进行 月 周 日切换的时候，就会报出这个Cannot read property 'footprint' of undefined 异常 。。且 周和日 的view 直接不显示了。我传的时间格式 {start: '2020-03-23 09:00:00', end: '2020-03-23 12:00:00',} 精确到了秒