Skip to content

Commit 8cdfb19

Browse files
yarobadtrakyarobadtrak
committed
decouple events array from calendar vue object
decouple events array from calendar vue object update readme and package.json to reflect moving events to app root
1 parent 3219b89 commit 8cdfb19

File tree

6 files changed

+133
-56
lines changed

6 files changed

+133
-56
lines changed

‎README.md

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,74 @@ OR you can include the compiled file found in "dist/vbc.js" directly into your p
2323
</div>
2424

2525
<div id="app">
26-
<Calendar :first-day="0"></Calendar>
26+
<Calendar
27+
:first-day="1"
28+
:all-events="events"
29+
></Calendar>
2730
</div>
2831
</div>
2932
<script src="dist/vbc.js"></script>
3033
<script>
3134
var app = new Vue( {
32-
el : '#app',
33-
i18n,
34-
mounted() {
35-
let loadingIndicator = document.getElementById( "loading" );
36-
if(loadingIndicator != null){
37-
loadingIndicator.style.display = "none";
38-
}
39-
}
40-
} );
35+
el : '#app',
36+
data: {
37+
events: []
38+
},
39+
i18n,
40+
mounted() {
41+
let loadingIndicator = document.getElementById( "loading" );
42+
43+
if(loadingIndicator != null){
44+
loadingIndicator.style.display = "none";
45+
}
46+
47+
this.events = [ // you can make ajax call here
48+
{
49+
id:1,
50+
title:'Event 1',
51+
color: 'panel-danger',
52+
date: new Date()
53+
},
54+
{
55+
id:2,
56+
title:'Event blaa on same day!',
57+
color: 'panel-default',
58+
date: new Date()
59+
},
60+
{
61+
id:3,
62+
title:'Event 2',
63+
color: 'panel-primary',
64+
date: new Date(new Date().setHours(new Date().getHours() + 2*24)) // add 2 days
65+
},
66+
{
67+
id:4,
68+
title:'Event 3',
69+
color: 'panel-success',
70+
date: new Date(new Date().setHours(new Date().getHours() + 5*24)) // add 5 days
71+
},
72+
{
73+
id:5,
74+
title:'Event 4',
75+
color: 'panel-warning',
76+
date: new Date(new Date().setHours(new Date().getHours() + 14*24)) // add 2 weeks
77+
},
78+
{
79+
id:6,
80+
title:'Event 5',
81+
color: 'panel-success',
82+
date: new Date(new Date().setHours(new Date().getHours() + 30*24)) // add 1 month
83+
},
84+
85+
];
86+
}
87+
} );
4188
</script>
4289
```
4390

4491
## How to use vue-bootstrap-calendar #
45-
Simply include ```<Calendar :first-day="x"></Calendar>``` in your vue app. ``x`` is an integer for the start of the week, which can be one of the following values ``0,1,2,3,4,5,6``, where 0 for Sunday, 1 for Monday and so on...
92+
Simply include ```<Calendar :first-day="x" :all-events="events"></Calendar>``` in your vue app. ``x`` is an integer for the start of the week, which can be one of the following values ``0,1,2,3,4,5,6``, where 0 for Sunday, 1 for Monday and so on...
93+
Events array can passed on via ``all-events`` binding.
4694

4795

4896
## Copyright and License

‎dist/vbc.js

Lines changed: 7 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,64 @@ <h3><a class="pull-right" href="https://github.com/EazyServer/Vue-Bootstrap-Cale
2424
<div id="app">
2525
<Calendar
2626
:first-day="1"
27+
:all-events="events"
2728
></Calendar>
2829
</div>
2930
</div>
3031
<script src="dist/vbc.js"></script>
3132
<script>
3233
var app = new Vue( {
3334
el : '#app',
35+
data: {
36+
events: []
37+
},
3438
i18n,
3539
mounted() {
3640
let loadingIndicator = document.getElementById( "loading" );
41+
3742
if(loadingIndicator != null){
3843
loadingIndicator.style.display = "none";
3944
}
45+
46+
this.events = [ // you can make ajax call here
47+
{
48+
id:1,
49+
title:'Event 1',
50+
color: 'panel-danger',
51+
date: new Date()
52+
},
53+
{
54+
id:2,
55+
title:'Event blaa on same day!',
56+
color: 'panel-default',
57+
date: new Date()
58+
},
59+
{
60+
id:3,
61+
title:'Event 2',
62+
color: 'panel-primary',
63+
date: new Date(new Date().setHours(new Date().getHours() + 2*24)) // add 2 days
64+
},
65+
{
66+
id:4,
67+
title:'Event 3',
68+
color: 'panel-success',
69+
date: new Date(new Date().setHours(new Date().getHours() + 5*24)) // add 5 days
70+
},
71+
{
72+
id:5,
73+
title:'Event 4',
74+
color: 'panel-warning',
75+
date: new Date(new Date().setHours(new Date().getHours() + 14*24)) // add 2 weeks
76+
},
77+
{
78+
id:6,
79+
title:'Event 5',
80+
color: 'panel-success',
81+
date: new Date(new Date().setHours(new Date().getHours() + 30*24)) // add 1 month
82+
},
83+
84+
];
4085
}
4186
} );
4287
</script>

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{
22
"name": "vue-bootstrap-calendar",
33
"description": "Uses the magical power of VueJS v2 and beauty of Twitter Bootstraps to create a powerful Responsive Calendar App.",
4-
"version": "1.0.0",
4+
"version": "1.0.2",
55
"author": "yarob <eazyserver.net@gmail.com>",
66
"homepage": "https://github.com/EazyServer/Vue-Bootstrap-Calendar",
7+
"repository": {
8+
"type": "git",
9+
"url": "git://github.com/EazyServer/Vue-Bootstrap-Calendar.git"
10+
},
711
"bugs": {
812
"url" : "https://github.com/EazyServer/Vue-Bootstrap-Calendar/issues"
913
},

‎src/Calendar.vue

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
}
4848
},
4949
props: {
50-
locale: {
51-
type: String,
52-
default: 'en'
50+
allEvents: {
51+
type: Array,
52+
default: function () {
53+
return [];
54+
}
5355
},
5456
firstDay: {
5557
type: Number | String,
@@ -104,39 +106,7 @@
104106
return i18n.locale;
105107
},
106108
events: function () {
107-
return [
108-
{
109-
title:'Event 1',
110-
color: 'panel-danger',
111-
date: moment()
112-
},
113-
{
114-
title:'Event blaa on same day!',
115-
color: 'panel-default',
116-
date: moment()
117-
},
118-
{
119-
title:'Event 2',
120-
color: 'panel-primary',
121-
date: moment().add(2, 'd')
122-
},
123-
{
124-
title:'Event 3',
125-
color: 'panel-success',
126-
date: moment().add(5, 'd')
127-
},
128-
{
129-
title:'Event 4',
130-
color: 'panel-warning',
131-
date: moment().add(2, 'w')
132-
},
133-
{
134-
title:'Event 5',
135-
color: 'panel-success',
136-
date: moment().add(1, 'M')
137-
},
138-
139-
];
109+
return this.allEvents;
140110
}
141111
},
142112
methods: {

‎src/Components/EventCard.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
22
<div class="panel no-margin" :class="[event.color]" @click="showEventDetails">
3-
<div class="panel-heading event-title" :class="{'clickable-event':clickableEvent}">{{event.title}}</div>
3+
<div class="panel-heading event-title" :class="{'clickable-event':isClickableEvent}">{{event.title}}</div>
44
</div>
55
</template>
66

77
<script>
88
import {DAY_SELECTED} from '../actions';
9+
import moment from 'moment';
910
export default {
1011
data(){
1112
return {
12-
clickableEvent:false
13+
isClickableEvent:false
1314
}
1415
},
1516
props: {
@@ -18,19 +19,22 @@
1819
}
1920
},
2021
created(){
21-
let me = this;
22+
const me = this;
2223
EventsBus.$on(DAY_SELECTED, function (selectedDay) {
23-
if(me.event.date.isSame(selectedDay.dayDate, 'day')){
24-
me.clickableEvent = true;
24+
25+
let eventDate = (me.event.date instanceof moment)? me.event.date: moment(me.event.date);
26+
27+
if(eventDate.isSame(selectedDay.dayDate, 'day')){
28+
me.isClickableEvent = true;
2529
}
2630
else {
27-
me.clickableEvent = false;
31+
me.isClickableEvent = false;
2832
}
2933
})
3034
},
3135
methods: {
3236
showEventDetails() {
33-
if(this.clickableEvent){
37+
if(this.isClickableEvent){
3438
alert(this.event.title+' is selected. Will leave the implementation to you too :)');
3539
}
3640
}

0 commit comments

Comments
 (0)