https://github.com/boussadjra/vue-spring-calendar
Full Calendar based on Vue.js
https://github.com/boussadjra/vue-spring-calendar
Last synced: 5 months ago
JSON representation
Full Calendar based on Vue.js
- Host: GitHub
- URL: https://github.com/boussadjra/vue-spring-calendar
- Owner: boussadjra
- Created: 2020-04-12T19:32:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-16T15:36:16.000Z (8 months ago)
- Last Synced: 2025-06-08T21:51:33.908Z (6 months ago)
- Language: JavaScript
- Size: 4.92 MB
- Stars: 43
- Watchers: 3
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-spring-calendar - It's a Vue based component which provides the functionality of a full-calendar that shows daily events. the [`demo`](https://boussadjra.github.io/vue-spring-calendar/). (Components & Libraries / UI Components)
- awesome-vue - vue-spring-calendar - Full Calendar based on Vue.js (UI Components [🔝](#readme))
- awesome-vue - vue-spring-calendar - It's a Vue based component which provides the functionality of a full-calendar that shows daily events. the [`demo`](https://boussadjra.github.io/vue-spring-calendar/). (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-spring-calendar - It's a Vue based component which provides the functionality of a full-calendar that shows daily events. the 🌎 [`demo`](boussadjra.github.io/vue-spring-calendar/). (Components & Libraries / UI Components)
README
## Vue Spring Calendar
It's a Vue based component which provides the functionality of a full-calendar that shows daily events.
## Installation
`npm install vue-spring-calendar --save`
>For React.js developer please check this [`repository`](https://github.com/boussadjra/spring-calendar)
## Usage
**`App.vue :`**
```js
import SpringCalendar from "vue-spring-calendar";
export default {
name: "App",
data: () => ({
events:[
{
title:'Event 1',
startDate:'2020-04-09 08:00',
endDate:'2020-04-09 12:00',
},
{
title:'Event 2',
startDate:'2020-04-09 09:00',
endDate:'2020-04-09 12:00',
},
{
title:'Event 3',
startDate:'2020-04-09 12:00',
endDate:'2020-04-09 16:00',
},
]
}),
components: {
SpringCalendar
}
};
```
**`main.js`**
```
import Vue from 'vue'
import App from './App.vue'
//import the new composition api in order to make it work in Vue@2.x
import VueComp from '@vue/composition-api'
Vue.config.productionTip = false
//use the vue-composition-api plugin
Vue.use(VueComp)
new Vue({
render: h => h(App),
}).$mount('#app')
```
## Demo
[Vue Spring Calendar demo](https://boussadjra.github.io/vue-spring-calendar/)
[React Spring Calendar demo](https://boussadjra.github.io/spring-calendar/)