geoffzhu / vue-event-calendar Goto Github PK

不使用webpack（直接script标签引入）该如何使用此插件

It could be great to set DateTime instead of just a Date for events.
In my case, there are events happening on the same day.

how to resolve too many tasks in the same day?
like one day,i have ten tasks ,but if i use overflow,
the scroll-bar is too urgly

我想进入的时候默认显示当天事件，尝试操作vue-event-calendar.vue组件里的selectedDayEvents，不过还没获取数据之前处理方法就执行完了，把事件全部都显示出来了。然后尝试在vue-event-calendar.vue组件里异步success拼接数据后执行handleChangeCurDay，依然是数据没渲染就执行完了，还是把事件都显示出来了。有什么方法可以默认显示当天事件吗？

比如7号有一个event对象，在数字7的旁边显示一个tooltip（显示event.title）

let today = new Date() today = today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()} this.$EventCalendar.toDate(today)

this.$EventCalendar.toDate(today) 此处无作用， 希望在demo中体现下

已经 npm install 过，报错如下，请帮忙看一下，谢谢：
➜ vue-event-calendar git:(master) npm run dev

[email protected] dev /Users/youcheng/Desktop/vue-event-calendar
cross-env NODE_ENV=development webpack-dev-server --open --inline --hot

events.js:160
throw er; // Unhandled 'error' event
^

Error: spawn webpack-dev-server ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

Hi, I need that you insert translation for Brazil.

Thank you!

Hi! My date format is 2017-02-23, but you comparable with ${dateObj.getFullYear()}/${dateObj.getMonth()+1}/${dateObj.getDate() to mark today style, What is better solution ? Convert '-' to '/' in your component, or in my api? I prefer in your plugin, it become generic.

Thanks for the cool calendar library.

I was wandering if there is a way to listen to something like a month change event, so I can perform an ajax request to get all the events for the month

Hey mate,

I faced an error. I am using vuex and, as for the events props I put data using getter from computed not model like,

...
computed: {
events(){
return this.$store.getters.events;
}
},

when the calender render, it shows me an error "vue.esm.js?65d7:523 TypeError: Cannot read property 'split' of undefined"

I was tracing using vue-tools, I found the problem. In the "CalPanel", the day list cannot make days, it said, "dayList:"(error during evaluation)""

is there a any way to solve this problem?

cheers,

在线的示例中没有报错，但是日历无法选择日期，请看一下

I do not use single file components. I would like to insert this compiled component in my project, how to do it?

Bug, feature request, or proposal:

.item without a visible day number are triggering the handleDayChanged method/event.

Steps to reproduce:

1. Go to the demo page
2. Select a month that not start on sunday (like July 2017 or August 2017)
3. Open the console (F12)
4. Click on a blank .item bellow the week name

Hi,

Can you make a refinement for the calendar to run with Internet Explorer 11. It pushes the error "Object doesn't support property or method 'assign'". I don't know it's arising from ES 6 however I am using babel-cli but that does not correct it.

Best regards.

Wondering if there is something up with Daylight Saving Time? If I look at the demo page I seem to have two Nov 5th!

http://geoffzhu.cn/vue-event-calendar/

Will dig into it but curious if others are seeing the same behaviour.

Can you add please some props to set custom header to list in case of all events?
Or named slot just like you did for elements.
Thnx.

Would it be possible to add an option to choose whether the week starts on monday or not?

I would rather stick to the more modern version of the calendar which starts on monday and ends on Sunday.
I would change it myself and do a PR but I don't have enough experience with Vue Component to do so with confidence.

Thanks in advance for your anwser, and thanks for the awesome component!

Hi,
Is it possible to add an event that lasts several days?
If not, would it be possible to add this feature?
Thanks

Is there a way to change the date format from a Europe version (DD/MM/YYYY) to a US version (MM/DD/YYYY)???

By default shows all events. How could I show my reservations today?

I really like the simplicity of your calendar. Do you think of adding a time feature for the events array?

Best Regards 👍

Edit:
Forget about it. Dumb question :)

Importing the css in main.js applies this style.

h3,p{margin:0;padding:0}

I do not want this applied globally.

Events are not scrollabile in the event block, i have 9 events and i can only see 7 of it.
I added a overflow-x: scroll; temporally to resolve that.

特别的好用，我想给你100star，可惜只能给一个

Hello,

Great plugin!
But I'm not sure if it's me but I can't find a way to go back to the All Events state after having selected a day.
Is it possible ?

Hi, guys how can i change in the calendar the curYearMonth for the MONTH but not de number but the name Example the calendar show < 03/2017 > A like change < APRIL/2017 > our < APRIL >. And
In which file i do this change.

Thank's

