seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
							<!doctype html>
<html lang="en" ng-app="materialExample">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Alertify.js is a lightweight brower alert and dialog plugin.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular Material Calendar</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:light&lang=en" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.light_green-lime.min.css" />
    <link rel="stylesheet" href="/css/angular-material-min.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <div class="layout-transparent mdl-layout mdl-js-layout">
        <header class="mdl-layout__header mdl-layout__header--transparent">
            <div class="mdl-layout__header-row">
                <span class="mdl-layout-title ">Angular Material Calendar</span>
                <div class="mdl-layout-spacer"></div>
                <nav class="mdl-navigation">
                    <a class="mdl-navigation__link" href="#getting-started">Getting Started</a>
                    <a class="mdl-navigation__link" href="https://github.com/bradberger/angular-material-calendar">View on GitHub</a>
                </nav>
            </div>
        </header>
      <div class="mdl-layout__drawer">
          <span class="mdl-layout-title">Angular Material Calendar</span>
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="#getting-started">Getting Started</a>
            <a class="mdl-navigation__link" href="https://github.com/bradberger/angular-material-calendar">View on GitHub</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="container text-center">
                <h1 class="text--bold-shadow mdl-typography--display-4">Angular Material Calendar <small>v0.2.12</small></h1>
                <h3 class="text--bold-shadow mdl-typography--display-2">Flexible calendar directive for the Angular Material framework</h3>
                <a href="https://github.com/bradberger/angular-material-calendar/archive/master.zip" class="mdl-button mdl-button--large mdl-button--accent mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    <i class="material-icons md-24">file_download</i>
                    Download Now
                </a>
            </div>
            <div class="page-content">
                <div class="container">
                    <h2 class="mdl-typeography--display-3" id="getting-started">Getting Started</h2>
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
                            <h4 class="mdl-typeograph--headline">Notes</h4>
                            <p>
                                This is still very much a work in progress, so expect to get
                                your hands dirty and file issues. Nonetheless, it's being
                                prepped for use in production and should get the job done.
                            </p>
                        </div>
                        <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
                            <h4 class="mdl-typeograph--headline">Via RawGit</h4>
                            <pre>&lt;script src="https://cdn.rawgit.com/bradberger/angular-material-calendar/master/dist/angular-material-calendar.js"&gt;&lt;script&gt;</pre>

                            <h4 class="mdl-typeograph--headline">Via Bower</h4>
                            <pre>bower install --save material-calendar</pre>

                            <h4 class="mdl-typeograph--headline">Via NPM</h4>
                            <pre>npm install --save angular-material-calendar</pre>
                        </div>
                    </div>
                </div>
                <div class="container" ng-controller="calendarCtrl">
                    <h2 class="mdl-typeography--display-3" id="usage">Usage</h2>
                    <h3 class="mdl-typeography--display-1" id="demo">Demo</h3>
                    <p>
                        There's also a <a href="/fullscreen.html">fullscreen enabled demo here</a>.
                        It's designed to fill up the horizontal and vertical space of
                        the parent element, so fullscreen is easy to do.
                    </p>
                    <p>
                        Or, if you prefer, go fullscreen with the demo calendar below
                        by <a href="#" ng-click="fullscreen()">clicking here</a>.
                    </p>
                    <div style="height: 800px;">
                        <calendar-md id="calendar-demo"
                        flex layout layout-fill
                        calendar-direction="direction"
                        on-prev-month="prevMonth"
                        on-next-month="nextMonth"
                        on-day-click="dayClick"
                        title-format="'MMMM y'"
                        ng-model='selectedDate'
                        day-format="dayFormat"
                        day-label-format="'EEE'"
                        day-label-tooltip-format="'EEEE'"
                        day-tooltip-format="'fullDate'"
                        week-starts-on="weekStartsOn"
                        tooltips="true"
                        day-content="setDayContent"
                        disable-future-selection="disableFutureDates"></calendar-md>
                    </div>

                    <p>{{ msg || "Click on a date/button to get started"}}</p>
                    <pre>$scope.selectedDate = {{ selectedDate | json }}</pre>

                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop left-col">
                            <section>
                                <h5 class="mdl-typeography--headline">With All Options</h5>
                                <p>
                                    While I'm working on the documentation, feel free to check
                                    out the example of it in action here.
                                </p>
                                <p>
                                    If you're brave, you  might be able to poke around the
                                    example and figure things out! Better yet, why not help
                                    contribute to the documentation?
                                </p>
                            </section>
                            <section>
                                <h5 class="mdl-typeography--headline">First Day Of Week</h5>
                                <p>
                                    You can easily change the first day of the week.
                                </p>
                                <md-input-container>
                                    <label>First day of week</label>
                                    <md-select ng-model="weekStartsOn" ng-change="">
                                        <md-option value="0">Sunday</md-option>
                                        <md-option value="1">Monday</md-option>
                                        <md-option value="2">Tuesday</md-option>
                                        <md-option value="3">Wednesday</md-option>
                                        <md-option value="4">Thursday</md-option>
                                        <md-option value="5">Friday</md-option>
                                        <md-option value="6">Saturday</md-option>
                                    </md-select>
                                </md-input-container>
                            </section>
                            <section>
                                <h5>Updating calendar data using the MaterialCalendarData service</h5>
                                <p>
                                    To support scenarios where you wish to update the content of a
                                    given day without re-loading the containing scope a MaterialCalendarData
                                    service has been added. Just inject MaterialCalendarData and use the
                                    <code>setDayContent(date,content)</code> function
                                </p>
                                <p>
                                    <md-button ng-click="setContentViaService()">Make today a happy day</md-button>
                                </p>
                            </section>
                        </div>
                        <div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop right-col">
                            <section>
                                <h5 class="mdl-typeography--headline">Calendar Layout</h5>
                                <p>You can also change the calendar layout dynamically.</p>
                                <md-button ng-click="setDirection('vertical')">Agenda</md-button>
                                <md-button ng-click="setDirection('horizontal')">Calendar</md-button>
                            </section>

                            <section>
                                <h5 class="mdl-typeography--headline">Selecting Dates</h5>
                                <p>
                                    You can select multiple dates. Just make sure your ng-model
                                    value is initialized as an array. This demo also demonstrates
                                    that if the ngModel is changed from outside the directive,
                                    the directive will detect that change. That means you can
                                    select dates programatically.
                                </p>
                                <p>
                                    <md-button ng-click="selectedDate = [];">Multiple dates</md-button>
                                    <md-button ng-click="selectedDate = false;">Single date</md-button>
                                </p>
                            </section>

                            <section>
                                <h5 class="mdl-typeography--headline">Tooltips</h5>
                                <p>
                                    Since 0.2.9 tooltips are off by default, but can easily be enabled.
                                    See the example below.
                                </p>
                            </section>

                            <section>
                                <h5 class="mdl-typeography--headline">Disable future selection</h5>
                                <p>
                                    If you don&apos;t want users selecting dates in the future then
                                    set the disable-future-selection attribute on the directive to true


                                    <md-button ng-click="disableFutureDates = !disableFutureDates;">Toggle future selection</md-button>
                                </p>
                            </section>
                        </div>
                    </div>
                    <div class="mdl-grid">
                        <div class="mdl-cell md-cell--12-col mdl-cell--12-col-desktop">
                            <pre>
