├── .gitignore
├── CNAME
├── Gruntfile.coffee
├── angular-clndr.css
├── angular-clndr.css.map
├── angular-clndr.js
├── angular-clndr.min.js
├── bower.json
├── index.html
├── package.json
├── readme.md
└── src
    ├── angular-clndr.coffee
    └── angular-clndr.sass


/.gitignore:
--------------------------------------------------------------------------------
 1 | # jetbrains
 2 | idea/
 3 | /*.iml
 4 | 
 5 | # osx
 6 | .DS_Store
 7 | .AppleDouble
 8 | .LSOverride
 9 | 
10 | # windows
11 | Thumbs.db
12 | ehthumbs.db
13 | Desktop.ini
14 | 
15 | # node
16 | logs
17 | *.log
18 | pids
19 | *.pid
20 | *.seed
21 | lib-cov
22 | coverage
23 | .grunt
24 | build/Release
25 | node_modules
26 | .lock-wscript
27 | 
28 | # sass
29 | .sass-cache
30 | 
31 | # bower
32 | bower_components/
33 | build/
34 | dist/


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | angular-clndr.10kb.nl


--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (grunt) ->
 2 |   require('load-grunt-tasks')(grunt)
 3 | 
 4 |   grunt.initConfig
 5 |     pkg: grunt.file.readJSON('package.json')
 6 | 
 7 |     connect:
 8 |       server:
 9 |         options:
10 |           keepalive: true
11 | 
12 |     coffee:
13 |       dist:
14 |         src: './src/angular-clndr.coffee'
15 |         dest: './angular-clndr.js'
16 | 
17 |     sass:
18 |       dist:
19 |         src: './src/angular-clndr.sass'
20 |         dest: './angular-clndr.css'
21 | 
22 |     ngAnnotate:
23 |       dist:
24 |         src: './angular-clndr.js'
25 |         dest: './angular-clndr.js'
26 | 
27 |     uglify:
28 |       options:
29 |         preserveComments: 'some'
30 |       dist:
31 |         src: './angular-clndr.js'
32 |         dest: './angular-clndr.min.js'
33 | 
34 |     watch:
35 |       coffee:
36 |         files: './src/angular-clndr.coffee'
37 |         tasks: ['coffee']
38 |       sass:
39 |         files: './src/angular-clndr.sass'
40 |         tasks: ['sass']
41 | 
42 |   grunt.registerTask('default', ['coffee', 'ngAnnotate', 'uglify', 'sass'])
43 |   grunt.registerTask('server', ['default', 'connect', 'watch'])


--------------------------------------------------------------------------------
/angular-clndr.css:
--------------------------------------------------------------------------------
 1 | .clndr {
 2 |   display: block;
 3 |   margin: 0 auto;
 4 |   max-width: 400px; }
 5 |   .clndr .clndr-controls {
 6 |     border-bottom: 1px solid #ccc;
 7 |     position: relative; }
 8 |     .clndr .clndr-controls .month {
 9 |       padding: 12px 0;
10 |       text-align: center; }
11 |     .clndr .clndr-controls .clndr-previous-button, .clndr .clndr-controls .clndr-next-button {
12 |       cursor: pointer;
13 |       top: 0px;
14 |       left: 0px;
15 |       padding: 12px;
16 |       position: absolute; }
17 |     .clndr .clndr-controls .clndr-next-button {
18 |       left: auto;
19 |       right: 0px; }
20 |   .clndr .clndr-grid .days-of-the-week {
21 |     width: 100%; }
22 |     .clndr .clndr-grid .days-of-the-week .header-day {
23 |       float: left;
24 |       width: 14.28571%;
25 |       padding: 12px 0;
26 |       text-align: center; }
27 |   .clndr .days .day, .clndr .days .empty {
28 |     float: left;
29 |     width: 14.28571%;
30 |     padding: 12px 0;
31 |     position: relative;
32 |     text-align: center; }
33 |     .clndr .days .day.today, .clndr .days .empty.today {
34 |       background-color: #ccc; }
35 |     .clndr .days .day .event-indicator, .clndr .days .empty .event-indicator {
36 |       background-color: #3BB7E8;
37 |       border-radius: 100%;
38 |       color: #fff;
39 |       cursor: pointer;
40 |       font-size: 9px;
41 |       height: 15px;
42 |       line-height: 16px;
43 |       position: absolute;
44 |       right: 0px;
45 |       top: 0px;
46 |       width: 15px; }
47 |     .clndr .days .day.adjacent-month, .clndr .days .day.inactive, .clndr .days .empty.adjacent-month, .clndr .days .empty.inactive {
48 |       opacity: 0.3; }
49 | 
50 | /*# sourceMappingURL=angular-clndr.css.map */
51 | 