这个组件在android5.0的系统 有兼容性问题呀 导致引入这组件的项目页面都打不开了 android6.0以上的系统没这问题 我的环境是webpack + vue2.1.10 然后还有个问题 这个组件怎么局部引入

<vue-event-calendar :events="demoEvents" @day-changed="handleDayChanged" @month-changed="handleMonthChanged">

<div v-for="(event, index) in props.showEvents" class="event-item" @click.native="pop(event)">
<div @click.native="pop(event)">
{{event.title}}
</div>
</div>
</template>
</vue-event-calendar>

不知道为什么，自定义内容里写点击事件无效，不管写在v-for的位置 还是写在里面的位置，这个到底应该写在哪？

上一月、下一月的事件生效了，但是点击日期事件是没有生效的，也没有报错，和在线实例中效果一样，没生效点击日期事件，和动态图中的效果有差异

It would be usefull if you could add custom translations without having to edit the NPM Package itself, i tried everything and the only solution i could come up with was adding it to the localization in the Package itself.

I dont find that a feasible solution, so i was wondering if something like custom localization could be added.

Cheers

My template based on example from README.md

<template>

    <div class="fast-navigation-calendar">
        <vue-event-calendar :events="demoEvents"></vue-event-calendar>
    </div>

</template>

<script>

    export default {
        name: 'fast-navigation-calendar',
        data () {
            return {
                demoEvents: [{
                    date: '2016/12/15',
                    title: 'Foo',
                    desc: 'longlonglong description'
                },{
                    date: '2016/11/12',
                    title: 'Bar'
                }]
            }
        }
    }

</script>

But i see

[Vue warn]: Error in getter for watcher "calendarParams": "ReferenceError: dateString is not defined"

found in

---> <VueEventCalendar>
       <FastNavigationCalendar> at src/components/fast-navigation/fast-navigation-calendar.vue
         <FastNavigation> at src/components/fast-navigation/fast-navigation.vue
           <FrontendIndex> at src/pages/frontend-index.vue
             <App> at src/app.vue
               <Root>
error during render : /
ReferenceError: dateString is not defined
    at VueComponent.calendarParams (/var/git/frontend/node_modules/vue-event-calendar/dist/index.js:864:26)
    at Watcher.get (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:2860:25)
    at Watcher.evaluate (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:2967:21)
    at VueComponent.computedGetter (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:3238:17)
    at VueComponent.<anonymous> (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:432:16)
    at Watcher.get (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:2860:25)
    at new Watcher (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:2849:12)
    at VueComponent.Vue.$watch (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:3338:19)
    at createWatcher (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:3298:13)
    at initWatch (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:3280:7)
    at initState (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:3069:5)
    at VueComponent.Vue._init (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:4193:5)
    at new VueComponent (/var/git/frontend/node_modules/vue/dist/vue.runtime.common.js:4365:12)
    at createComponentInstanceForVnode (/var/git/frontend/node_modules/vue-server-renderer/build.js:6810:10)
    at renderComponentInner (/var/git/frontend/node_modules/vue-server-renderer/build.js:6986:40)
    at renderComponent (/var/git/frontend/node_modules/vue-server-renderer/build.js:6961:5)
    at RenderContext.renderNode (/var/git/frontend/node_modules/vue-server-renderer/build.js:6877:5)
    at RenderContext.next (/var/git/frontend/node_modules/vue-server-renderer/build.js:2186:14)
    at cachedWrite (/var/git/frontend/node_modules/vue-server-renderer/build.js:2046:9)
    at renderElement (/var/git/frontend/node_modules/vue-server-renderer/build.js:7101:5)
    at renderNode (/var/git/frontend/node_modules/vue-server-renderer/build.js:6879:5)
    at renderComponentInner (/var/git/frontend/node_modules/vue-server-renderer/build.js:6997:3)
"GET /" 500 - "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36"

Im using

"vue": "^2.4.1",
"vue-event-calendar": "^1.4.5"

Exactly
ReferenceError: dateString is not defined
https://github.com/GeoffZhu/vue-event-calendar/blob/master/dist/index.js#L864

When changing weekStartOn to 1 (monday) October 1st and January 1st disappear. It seems to be when the first day of the month is a Sunday.

Thanks for your calendar, I am using this and it is quite awsome.
I need lang "ko"
please add this.

<template>

    <div class="fast-navigation-calendar">

        <vue-event-calendar :events="demoEvents"></vue-event-calendar>

    </div>

</template>

<script>

    import VueEventCalendar from "vue-event-calendar"

    export default {
        components: {VueEventCalendar},
        name: 'fast-navigation-calendar',
        data () {
            return {
                demoEvents: [{
                    date: '2016/12/15',
                    title: 'Foo',
                    desc: 'longlonglong description'
                },{
                    date: '2016/11/12',
                    title: 'Bar'
                }]
            }
        }
    }

</script>

Is not working

