geoffzhu / vue-event-calendar Goto Github PK
View Code? Open in Web Editor NEWA simple events calendar for Vue2, no dependencies except Vue2.
Home Page: http://geoffzhu.cn/vue-event-calendar/
A simple events calendar for Vue2, no dependencies except Vue2.
Home Page: http://geoffzhu.cn/vue-event-calendar/
.item
without a visible day number are triggering the handleDayChanged
method/event.
.item
bellow the week nameMy 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
这个组件在android5.0的系统 有兼容性问题呀 导致引入这组件的项目页面都打不开了 android6.0以上的系统没这问题 我的环境是webpack + vue2.1.10 然后还有个问题 这个组件怎么局部引入
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>
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.
比如7号有一个event对象,在数字7的旁边显示一个tooltip(显示event.title)
已经 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
Importing the css in main.js applies this style.
h3,p{margin:0;padding:0}
I do not want this applied globally.
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,
特别的好用,我想给你100star,可惜只能给一个
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)
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!
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.
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
不使用webpack(直接script标签引入)该如何使用此插件
I do not use single file components. I would like to insert this compiled component in my project, how to do it?
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 :)
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.
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?
let today = new Date() today =
today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()} this.$EventCalendar.toDate(today)
this.$EventCalendar.toDate(today) 此处无作用, 希望在demo中体现下
<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的位置 还是写在里面的位置,这个到底应该写在哪?
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
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'
},
Thanks for your calendar, I am using this and it is quite awsome.
I need lang "ko"
please add this.
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.
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
Possibility to add a custom classes to an .item.event based on its events
Days with different style based on the types of events on that day.
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>
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.
可以给每个日期加点击事件吗
Hi, I need that you insert translation for Brazil.
Thank you!
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.
By default shows all events. How could I show my reservations today?
Is there a way to change the date format from a Europe version (DD/MM/YYYY) to a US version (MM/DD/YYYY)???
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.
在线的示例中没有报错,但是日历无法选择日期,请看一下
上一月、下一月的事件生效了,但是点击日期事件是没有生效的,也没有报错,和在线实例中效果一样,没生效点击日期事件,和动态图中的效果有差异
A.P el OGT
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
我想进入的时候默认显示当天事件,尝试操作vue-event-calendar.vue组件里的selectedDayEvents,不过还没获取数据之前处理方法就执行完了,把事件全部都显示出来了。然后尝试在vue-event-calendar.vue组件里异步success拼接数据后执行handleChangeCurDay,依然是数据没渲染就执行完了,还是把事件都显示出来了。有什么方法可以默认显示当天事件吗?
You can see this by going to the live demo page and clicking to October
How could I add the calendar in Spanish?
The week starts on Monday, not Sunday
Hi,
Is it possible to add an event that lasts several days?
If not, would it be possible to add this feature?
Thanks
<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)
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
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 ?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.