--------------------------------------------------------------------------------
/angular-clndr.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "AAAA,MAAM;EACJ,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,KAAK;EAEhB,sBAAe;IACb,aAAa,EAAE,cAAc;IAC7B,QAAQ,EAAE,QAAQ;IAElB,6BAAM;MACJ,OAAO,EAAE,MAAM;MACf,UAAU,EAAE,MAAM;IAEpB,wFAA0C;MACxC,MAAM,EAAE,OAAO;MACf,GAAG,EAAE,GAAG;MACR,IAAI,EAAE,GAAG;MACT,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,QAAQ;IAEpB,yCAAkB;MAChB,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,GAAG;EAGZ,oCAAiB;IACf,KAAK,EAAE,IAAI;IAEX,gDAAW;MACT,KAAK,EAAE,IAAI;MACX,KAAK,EAAE,SAAS;MAChB,OAAO,EAAE,MAAM;MACf,UAAU,EAAE,MAAM;EAGtB,sCAAY;IACV,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,MAAM;IAElB,kDAAO;MACL,gBAAgB,EAAE,IAAI;IAExB,wEAAgB;MACd,gBAAgB,EAAE,OAAO;MACzB,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,OAAO;MACf,SAAS,EAAE,GAAG;MACd,MAAM,EAAE,IAAI;MACZ,WAAW,EAAE,IAAI;MACjB,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE,GAAG;MACV,GAAG,EAAE,GAAG;MACR,KAAK,EAAE,IAAI;IAEb,8HAA4B;MAC1B,OAAO,EAAE,GAAG",
4 | "sources": ["src/angular-clndr.sass"],
5 | "names": [],
6 | "file": "angular-clndr.css"
7 | }
8 | 


--------------------------------------------------------------------------------
/angular-clndr.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /*!
 3 |  * angular-clndr 0.3.0
 4 |  * 10KB, http://10kb.nl/
 5 |  * License: MIT
 6 |  */
 7 | 
 8 | (function() {
 9 |   var TienClndrDirective, module;
10 | 
11 |   module = angular.module('tien.clndr', []);
12 | 
13 |   TienClndrDirective = function() {
14 |     var controller, scope;
15 |     scope = {
16 |       clndr: '=tienClndrObject',
17 |       events: '=tienClndrEvents',
18 |       options: '=?tienClndrOptions'
19 |     };
20 |     controller = [
21 |       "$scope", "$element", "$attrs", "$transclude", function($scope, $element, $attrs, $transclude) {
22 |         return $transclude(function(clone, scope) {
23 |           var options, render;
24 |           $element.append(clone);
25 |           $scope.$watch('events', function(val) {
26 |             return $scope.clndr.setEvents(angular.copy(val || []));
27 |           });
28 |           render = function(data) {
29 |             return angular.extend(scope, data);
30 |           };
31 |           options = angular.extend($scope.options || {}, {
32 |             render: render
33 |           });
34 |           return $scope.clndr = angular.element("<div/>").clndr(options);
35 |         });
36 |       }
37 |     ];
38 |     return {
39 |       restrict: 'E',
40 |       replace: true,
41 |       transclude: true,
42 |       scope: scope,
43 |       controller: controller
44 |     };
45 |   };
46 | 
47 |   module.directive('tienClndr', TienClndrDirective);
48 | 
49 | }).call(this);
50 | 


