initbase/vue-daily-schedule

📅 VueJS component for scheduler

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

vue-daily-schedule's Issues

Disable specific time to day

It's very useful for me. But how can I disable a particular time slot via the day? I want to disable time slots with different color like
Monday: 11 Am to 1 Pm, ( Red )
Friday: 9 Am to 11 Am ( Yellow )

Could you tell me, can I do with this package??

Change timeArray as you can change dayTable

First of all, great work! It looks and behaves really good.

Is it possible to change the timeArray as well?

At the moment I cannot find a solution to change the time to a custom hour range without changing the internal state of your component. Maybe I just didnt found the prop or do we have to extend your Component to offer this?

Thanks a lot in advance!

Version Mismatch

Hi, I think there is an issue with current versioning.
The latest feature for timeArray doesn't seem to be in the code base at 1.0.9
49c139e

Thanks

fixing draggable function