seimin
/
itsm-whlg


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!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">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="src/css/calendar.css">
    <link rel="stylesheet" href="docs/styles/main.css">
  </head>
  <body ng-app="mwl.calendar" ng-cloak>

    <a href="https://github.com/mattlewis92/angular-bootstrap-calendar" class="hidden-xs"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

    <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><a href="#demo">Demo</a></li>
          <li><a href="#event-editor">Event editor</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>
        </ul>
      </div>
    </nav>

    <div class="container-fluid">

      <div class="row" ng-controller="MainCtrl" id="demo">
        <div class="col-md-8 col-md-offset-2">
          <h2 class="text-center">{{ calendarControl.getTitle() }}</h2>

          <div class="row">

            <div class="col-md-6 text-center">
              <div class="btn-group">

                <button class="btn btn-primary" ng-click="calendarControl.prev()">Previous</button>
                <button class="btn btn-default" ng-click="setCalendarToToday()">Today</button>
                <button class="btn btn-primary" ng-click="calendarControl.next()">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="calendarView" btn-radio="'year'">Year</label>
                <label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">Month</label>
                <label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">Week</label>
                <label class="btn btn-primary" ng-model="calendarView" btn-radio="'day'">Day</label>
              </div>
            </div>

          </div>

          <br>

          <mwl-calendar

            calendar-events="events"

            calendar-view="calendarView"

            calendar-current-day="calendarDay"

            calendar-control="calendarControl"

            calendar-event-click="eventClicked($event)"

            calendar-edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"

            calendar-delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"

            calendar-edit-event-click="eventEdited($event)"

            calendar-delete-event-click="eventDeleted($event)"

            calendar-auto-open="true"

            calendar-day-view-start="06:00"

            calendar-day-view-end="22:00"

            calendar-timespan-click="dayClicked($date)"

            ></mwl-calendar>

          <br><br><br>

          <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>{{ action }}</pre></p>

              <p>Event: <pre>{{ event | json }}</pre></p>

            </div>

            <div class="modal-footer">

              <button class="btn btn-primary" ng-click="$modalInstance.close()">OK</button>

            </div>

          </script>

          <h3 id="event-editor">
            Edit events
            <button class="btn btn-primary pull-right" ng-click="events.push({title: 'New event', type: 'important'})">Add new</button>
            <div class="clearfix"></div>
          </h3>

          <table class="table table-bordered">

            <thead>
              <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Starts at</th>
                <th>Ends at</th>
                <th>Remove</th>
              </tr>
            </thead>

            <tbody>
              <tr ng-repeat="event in events">
                <td><input type="text" class="form-control" ng-model="event.title"></td>
                <td>
                  <select ng-model="event.type" class="form-control">
                    <option value="important">Important</option>
                    <option value="warning">Warning</option>
                    <option value="info">Info</option>
                    <option value="inverse">Inverse</option>
                    <option value="success">Success</option>
                    <option value="special">Special</option>
                  </select>
                </td>
                <td>
                  <p class="input-group" style="max-width: 250px">
                    <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.starts_at" is-open="event.startOpen" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="toggle($event, 'startOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                  </p>
                  <timepicker ng-model="event.starts_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                </td>
                <td>
                  <p class="input-group" style="max-width: 250px">
                    <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.ends_at" is-open="event.endOpen" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="toggle($event, 'endOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                  </p>
                  <timepicker ng-model="event.ends_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                </td>
                <td><button class="btn btn-danger" ng-click="events.splice($index, 1)">Delete</button></td>
              </tr>
            </tbody>

          </table>
        </div>
      </div>

    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="//cdn.jsdelivr.net/angular.bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
    <script src="src/app.js"></script>
    <script src="docs/scripts/controllers/main.js"></script>
    <script src="src/directives/mwlcalendar.js"></script>
    <script src="src/filters/truncateEventTitle.js"></script>
    <script src="src/services/calendarhelper.js"></script>
    <script src="src/services/moment.js"></script>
    <script src="src/directives/mwlcalendaryear.js"></script>
    <script src="src/directives/mwlcalendarmonth.js"></script>
    <script src="src/directives/mwlcalendarweek.js"></script>
    <script src="src/directives/mwlcalendarday.js"></script>
</body>
</html>