--------------------------------------------------------------------------------
/angular-clndr.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * angular-clndr 0.3.0
3 |  * 10KB, http://10kb.nl/
4 |  * License: MIT
5 |  */
6 | (function(){var a,b;b=angular.module("tien.clndr",[]),a=function(){var a,b;return b={clndr:"=tienClndrObject",events:"=tienClndrEvents",options:"=?tienClndrOptions"},a=["$scope","$element","$attrs","$transclude",function(a,b,c,d){return d(function(c,d){var e,f;return b.append(c),a.$watch("events",function(b){return a.clndr.setEvents(angular.copy(b||[]))}),f=function(a){return angular.extend(d,a)},e=angular.extend(a.options||{},{render:f}),a.clndr=angular.element("<div/>").clndr(e)})}],{restrict:"E",replace:!0,transclude:!0,scope:b,controller:a}},b.directive("tienClndr",a)}).call(this);


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-clndr",
 3 |   "description": "Angular directive for the CLNDR.js package.",
 4 |   "author": "10KB",
 5 |   "main": ["./angular-clndr.js", "./angular-clndr.css"],
 6 |   "ignore": [
 7 |     "src",
 8 |     "Gruntfile.coffee",
 9 |     "package.json",
10 |     "CNAME"
11 |   ],
12 |   "dependencies": {
13 |     "angular": ">=1",
14 |     "clndr": ">=1.2"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>AngularJS Clndr Directive</title>
  6 |         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  7 |         <link href="angular-clndr.css" rel="stylesheet">
  8 |         <style>
  9 |             body {
 10 |                 margin-top: 1em;
 11 |             }
 12 |             p {
 13 |                 line-height: 24px;
 14 |             }
 15 |         </style>
 16 |     </head>
 17 |     <body class="container">
 18 |         <div class="row">
 19 |             <div class="col-lg-10 col-lg-offset-1 col-md-12">
 20 |                 <div class="jumbotron">
 21 |                     <h1>angular-clndr</h1>
 22 | 
 23 |                     <p>Angular directive for CLNDR.js</p>
 24 |                 </div>
 25 |                 <div class="row">
 26 |                     <div class="col-md-12">
 27 |                         <h2>Getting Started</h2>
 28 |                         <ol>
 29 |                             <li>Install with bower: <code>bower install --save angular-clndr</code></li>
 30 |                             <li>Include <code>angular-clndr.js</code>.</li>
 31 |                             <li>Make sure to include all CLNDR.js dependencies.</li>
 32 |                             <li>Add <code>tien.clndr</code> to you app modules.</li>
 33 |                             <li>Use the <code>tien-clndr</code> directive.</li>
 34 |                         </ol>
 35 | 
 36 |                         If you don't like package managers, you can also directly download
 37 |                         <a href="./angular-clndr.js">angular-clndr.js</a> or
 38 |                         <a href="./angular-clndr.min.js">angular-clndr.min.js</a>.
 39 |                     </div>
 40 |                 </div>
 41 |                 <hr>
 42 |                 <div class="row" ng-app="clndrApp">
 43 |                     <div class="col-md-12" ng-controller="DemoCtrl">
 44 |                         <h2>Demo</h2>
 45 | 
 46 |                         <tien-clndr class="clndr" tien-clndr-object="clndr" tien-clndr-events="events" tien-clndr-options="options">
 47 |                           <div class="clndr-controls">
 48 |                             <div class="clndr-previous-button" ng-click="clndr.back()">
 49 |                               &lsaquo;
 50 |                             </div>
 51 |                             <div class="month">
 52 |                               {{month}}
 53 |                             </div>
 54 |                             <div class="clndr-next-button" ng-click="clndr.forward()">
 55 |                               &rsaquo;
 56 |                             </div>
 57 |                           </div>
 58 |                           <div class="clndr-grid">
 59 |                             <div class="days-of-the-week">
 60 |                               <div class="header-day" ng-repeat="day in daysOfTheWeek track by $index">
 61 |                                 {{day}}
 62 |                               </div>
 63 |                             </div>
 64 |                             <div class="days">
 65 |                               <div class="{{day.classes}}" ng-repeat="day in days">
 66 |                                 <div class="event-indicator" ng-show="day.events.length" ng-click="showEvents(day.events)">{{day.events.length}}</div>
 67 |                                 {{day.day}}
 68 |                               </div>
 69 |                             </div>
 70 |                           </div>
 71 |                         </tien-clndr>
 72 |                     </div>
 73 |                 </div>
 74 | 
 75 |                 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 76 |                 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
 77 |                 <script src="//kylestetz.github.io/CLNDR/js/moment.js"></script>
 78 |                 <script src="//kylestetz.github.io/CLNDR/js/clndr.js"></script>
 79 |                 <script src="angular-clndr.js"></script>
 80 |                 <script>
 81 |                     app = angular.module('clndrApp', ['tien.clndr']);
 82 |                     app.controller('DemoCtrl', function ($scope) {
 83 |                         $scope.options = {
 84 |                             weekOffset: 1,
 85 |                             daysOfTheWeek: ['ZO', 'MA', 'DI', 'WO', 'DO', 'VR', 'ZA'],
 86 |                             constraints: {
 87 |                                 startDate: moment().subtract(1, 'months').format('YYYY-MM-15'),
 88 |                                 endDate: moment().add(2, 'months').format('YYYY-MM-15')
 89 |                             }
 90 |                         };
 91 |                         $scope.events = [
 92 |                             { date: moment().add(3, 'days').format(), title: "Happy days" },
 93 |                             { date: moment().subtract(5, 'days').format(), title: "Good old days" },
 94 |                             { date: moment().subtract(5, 'days').format(), title: "And some more" }
 95 |                         ];
 96 |                         $scope.showEvents = function(events) {
 97 |                             alert(events.map(function(e) { return e.title }).join("\n"));
 98 |                         };
 99 |                     });
100 |                 </script>
101 | 
102 |                 <hr>
103 |                 <div class="row">
104 |                     <div class="col-md-12">
105 |                         <h2>Usage</h2>
106 |                         <p>
107 |                             Use the <code>tien-clndr</code> directive as element, all childs of this element have
108 |                             CLNDR.js data available on the object provided with the <code>tien-clndr-object</code>
109 |                             attributes. With this object on the child's scope, you can for example ng-repeat over the
110 |                             days and render the template Angular-style.
111 |                         </p>
112 |                         <p>
113 |                             Optionally pass an <a href="https://github.com/kylestetz/CLNDR#pass-in-your-events">array of events</a>
114 |                             to the directive with the <code>tien-clndr-events</code> attribute. Events are available
115 |                             on the scope at <code>day.events</code>, as shown in the example below:
116 |                         </p>
117 |                         <p>
118 |                             To pass additional options on initialization of CLNDR, provide an options object to the
119 |                             <code>tien-clndr-options</code> attribute. See <a href="https://github.com/kylestetz/CLNDR#usage">CLNDR Usage</a>
120 |                             for all possible settings. Heads up: the <code>tien-clndr-options</code> object is only read
121 |                             once during transclusion!
122 |                         </p>
123 | <pre><code>&lt;tien-clndr class=&quot;clndr&quot; tien-clndr-object=&quot;clndr&quot; tien-clndr-events=&quot;events&quot;&gt;
124 |   &lt;div class=&quot;clndr-controls&quot;&gt;
125 |     &lt;div class=&quot;clndr-previous-button&quot; ng-click=&quot;clndr.back()&quot;&gt;
126 |       &amp;lsaquo;
127 |     &lt;/div&gt;
128 |     &lt;div class=&quot;month&quot;&gt;
129 |       {{month}}
130 |     &lt;/div&gt;
131 |     &lt;div class=&quot;clndr-next-button&quot; ng-click=&quot;clndr.forward()&quot;&gt;
132 |       &amp;rsaquo;
133 |     &lt;/div&gt;
134 |   &lt;/div&gt;
135 |   &lt;div class=&quot;clndr-grid&quot;&gt;
136 |     &lt;div class=&quot;days-of-the-week&quot;&gt;
137 |       &lt;div class=&quot;header-day&quot; ng-repeat=&quot;day in daysOfTheWeek track by $index&quot;&gt;
138 |         {{day}}
139 |       &lt;/div&gt;
140 |     &lt;/div&gt;
141 |     &lt;div class=&quot;days&quot;&gt;
142 |       &lt;div class=&quot;{{day.classes}}&quot; ng-repeat=&quot;day in days&quot;&gt;
143 |         &lt;div class=&quot;event-indicator&quot; ng-show=&quot;day.events.length&quot; ng-click=&quot;showEvents(day.events)&quot;&gt;{{day.events.length}}&lt;/div&gt;
144 |         {{day.day}}
145 |       &lt;/div&gt;
146 |     &lt;/div&gt;
147 |   &lt;/div&gt;
148 | &lt;/tien-clndr&gt;</code></pre>
149 |                     </div>
150 |                 </div>
151 |                 <hr>
152 |                 <div class="row">
153 |                     <div class="col-md-12">
154 |                         <p class="text-center">
155 |                             angular-clndr 0.3.0 &middot; Created by <a href="http://10kb.nl/">10KB</a><br>
156 |                             Based on <a href="http://kylestetz.github.io/CLNDR/">CLNDR.js</a>.
157 |                         </p>
158 |                         <p class="text-center">
159 |                             <a href="https://github.com/10KB/angular-clndr">GitHub Project</a>
160 |                         </p>
161 |                     </div>
162 |                 </div>
163 |             </div>
164 |         </div>
165 |     </body>
166 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-clndr",
 3 |   "author": "10KB",
 4 |   "repository": "https://github.com/10kb/angular-clndr.git",
 5 |   "licenses": [
 6 |     {
 7 |       "type": "MIT",
 8 |        "url": "http://10kb.mit-license.org"
 9 |     }
10 |   ],
11 |   "dependencies": {},
12 |   "devDependencies": {
13 |     "grunt": "~0.4.5",
14 |     "grunt-contrib-coffee": "^0.11.0",
15 |     "grunt-contrib-connect": "~0.8.0",
16 |     "grunt-contrib-sass": "^0.7.4",
17 |     "grunt-contrib-uglify": "^0.5.1",
18 |     "grunt-contrib-watch": "^0.6.1",
19 |     "grunt-ng-annotate": "^0.3.2",
20 |     "load-grunt-tasks": "^0.6.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | angular-clndr
 2 | =============
 3 | 
 4 | An angular directive for [CLNDR.js](https://kylestetz.github.io/CLNDR/). With this directive you can render the
 5 | CLNDR-template Angular-style.
 6 | 
 7 | Brought to you by [10KB](https://10kb.nl/).
 8 | 
 9 | ## Demo
10 | 
11 | You can find a demo on the [homepage](http://angular-clndr.10kb.nl).
12 | 
13 | ## Usage & configuration
14 | 
15 | For a complete documentation check the [homepage](http://angular-clndr.10kb.nl).
16 | 
17 | Directive usage:
18 | ```html
19 | <tien-clndr tien-clndr-object="clndr" tien-clndr-events="events">
20 |   <div class="clndr-controls">
21 |     <div class="clndr-previous-button" ng-click="clndr.back()">
22 |       &lsaquo;
23 |     </div>
24 |     <div class="month">
25 |       {{month}}
26 |     </div>
27 |     <div class="clndr-next-button" ng-click="clndr.forward()">
28 |       &rsaquo;
29 |     </div>
30 |   </div>
31 |   <div class="clndr-grid">
32 |     <div class="days-of-the-week">
33 |       <div class="header-day" ng-repeat="day in daysOfTheWeek track by $index">
34 |         {{day}}
35 |       </div>
36 |     </div>
37 |     <div class="days">
38 |       <div class="{{day.classes}}" ng-repeat="day in days">
39 |         <div class="event-indicator" ng-show="day.events.length" ng-click="showEvents(day.events)">{{day.events.length}}</div>
40 |         {{day.day}}
41 |       </div>
42 |     </div>
43 |   </div>
44 | </tien-clndr>
45 | ```
46 | 
47 | ## License
48 | 
49 | angular-clndr is released under the [MIT license](https://10kb.mit-license.org/). 
50 | 


--------------------------------------------------------------------------------
/src/angular-clndr.coffee:
--------------------------------------------------------------------------------
 1 | ###!
 2 | # angular-clndr 0.3.0
 3 | # 10KB, http://10kb.nl/
 4 | # License: MIT
 5 | ###
 6 | 
 7 | module = angular.module('tien.clndr', [])
 8 | 
 9 | TienClndrDirective = ->
10 |   scope =
11 |     clndr: '=tienClndrObject'
12 |     events: '=tienClndrEvents'
13 |     options: '=?tienClndrOptions'
14 | 
15 |   controller = ["$scope", "$element", "$attrs", "$transclude", ($scope, $element, $attrs, $transclude) ->
16 |     $transclude (clone, scope) ->
17 |       $element.append(clone)
18 | 
19 |       # watch events from tien-clndr-events attribute
20 |       $scope.$watch 'events', (val) ->
21 |         $scope.clndr.setEvents(angular.copy(val || []))
22 | 
23 |       # extend all CLNDR data to scope
24 |       render = (data) ->
25 |         angular.extend(scope, data)
26 | 
27 |       # create options object for optional CLNDR settings
28 |       options = angular.extend($scope.options || {}, render: render)
29 | 
30 |       # init CLNDR in virtual DOM-element
31 |       $scope.clndr = angular.element("<div/>").clndr(options)
32 |   ]
33 |   return {restrict: 'E', replace: true, transclude: true, scope: scope, controller: controller}
34 | 
35 | module.directive('tienClndr', TienClndrDirective)


--------------------------------------------------------------------------------
/src/angular-clndr.sass:
--------------------------------------------------------------------------------
 1 | .clndr
 2 |   display: block
 3 |   margin: 0 auto
 4 |   max-width: 400px
 5 | 
 6 |   .clndr-controls
 7 |     border-bottom: 1px solid #ccc
 8 |     position: relative
 9 | 
10 |     .month
11 |       padding: 12px 0
12 |       text-align: center
13 | 
14 |     .clndr-previous-button, .clndr-next-button
15 |       cursor: pointer
16 |       top: 0px
17 |       left: 0px
18 |       padding: 12px
19 |       position: absolute
20 | 
21 |     .clndr-next-button
22 |       left: auto
23 |       right: 0px
24 | 
25 |   .clndr-grid
26 |     .days-of-the-week
27 |       width: 100%
28 | 
29 |       .header-day
30 |         float: left
31 |         width: (100% / 7)
32 |         padding: 12px 0
33 |         text-align: center
34 | 
35 |   .days
36 |     .day, .empty
37 |       float: left
38 |       width: (100% / 7)
39 |       padding: 12px 0
40 |       position: relative
41 |       text-align: center
42 | 
43 |       &.today
44 |         background-color: #ccc
45 | 
46 |       .event-indicator
47 |         background-color: #3BB7E8
48 |         border-radius: 100%
49 |         color: #fff
50 |         cursor: pointer
51 |         font-size: 9px
52 |         height: 15px
53 |         line-height: 16px
54 |         position: absolute
55 |         right: 0px
56 |         top: 0px
57 |         width: 15px
58 | 
59 |       &.adjacent-month, &.inactive
60 |         opacity: 0.3
61 | 


--------------------------------------------------------------------------------