routes.php

<?php
    $conn = mysqli_connect('localhost', '<USER>', '<PASSWORD>', '<DB>') or die(mysql_error());
    mysqli_query($conn, "SET NAMES 'utf8'");

    $query = "select * from croto_route  ;";
    $result = mysqli_query($conn, $query) or die(mysql_error());

    $routes = array();
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        $routes[] = $row;
    }

    echo 'var routes = ' . json_encode($routes);
?>
<script type="text/javascript" src="/json/routes.php"></script>
var $$ = Dom7;
var app = new Framework7({
    root: '#app',
    theme: 'md',
    routes: routes,
    panel: {
        leftBreakpoint: 768,
        rightBreakpoint: 768,
    },
    view: {
        animate: false,  
    },
});  

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>

index.html 기본

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.5.2/css/framework7.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Roboto|Material+Icons|Noto+Sans+KR" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.5.2/js/framework7.min.js"></script>

    <title>관리자도구</title>
</head>

<body class="theme-light color-theme-blue">
    <div id="app">
        <div class="panel panel-left"><div class="view view-left view-init" data-url="/left/"></div></div>
        <div class="panel panel-right"><div class="view view-right view-init" data-url="/right/"></div></div>
        <div class="view view-main"></div>
    </div>

    <script>
        var $$ = Dom7;
        var app = new Framework7({
            root: '#app',
            theme: 'md',
            routes: [
                {
                    path: '/order/list/:year/:month/:day',
                    componentUrl: './page/order_list.html',
                }, 
                {
                    path: '/left/',
                    componentUrl: './page/panel_left.html',
                }, 
                {
                    path: '/right/',
                    componentUrl: './page/panel_right.html',
                }, 
            ],
            panel: {
                leftBreakpoint: 1,
                rightBreakpoint: 1,
            },
            view: {
                animate: false,  
            },
        });        
    </script>
</body>

</html>