@team-decorate/vue-weekly-calendar

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

name	default	type	required	description
calendar-picker	false	Boolean	---	カレンダー表示切り替え
styles	---	Object	---	css object

styles

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

events

name	default	description
next		nextボタンが押された時
prev		prevボタンが押された時