123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <!doctype html>
- <html class="no-js">
- <head>
- <meta charset="utf-8">
- <title>Angular bootstrap calendar demo</title>
- <meta name="description" content="Angular bootstrap calendar demo">
- <meta name="viewport" content="width=device-width">
- <style type="text/css">
- [ng-cloak] {
- display: none;
- }
- </style>
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
- <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css" rel="stylesheet">
- <link href="docs/docs.css" rel="stylesheet">
- </head>
- <body ng-app="mwl.calendar.docs" ng-controller="ExamplesCtrl as vm" ng-cloak>
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
- <div class="container-fluid">
- <div class="navbar-header">
- <a class="navbar-brand" href="#">Angular Bootstrap Calendar</a>
- </div>
- <ul class="nav navbar-nav hidden-xs">
- <li class="active"><a href="/">Examples</a></li>
- <li><a href="https://github.com/mattlewis92/angular-bootstrap-calendar#installation">Installation</a></li>
- <li><a href="https://github.com/mattlewis92/angular-bootstrap-calendar#documentation">Documentation</a></li>
- <li><a href="https://github.com/mattlewis92/angular-bootstrap-calendar">Project on GitHub</a></li>
- </ul>
- </div>
- </nav>
- <div class="container-fluid content">
- <div class="row">
- <div class="col-md-3">
- <div class="panel panel-default">
- <div class="panel-heading">
- Examples
- </div>
- <div class="panel-body sidebar-nav">
- <ul class="list-unstyled">
- <li ng-repeat="demo in vm.examples track by $index">
- <a
- href="javascript:;"
- ng-click="vm.loadExample(demo)"
- ng-class="{active: vm.activeExample.key === demo.key}">
- {{ demo.label }}
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="col-md-9">
- <h3>{{ vm.activeExample.label }}</h3>
- <div>
- <button
- class="btn btn-info pull-right"
- ng-click="vm.editActiveExample()">
- <i class="glyphicon glyphicon-edit"></i> Edit in Plunker
- </button>
- <uib-tabset>
- <uib-tab heading="Demo" active="vm.showDemoTab">
- <div id="demoContainer"></div>
- </uib-tab>
- <uib-tab heading="JavaScript">
- <div hljs hljs-source="vm.activeExample.javascript" hljs-language="javascript"></div>
- </uib-tab>
- <uib-tab heading="Markup">
- <div hljs hljs-source="vm.activeExample.markup" hljs-language="html"></div>
- </uib-tab>
- </uib-tabset>
- </div>
- </div>
- </div>
- </div>
- <script type="text/ng-template" id="modalContent.html">
- <div class="modal-header">
- <h3 class="modal-title">Event action occurred!</h3>
- </div>
- <div class="modal-body">
- <p>Action:
- <pre>{{ vm.action }}</pre>
- </p>
- <p>Event:
- <pre>{{ vm.event | json }}</pre>
- </p>
- </div>
- <div class="modal-footer">
- <button class="btn btn-primary" ng-click="$close()">OK</button>
- </div>
- </script>
- <script type="text/ng-template" id="calendarControls.html">
- <br>
- <div class="row">
- <div class="col-md-6 text-center">
- <div class="btn-group">
- <button
- class="btn btn-primary"
- mwl-date-modifier
- date="vm.viewDate"
- decrement="vm.calendarView">
- Previous
- </button>
- <button
- class="btn btn-default"
- mwl-date-modifier
- date="vm.viewDate"
- set-to-today>
- Today
- </button>
- <button
- class="btn btn-primary"
- mwl-date-modifier
- date="vm.viewDate"
- increment="vm.calendarView">
- Next
- </button>
- </div>
- </div>
- <br class="visible-xs visible-sm">
- <div class="col-md-6 text-center">
- <div class="btn-group">
- <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
- <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
- <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
- <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
- </div>
- </div>
- </div>
- <br>
- </script>
- <script src="angular-bootstrap-calendar.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-touch.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
- <script src="//cdn.rawgit.com/ocombe/ocLazyLoad/master/dist/ocLazyLoad.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
- <script src="//cdn.rawgit.com/pc035860/angular-highlightjs/master/build/angular-highlightjs.min.js"></script>
- <script src="docs/docs.js"></script>
- <script src="docs/examples/helpers.js"></script>
- </body>
- </html>
|