vue daily scheduler

Vue daily scheduler is a custom Vue2 component to manage repeated schedule. It's a straightforward scheduler component you can use.

Demo

Demo here

NPMJS

Install

Node

npm install vue-daily-scheduler

# or yarn

yarn add vue-daily-scheduler

Browser

<link href="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.css" ref="stylesheet" />
<script src="https://unpkg.com/vue-daily-scheduler@latest/dist/vue-schedule.min.js"></script>

then, use inside a component

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

<template>
    <div>
        <VueSchedule v-model="schedule" />
    </div>
</template>

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

<template>
    <div>
        <VueSchedule 
            v-model="schedule" 
            bg="red"
            bgHover="gray"
            bgActive="black"
            textColor="#fff"
        />
    </div>
</template>

with timeArray

<template>
    <div>
        <VueSchedule 
            v-model="schedule" 
            :timeArray="['1AM', '3AM', '6AM', '9AM', '11AM', '3PM', '6PM', '9PM', '11PM']"
        />
    </div>
</template>

Future plans

• ☐ add disabled time props

Contribution

Feel free if you want to submit pull request or an issue.

Creators

|Name| |---| |Burhanuddin Ahmed| |Oleg Zernov|

License

MIT