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: 3 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T01:13:38.000Z (almost 2 years ago)
• Last Synced: 2024-07-28T21:53:19.813Z (3 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