wanderxx / vue-fullcalendar Goto Github PK

npm run dev

• !!vue-style-loader!css-loader!../../../../node_modules/vue-loader/lib/style-rewriter?id=data-v-71fea458!sass-loader!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue in ./src/view/view/fullcalendar/index.vue
  Can I how to to?

langSets.js的中文月份少了10月

Dear author:
The files which I download with 'clone and download ' are different from what I used the command 'npm install vue-fullcalendar'. I can correctly run the code using the version from 'clone and download', but can't run correctly with the version which I using 'npm install vue-fullcalendar', seems that using 'npm install vue-fullcalendar' not get the files from master branch.
BR,
George

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

Any plans to make the calendar responsive? I'm trying to make it work on mobile. (similar to: http://fullcalendar.io/js/fullcalendar-2.9.1/demos/agenda-views.html)

zh-cn不行,
zh也不行

I've started working with vue-fullcalendar and during switching of the date, I found an issue of I didn't know what month I was switching to. The changeMonth attributes are start and end which give you the first date in the calendar and the last date. In most cases, it did not include the month it was currently on.

(example: If I'm looking at September/2016, the start date is Aug 29th and end date is Oct 10th, but the month I need to know is September 1st, 2016)

Maybe it be a great idea to return changeMonth with (start, end, current) dates. Where current is the first day of the month you changed to. Just a thought.

confused

The version I tested installing your component is different from the one you see in the gif below:

https://camo.githubusercontent.com/54f8793a0c6b4b226752414a7067b0a9c2850951/687474703a2f2f672e7265636f726469742e636f2f766f7674654a356d396f2e676966

What I need to have available, for example, the context menu and the top left button.

Thanks for the feedback.

Please, remove all console logs from your code, tks 😃

我希望能显示农历，或者农历，阳历切换显示

这两个功能是怎么实现的额?按照api添加slot实现不了额？

看文档好像只要设置cssClass 然后就能改变不同事件的样式了 但是我实际操作 并没有效果 有经验的指导一下

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 ?

Where is January 1th 2017 ？

目前只可以左右点击以此进行月份切换，可以添加点击年月随机的选择年月吗

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.

看了看源码
在FullCalendar.vue文件中：
emitMoreClick (day, events, jsEvent) {
this.$emit('moreClick', day, event, jsEvent)
}
this.$emit('moreClick', day, event, jsEvent)
应该为
this.$emit('moreClick', day, events, jsEvent)

本地运行时出现了很多 undefined， 上面月份切换的左右位置，以及下面日期框里都多了个 undefined..... 版本是 1.0.8

因为readme已经‘年久失修‘，很多功能都实现不了
官网已经移除了$dispatch,
所以文档里获取事件的方法已经没用了，因为这日历帮了我挺大的一个忙，所以过来提下问题，希望作者能再改进一下。
//下面是示例

<fullCalendar @eventClick="a" :events="fcEvents" locale="zh"></fullCalendar>

  methods: {
            a(data,day,js){
                console.log(data);
              //可以在这里显示或者隐藏事件
             data.isShow=false
            }

显示隐藏事件的前提要在数据中定义一个isShow

                fcEvents :  [
                    {
                        title : 'Sunny Out of Office',
                        start : new Date('2016-08-25'),
                        end : new Date('2017-07-20'),
                        isShow:false,
                     }
                   ]

Hi,
The issue i'm facing is if I want to start my week with "Monday".
I could do first-day="1", but on Jan.2017, the month will start with Jan 2.
I could do first-day="-6", but on Oct.2016, the month will end on Oct.30 (instead of 31st).

Any solution?

in the fullCalendar.vue, line 7. there's a typo "calss"

路过

https://wanderxx.github.io/vue-fullcalendar/
日期不显示

safari

other browsers

The cause seems to be that the argument order of the Array.prototype.sort() is different between safari and other browsers.

vue-fullcalendar.js(v1.0.9):634

thisDayEvents.sort(function (a, b) {
  if (!a.cellIndex) return 1;
  if (!b.cellIndex) return -1;
  return a.cellIndex - b.cellIndex;
});

My environment is below.

• macOS Sierra 10.12.4
• Safari 10.1
• Chrome 58.0.3029.96
• FireFox 53.0.2

could you add this to Bower?

https://bower.io/docs/creating-packages/

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!

使用@eventClick="onEventClick"并不会起作用

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.

Is everything working on this branch?

[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:
vuejs/vue@4b51ad0

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?

"fc-body-card" ,how to work?

<fc-body :current-date="currentDate" :events="events" :month-names="monthNames" 
      :week-names="weekNames" :first-day="firstDay"
      @eventclick="emitEventClick" @dayclick="emitDayClick"
      @moreclick="emitMoreClick">
      <div slot="body-card">
        <slot name="fc-body-card">
        </slot>
      </div>
    </fc-body>

am not getting callbacks for anything at all , i followed your code completely , but no callbacks

hi,
if e.g 10th of May has 5 events and one event from 10th to 11th of May the event from 10th to 11th is only showing on 10th of May and also on 11th of May "+2 more" is showing although there is just one event (from 10th to 11th)

{
"events": [
{
"start": "2017-05-10T08:11:51+02:00",
"end": "2017-05-10T09:21:51+02:00",
"id": "33lci65sl4r1f71776po4psupg",
"location": null,
"description": null,
"title": "testAPI"
},
{
"start": "2017-05-10T09:00:00+02:00",
"end": "2017-05-11T10:00:00+02:00",
"id": "e8degsnttfn71fr5jaitkarf2g",
"location": null,
"description": null,
"title": "312312"
},
{
"start": "2017-05-10T09:05:28+02:00",
"end": "2017-05-10T10:15:28+02:00",
"id": "2388kie377ps4514ipor7g3fhs",
"location": null,
"description": null,
"title": "testAPI"
},
{
"start": "2017-05-10T10:30:00+02:00",
"end": "2017-05-10T11:30:00+02:00",
"id": "bk4m5f5kl6oir5bllm13cisg7g",
"location": "myLocation",
"description": "myDescription",
"title": "test123"
},
{
"start": "2017-05-10T14:45:52+02:00",
"end": "2017-05-10T15:55:52+02:00",
"id": "8lmjkvjl3577n1p5748jmkdjac",
"location": null,
"description": "3123213123",
"title": "testAPI"
},
{
"start": "2017-05-10T22:00:00+02:00",
"end": "2017-05-10T23:00:00+02:00",
"id": "qpmumg694ldiksb1suqsk2nv0s",
"location": null,
"description": "aber doch",
"title": "late"
}
]
}

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.

How to set start of the week to monday ? Currently table columns are in this order:
Sun Mon Tue Wed Thu Fri Sat

Is there any way how to move Sunday to last position so week will start with Monday?

Thanks for help

Inside dateFunc.js there are shortMonth and defMounthNames
Later format function use monthNames from parameter and default if not included

 format (date, format, monthNames) {
    monthNames = monthNames || defMonthNames

but for shortMonth there is no alternative

// for Vue2
npm install [email protected] --save

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

Hi,
dispatchEvent in header.vue, but it's missing the firstDay as a prop.
(header.vue:65) The first day seems to always offset by 1 (which turns out to be Mondays). I think this should be:
startDate.setDate(startDate.getDate() - curWeekDay + firstDay)

ERROR in ./demo/main.js
Module build failed: SyntaxError: E:\workspace\package.json: Error while parsing
JSON - Unexpected token } in JSON at position 1943
at Object.parse (native)
at ConfigChainBuilder.addConfig (E:\workspace\vue-fullcalendar
-master\node_modules\babel-core\lib\transformation\file\options\build-config-cha
in.js:150:65)
at ConfigChainBuilder.findConfigs (E:\workspace\vue-fullcalend
ar-master\node_modules\babel-core\lib\transformation\file\options\build-config-c
hain.js:102:30)
at buildConfigChain (E:\workspace\vue-fullcalendar-master\node
_modules\babel-core\lib\transformation\file\options\build-config-chain.js:61:13)

at OptionManager.init (E:\workspace\vue-fullcalendar-master\no

de_modules\babel-core\lib\transformation\file\options\option-manager.js:354:58)
at File.initOptions (E:\workspace\vue-fullcalendar-master\node
_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (E:\workspace\vue-fullcalendar-master\node_modules
\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (E:\workspace\vue-fullcalendar-master\no
de_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (E:\workspace\vue-fullcalendar-master\node_module
s\babel-loader\lib\index.js:46:20)
at Object.module.exports (E:\workspace\vue-fullcalendar-master
\node_modules\babel-loader\lib\index.js:163:20)

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)
        }
    }
});

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>

The docs are a bit sparse on this
https://github.com/Wanderxx/vue-fullcalendar#slots

ref: #10 (comment)

You can see that the parameters captured from the chrome dev tools do not match the calendar layout. I took the parameters as is and sent it in an internal api call. These are the original values from the changeMonth callback.

Some month works properly, some other don't. Seems to work for January 2017, but December 2016 does not seem to work.

December wrong values
https://postimg.org/image/ua91006fp/

I know it has something to do with this part of the code, but I am not sure how to fix it or to test it.
https://github.com/Wanderxx/vue-fullcalendar/blob/master/src/components/header.vue#L69