TypeError: Cannot read property 'split' of undefined
    at install (webpack:///./node_modules/vue-event-calendar/dist/index.js:940)
    at resolveAsyncComponent (vue.runtime.esm.js:2086)
    at createComponent (vue.runtime.esm.js:3558)
    at _createElement (vue.runtime.esm.js:3764)
    at createElement (vue.runtime.esm.js:3703)
    at vm._c (vue.runtime.esm.js:4043)
    at Proxy.render (fast-navigation-calendar.vue?46ba:4)
    at VueComponent.Vue._render (vue.runtime.esm.js:4095)
    at VueComponent.updateComponent (vue.runtime.esm.js:2515)
    at Watcher.get (vue.runtime.esm.js:2858)

Is it possible to customize the i18n for a given language?

In my case, being able to customize format, fullFormat, dayEventsTitle and notHaveEvents would be incredibly helpful. Here is an example of what I might want to change:

en: {
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    format: 'January 2017',
    fullFormat: 'yyyy-MM-dd',
    dayEventsTitle: 'All Meetings',
    notHaveEvents: 'No Meetings Scheduled'
  },

if the day of the week is Sunday, firstDay.getDay () gives 0.
as a result, we lost the first week on the calendar.
replace with this code to fix it (in the cal-panel.vue)

    dayList () {
        let firstDay = new Date(this.calendar.params.curYear, this.calendar.params.curMonth, 1)
        let dayOfWeek = firstDay.getDay()
        if (dayOfWeek == 0&&this.calendar.options.weekStartOn > 0) {
          dayOfWeek=7
        }

        let startDate = new Date(firstDay)
        startDate.setDate(firstDay.getDate() - dayOfWeek + this.calendar.options.weekStartOn)

You can see this by going to the live demo page and clicking to October

可以给每个日期加点击事件吗

A.P el OGT

As far as I see, it can only be selected to show all events or one day events by setting curEventsDate parameter. However it would be more useful if incoming events could be shown by default.

By incoming events, I mean it can show the nearest 10 future events (even the number 10 can be parametric), and the title is set to "Incoming Events".

If you can add this feature, the calendar would be nicer.

Thank you, Best regards.

First, this is an excellent Vue component, thanks for all of the hard work!

I'm having a problem where the events aren't being highlighted in the calendar. Wondering if I'm somehow doing something silly with the date format (although I have tried many combinations without success). Here is a screenshot:

Not sure if this is a part of the problem but it seems weird that the date at the top is "MM/YYYY" but the format in the event is "YYYY/MM/DD". I also tried using a date format of "YYYY/M/D" (to see if #1 resurfaced), but it didn't help.

Here is the relevant code:

# Calendar.vue
<template>
  <vue-event-calendar
    :events="demoEvents"
    @month-changed="handleMonthChanged"
    @day-changed="handleDayChanged"
  >
    <template scope="props">
      <div v-for="(event, index) in props.showEvents" class="event-item">
        <!-- In here do whatever you want, make you owner event template -->
        {{event}}
      </div>
    </template>
  </vue-event-calendar>
</template>

<script>
export default {
  data () {
    return {
      claims: [],
      demoEvents: [{
        // id: 5,
        date: '2016/12/15',
        title: 'Foo',
        desc: 'longlonglong description'
      },
      {
        // id: 6,
        date: '2016/11/12',
        title: 'Bar'
      }]
    }
  },
  methods: {
    handleMonthChanged (data) {
      console.log('month-changed', data)
    },
    handleDayChanged (data) {
      console.log('month-changed', data)
    }
  }
}
</script>

Really nice plugin. But there is a problem with the date format for events.

For example:
When I put an event at the date: '2017/2/16' it does show up

But when I change to '2017/02/16' it does not.

Should I send a pr?

How could I add the calendar in Spanish?
The week starts on Monday, not Sunday

Bug, feature request, or proposal:

Possibility to add a custom classes to an .item.event based on its events

What is the use-case or motivation for changing an existing behavior?

Days with different style based on the types of events on that day.

Proposed solution

Each event can have a custom class name that will be used on the element .item.event.
If a single day have multiple events with multiple custom classes, all custom classes need to be applied on .item.event.
This will allow custom styles on event days.

<template>
  <vue-event-calendar :events="demoEvents"></vue-event-calendar>
</template>

<script>
export default {
  data () {
    return {
      demoEvents: [{
        date: '2016/12/15',
        title: 'Dinner',
        desc: 'Dinner with friends',
        classes: 'night other-custom-class no-limit-of-classes'
      },{
        date: '2016/11/12',
        title: 'Bar'
      }]
    }
  }
}
</script>

Here the errors i get :
build.min.js:685 [Vue warn]: Error when rendering component <vue-event-calendar>:
build.min.js:3074 TypeError: _vm._v is not a function