wanderxx / vue-fullcalendar Goto Github PK
View Code? Open in Web Editor NEWvue calendar fullCalendar. no jquery required. Schedule events management
Home Page: https://wanderxx.github.io/vue-fullcalendar/
vue calendar fullCalendar. no jquery required. Schedule events management
Home Page: https://wanderxx.github.io/vue-fullcalendar/
confused
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
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.
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
Please, remove all console logs from your code, tks 😃
我希望能显示农历,或者农历,阳历切换显示
看文档好像只要设置cssClass 然后就能改变不同事件的样式了 但是我实际操作 并没有效果 有经验的指导一下
因为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,
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)
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)
am not getting callbacks for anything at all , i followed your code completely , but no callbacks
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,
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?
这两个功能是怎么实现的额?按照api添加slot实现不了额?
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>
langSets.js的中文月份少了10月
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.
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)
}
}
});
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?
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.
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)
zh-cn不行,
zh也不行
本地运行时出现了很多 undefined, 上面月份切换的左右位置,以及下面日期框里都多了个 undefined..... 版本是 1.0.8
in the fullCalendar.vue, line 7. there's a typo "calss"
[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
could you add this to Bower?
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.
"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>
npm run dev
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
使用@eventClick="onEventClick"
并不会起作用
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
The version I tested installing your component is different from the one you see in the gif below:
What I need to have available, for example, the context menu and the top left button.
Thanks for the feedback.
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!
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.
目前只可以左右点击以此进行月份切换,可以添加点击年月随机的选择年月吗
Is everything working on this branch?
路过
看了看源码
在FullCalendar.vue文件中:
emitMoreClick (day, events, jsEvent) {
this.$emit('moreClick', day, event, jsEvent)
}
this.$emit('moreClick', day, event, jsEvent)
应该为
this.$emit('moreClick', day, events, jsEvent)
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"
}
]
}
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
// for Vue2
npm install [email protected] --save
The docs are a bit sparse on this
https://github.com/Wanderxx/vue-fullcalendar#slots
ref: #10 (comment)
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.