vue-spring-calendar - GitLite

KO | EN

gitlite — search

#anthropic #generative-ai #cross-platform #developer-tools #artificial-intelligence #automation #electron #video #github #kubernetes

vue-spring-calendar

(★ 42)

Full Calendar based on Vue.js

File Explorer

ZIP Download

- demo.html
- spring-calendar.common.js
- spring-calendar.common.js.map
- spring-calendar.umd.js
- spring-calendar.umd.js.map
- spring-calendar.umd.min.js
- spring-calendar.umd.min.js.map
- - app.abc98d8c.js
  - app.abc98d8c.js.map
  - chunk-vendors.668181e8.js
  - chunk-vendors.668181e8.js.map
- favicon.ico
- index.html
- favicon.ico
- index.html
- - colors.js
  - Day.vue
  - Days.vue
  - Fragment.js
  - Month.vue
  - SpringCalendar.vue
  - style.scss
  - useCalendar.js
  - useContext.js
  - Week.vue
  - Year.vue
- App.vue
- main.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md
vue.config.js

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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 
<template>
  <div id="app">
    <SpringCalendar year="2020" color="#41b883" :events="events" locale="en"/>
  </div>
</template>

<script>
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
  }
};
</script>

```

**`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/)