1.1.1 • Published 5 years ago

@team-decorate/vue-weekly-calendar v1.1.1

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

npm-package-base

Installation

With npm:

npm install @team-decorate/vue-weekly-calendar

Usage

calendar

<WeeklyCalendar ref="calendar" @next="next" @prev="prev"></WeeklyCalendar>

<script>
    import WeeklyCalendar from '@team-decorate/vue-calendar'

    export default {

        mounted() {
            const w = this.$refs.calendar.getWeekly()
            console.log(w)
            w[0][0].active = true
        },
        
        methods: {
            next(number) {
                console.log(number)
            },
            
            prev(number) {
                console.log(number)
            }
        },
        
        components: {
            WeeklyCalendar
        },
    }

</script>

calendar picker

<WeeklyCalendar 
    calendar-picker 
    @check="check" 
    :styles="style">
</WeeklyCalendar>

<script>
    import WeeklyCalendar from '@team-decorate/vue-calendar'

    export default {

        data() {
            return {
                selected: [],
                style: {
                    '--activeColor': "blue"
                }
            }
        },

        methods: {
            check(value, selected) {
                console.log(value)
                this.selected = selected.slice()
            }
        },
        
        components: {
            WeeklyCalendar
        },
    }

</script>

props

namedefaulttyperequireddescription
calendar-pickerfalseBoolean---カレンダー表示切り替え
styles---Object---css object

styles

namedefaultdescription
--activeColor'red'checkした時のbackground-color
--activeTextColor'#fff'checkした時のcolor
--textColor'#000'default color

events

namedefaultdescription
nextnextボタンが押された時
prevprevボタンが押された時