/
vue-fa-calendar-demo.html
48 lines (36 loc) · 1.63 KB
/
vue-fa-calendar-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="vue-fa-calendar.js"></script>
<!-- choose whatever css classes you want -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.chocClass { color: chocolate }
</style>
</head>
<body>
<div id="example" >
<div class="row"> <div class="col-lg-6">
<fa-month-table month-date="03/06/2016"></fa-month-table>
</div><div class="col-lg-6">
<fa-month-table month-date="04/02/2016" tr-class="lead"></fa-month-table>
</div></div>
<div class="row"> <div class="col-lg-6">
<fa-month-table month-date="08/02/2016" :table-class="tbleClss"></fa-month-table>
</div><div class="col-lg-6">
<fa-month-table month-date="9/02/2016" :table-class="tbleClss" :special-days="spDays"></fa-month-table>
</div></div>
</div>
<script>
var v1 = new Vue({
el:'#example'
,data: {
tbleClss: 'table table-striped'
,spDays: [{ date:'04/01/2016',title:'April Fools',faIconClass:'fa fa-smile-o'},
{ date:'9/9/2016',text:'Moms BD',title:'Be sure to send present',faIconClass:'fa fa-fire-extinguisher',cellClass:'chocClass'}
]
}
});
</script>