Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/initbase/vue-daily-schedule
📅 VueJS component for scheduler
https://github.com/initbase/vue-daily-schedule
daily nuxt schedule vue week-schedule weekly
Last synced: about 2 months ago
JSON representation
📅 VueJS component for scheduler
- Host: GitHub
- URL: https://github.com/initbase/vue-daily-schedule
- Owner: initbase
- License: mit
- Created: 2020-07-19T14:07:30.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T01:13:38.000Z (over 1 year ago)
- Last Synced: 2024-07-28T21:53:19.813Z (about 2 months ago)
- Topics: daily, nuxt, schedule, vue, week-schedule, weekly
- Language: Vue
- Homepage: https://vue-daily-schedule.vercel.app/
- Size: 2.97 MB
- Stars: 23
- Watchers: 2
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- oss - Vue Scheduler - A straightforward daily scheduler component for VueJS / NuxtJS - Vue, Scheduler (Open Source Project / UI Component)
README
# vue daily scheduler
[![VEDR](./src/assets/preview.png)](.)
Vue daily scheduler is a custom Vue2 component to manage repeated schedule. It's a straightforward scheduler component you can use.
[![GitHub forks](https://img.shields.io/github/forks/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/network)
[![GitHub stars](https://img.shields.io/github/stars/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/stargazers)
[![GitHub license](https://img.shields.io/github/license/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/blob/master/LICENSE)
[![GitHub issues](https://img.shields.io/github/issues/initbase/vue-daily-schedule)](https://github.com/initbase/vue-daily-schedule/issues)### Demo
[Demo here](https://vue-daily-schedule.vercel.app/)
[NPMJS](https://www.npmjs.com/package/vue-daily-scheduler)
### Install
Node
```
npm install vue-daily-scheduler# or yarn
yarn add vue-daily-scheduler
```
Browser
```html```
then, use inside a component
```javascript
import 'vue-daily-scheduler/dist/vue-schedule.min.css'
import VueSchedule from 'vue-daily-scheduler'
export default {
components: {
VueSchedule
},
data () {
return {
schedule: {
0: [],
1: [],
2: [],
3: [],
4: [],
5: [],
6: []
}
}
}
}
```
use it inside vue template
```html
```
### Props
|Props|Desc|Type|Default|
|---|---|---|---|
|`steps`|The interval in minutes|`Number`|`60`|
|`dayTable`|Array of day names for changing order or i18n|`Array`|`['So','Mo','Tu','We','Th','Fr','Sa']`|
|`timeArray`|This props is optional. Array of time. `steps` props will be ignored if this props is filled.|`Array`|`[]`|
|`strWeek`|String for i18n support|`String`|`Week`|
|`strTime`|String for i18n support|`String`|`Time`|
|`strDay`|String for i18n support|`String`|`Day`|
|`disableWeekSelect`|Disable the whole week selection|`Boolean`|`false`|
|`disableDaySelect`|Disable the whole day selection|`Boolean`|`false`|
|`bg`|Block scheduler background color|`String`|`#223642`|
|`bgHover`|Block scheduler background color when on hover|`String`|`#84dafc7a`|
|`bgActive`|Block scheduler background color when active|`String`|`#84c9fc`|
|`textColor`|Text color inside block scheduler|`String`|`#000`|
#### Example
```html
```
### with `timeArray`
```html
```
### Future plans
- ☐ add disabled time props### Contribution
Feel free if you want to submit pull request or an issue.##### Creators
|Name|
|---|
|[Burhanuddin Ahmed](https://github.com/burhanahmeed/)|
|[Oleg Zernov](https://github.com/sawyer3273)|### License
MIT