&lt;calendar-md flex layout layout-fill
  calendar-direction="direction"
  on-prev-month="prevMonth"
  on-next-month="nextMonth"
  on-day-click="dayClick"
  title-format="'MMMM y'"
  ng-model='selectedDate'
  week-starts-on="firstDayOfWeek"
  &lt;--Set the initial month here. "8" is September. Defaults to current--&gt;
  data-start-month="8"
  &lt;--Set the initial year here. Defaults to current.--&gt;
  data-start-year="2014"
  tooltips="tooltips"
  day-format="dayFormat"
  day-label-format="'EEE'"
  day-label-tooltip-format="'EEEE'"
  day-tooltip-format="'fullDate'"
  day-content="setDayContent"
  disable-future-selection="false"
  &lt;-- Allows dates in the future to be disabled and unselectable. Defaults to false--&gt; &gt;&lt;/calendar-md&gt;

&lt;script&gt;
angular.module("materialExample", ["ngMaterial", "materialCalendar"]);

angular.module("materialExample").controller("calendarCtrl", function($scope, $filter, $http, $q) {

    $scope.dayFormat = "d";

    // To select a single date, make sure the ngModel is not an array.
    $scope.selectedDate = null;

    // If you want multi-date select, initialize it as an array.
    $scope.selectedDate = [];

    $scope.firstDayOfWeek = 0; // First day of the week, 0 for Sunday, 1 for Monday, etc.
    $scope.setDirection = function(direction) {
      $scope.direction = direction;
      $scope.dayFormat = direction === "vertical" ? "EEEE, MMMM d" : "d";
    };

    $scope.dayClick = function(date) {
      $scope.msg = "You clicked " + $filter("date")(date, "MMM d, y h:mm:ss a Z");
    };

    $scope.prevMonth = function(data) {
      $scope.msg = "You clicked (prev) month " + data.month + ", " + data.year;
    };

    $scope.nextMonth = function(data) {
      $scope.msg = "You clicked (next) month " + data.month + ", " + data.year;
    };

    $scope.tooltips = true;
    $scope.setDayContent = function(date) {

        // You would inject any HTML you wanted for
        // that particular date here.
        return "&lt;p&gt;&lt;/p&gt;";

        // You could also use an $http function directly.
        return $http.get("/some/external/api");

        // You could also use a promise.
        var deferred = $q.defer();
        $timeout(function() {
            deferred.resolve("&lt;p&gt;&lt;/p&gt;");
        }, 1000);
        return deferred.promise;

    };

});
&lt;/script&gt:
</pre>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="container">
                <p>Angular Material Calendar is released under the <a href="http://opensource.org/licenses/MIT">MPLv2 license</a>. &copy; 2015 <a href="https://bradb.net">Brad Berger</a> and contributors.
            </div>
        </footer>
    </main>
</div>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<script src="/js/angular.min.js"></script>
<script src="/js/angular-animate.min.js"></script>
<script src="/js/angular-aria.min.js"></script>
<script src="/js/angular-sanitize.min.js"></script>
<script src="/js/angular-material.min.js"></script>
<script src="/js/angular-material-calendar.js"></script>
<script src="/js/demo.js"></script>
</body>
</html>