framework7 calendar

inline 기본

<template>
...
<div id="calendar-container" class="calendar-order"></div>
...
</template>

<script>
...
var calendarOrder = app.calendar.create({
    containerEl: '#calendar-container.calendar-order',
    renderToolbar: function() { return '' +
        '<div class="toolbar calendar-custom-toolbar no-shadow">' +
        '   <div class="toolbar-inner">' +
        '       <div class="left"><a href="#" class="link icon-only"><i class="icon material-icons">arrow_back_ios</i></a></div>' +
        '       <div class="center"></div>' +
        '       <div class="right"><a href="#" class="link icon-only"><i class="icon material-icons">arrow_forward_ios</i></a></div>' +
        '   </div>' +
        '</div>';
    },
});
...
</script>

toolbar 세팅

var calendarOrder = app.calendar.create({                    
    containerEl: '#calendar-container.calendar-order',
    renderToolbar: function() { return '' +
        '<div class="toolbar calendar-custom-toolbar no-shadow">' +
        '   <div class="toolbar-inner">' +
        '       <div class="left"><a href="#" class="link icon-only"><i class="icon material-icons">arrow_back_ios</i></a></div>' +
        '       <div class="center"></div>' +
        '       <div class="right"><a href="#" class="link icon-only"><i class="icon material-icons">arrow_forward_ios</i></a></div>' +
        '   </div>' +
        '</div>';
    },
    value: [new Date()],
    on: {
        init: function(c) {
            $$('#calendar-container.calendar-order .calendar-custom-toolbar .center').text(c.currentYear + '년 ' + (c.currentMonth+1) + '월' ); 
            $$('#calendar-container.calendar-order .calendar-custom-toolbar .left').on('click', function() {
                calendarOrder.prevMonth();
            });
            $$('#calendar-container.calendar-order .calendar-custom-toolbar .right').on('click', function() {
                calendarOrder.nextMonth();
            });
        },
        monthYearChangeStart: function(c) {                           
            $$('#calendar-container.calendar-order .calendar-custom-toolbar .center').text(c.currentYear + '년 ' + (c.currentMonth+1) + '월' ); 
        },
    },
});

calendarDayClick 이벤트

on: {
    init: function(calendar) {
        $$('#calendar-container.calendar-order .calendar-custom-toolbar .center').text(calendar.currentYear + '년 ' + (calendar.currentMonth+1) + '월' ); 
        $$('#calendar-container.calendar-order .calendar-custom-toolbar .left').on('click', function() {
            calendarOrder.prevMonth();
        });
        $$('#calendar-container.calendar-order .calendar-custom-toolbar .right').on('click', function() {
            calendarOrder.nextMonth();
        });
    },
    monthYearChangeStart: function(calendar) {                           
        $$('#calendar-container.calendar-order .calendar-custom-toolbar .center').text(calendar.currentYear + '년 ' + (calendar.currentMonth+1) + '월' ); 
    },
    calendarDayClick: function(calendar, dayEl, year, month, day) {
        console.log( year + ', ' + (month+1) + ', ' + day );
    }
},

라우터 파라미터

<script>
    return {
        data: function(){
            return {
                year: this.$route.params.year,
                month: this.$route.params.month,
                day: this.$route.params.day,
            }
        },
        methods: {},
        on: {
            pageInit: function(e, page) {
            },
        },
    }
</script>