Merge pull request #2 from B-3PO/create_on_click

Create on click
B-3PO · Sep 7, 2016 · b4bec1c · b4bec1c
2 parents 202dc13 + 54ba0be
commit b4bec1c
Show file tree

Hide file tree

Showing 17 changed files with 422 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,3 +5,13 @@
 *  Update theme to default to white for header background
 *  Add `md-primary` styling for header background and selected events. You can add the `md-primary` class to the `me-event-calendar` directive.
 *  Fix event sorting in month view to fit more events in a day
+
+
+<a name="0.0.6"></a>
+## 0.0.6 (2016-09-07)
+
+*  Add Today button directive
+*  Add `md-create-event-click` attribute that will trigger on month cell click. This passes a `$date` paramater
+*  Add `md-show-create-link` attribute to display a create link on cell hover
+*  Add `md-create-disabled` to disable and hide create
+*  Fix event display on last day of week
diff --git a/README.md b/README.md
@@ -112,6 +112,9 @@ gulp test
   md-events="events"
   md-event-click="eventClicked($selectedEvent)"
   md-label="title",
+  md-show-create-link="true"
+  md-create-event-click="eventCreatea($date)"
+  md-create-disabled="true"
   class="md-primary"
 >
   <md-event-calendar-header class="md-center">
@@ -159,6 +162,7 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
 * [mdEventCalendarNext](#mdEventCalendarNext)
 * [mdEventCalendarPrev](#mdEventCalendarPrev)
 * [mdEventCalendarTitle](#mdEventCalendarTitle)
+* [mdEventCalendarToday](#mdEventCalendarToday)
 
 
 
@@ -196,8 +200,12 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
 <md-event-calendar
   [ng-model=""]
   [md-events=""]
+  [md-label=""]
   [md-event-click=""]
-  [md-label=""]>
+  [md-create-event-click=""]
+  [md-show-click-link=""]
+  [md-create-disabled=""]
+>
 ...
 </md-event-calendar>
 ```
@@ -208,8 +216,11 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
 | :--: | :--: | :--: |
 | ng-model | model= | <p>Optional model to hold selected event object</p>  |
 | md-events | array | <p>Array of events</p>  |
-| md-event-click | function | <p>Function to be called on event click. You can pass in <code>$selectedEvent</code> to get the event object you clicked on</p>  |
 | md-label | string=title | <p>Property name for title display</p>  |
+| md-event-click | function | <p>Function to be called on event click. You can pass in <code>$selectedEvent</code> to get the event object you clicked on</p>  |
+| md-create-event-click | function | <p>Function to be called when empty area of day is clicked. You can pass in <code>$date</code> to get the days date you clicked on</p>  |
+| md-show-create-link | boolean | <p>Show `Create` in the top right corner when cell is hovered over</p>  |
+| md-create-disabled | boolean | <p>Hides create link and disabled create click event</p>  |
 
 
 
@@ -256,6 +267,16 @@ This title will show the appropriate title for the calendar view
 </md-event-calendar-title>
 ```
 
+## <a name="mdEventCalendarToday"></a> mdEventCalendarToday
+
+A button that can be clicked to take the month to the current month. This button is disabled if you are already on the current month
+```html
+<md-event-calendar-today>
+</md-event-calendar-today>
+```
+
+
+
 
 
 # <a name="faq"></a> FAQ

diff --git a/app/pages/home/home.controller.js b/app/pages/home/home.controller.js
@@ -6,6 +6,11 @@ angular
 function HomeController($scope, $timeout) {
 
   $scope.events = [
+    {
+      start: getDate(-6, 10),
+      end: getDate(-6, 11),
+      title: 'Event 1'
+    },
     {
       start: getDate(0, 10),
       end: getDate(1, 11),
@@ -48,6 +53,10 @@ function HomeController($scope, $timeout) {
     console.log(item);
   };
 
+  $scope.createClicked = function (date) {
+    console.log(date);
+  };
+
   function getDate(offsetDays, hour) {
     offsetDays = offsetDays || 0;
     var offset = offsetDays * 24 * 60 * 60 * 1000;
@@ -57,6 +66,7 @@ function HomeController($scope, $timeout) {
   }
 
 
+  $scope.dis = false;
   // $timeout(function () {
   //   $scope.events.push({
   //     date: new Date(new Date().getTime() + 48 * 60 * 60 * 1000),

diff --git a/app/pages/home/home.html b/app/pages/home/home.html
@@ -1,13 +1,20 @@
 <md-event-calendar
-  class="md-primary"
   ng-model="selected"
   md-events="events"
   md-event-click="eventClicked($selectedEvent)"
+  md-create-event-click="createClicked($date)"
   md-label="title"
+  md-show-create-link
+  md-create-disabled="dis"
 >
-  <md-event-calendar-header class="md-center">
+  <md-event-calendar-header>
+    <div flex></div>
     <md-event-calendar-prev></md-event-calendar-prev>
     <md-event-calendar-title></md-event-calendar-title>
     <md-event-calendar-next></md-event-calendar-next>
+    <div flex layout="row">
+      <span flex></span>
+      <md-event-calendar-today></md-event-calendar-today>
+    </div>
   </md-event-calendar-header>
 </md-event-calendar>
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-material-event-calendar",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Angular material event calander component",
   "main": [
     "dist/angular-material-event-calendar.js",

diff --git a/dist/angular-material-event-calendar.css b/dist/angular-material-event-calendar.css
@@ -5,6 +5,14 @@ md-event-calendar:not(._md) md-event-calendar-header {
   md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow svg {
     fill: #666; }
 
+md-event-calendar:not(._md) .md-button:not([disabled]) {
+  color: #333; }
+  md-event-calendar:not(._md) .md-button:not([disabled]):hover {
+    background: rgba(158, 158, 158, 0.2); }
+
+md-event-calendar:not(._md) .md-button[disabled] {
+  color: #CCC; }
+
 md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row-header {
   color: #999;
   background: #FFF;
@@ -17,6 +25,8 @@ md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row
     border-color: #DDD; }
   md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {
     border-color: #DDD; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-create-link {
+      color: #4189b8; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
       color: #999; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {
@@ -147,9 +157,25 @@ md-event-calendar md-event-calendar-month .md-event-calendar-month-row {
       bottom: 0;
       left: 0;
       right: 0; }
+      md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-create-link {
+        -ms-flex-item-align: center;
+            align-self: center;
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 500;
+        padding-right: 12px;
+        cursor: pointer;
+        opacity: 0;
+        -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
+      md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content:hover .md-event-calendar-create-link {
+        opacity: 1; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
         font-size: 13px;
-        padding: 8px; }
+        padding: 8px;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-spacer {
         margin: 4px 0 4px 0;
         height: 23px; }
@@ -180,13 +206,13 @@ md-event-calendar .md-event-calendar-cell-event {
     z-index: 1;
     position: relative; }
   md-event-calendar .md-event-calendar-cell-event.md-start-right {
-    margin: 4px 13px 4px 0;
+    margin: 4px 13px 4px 4px;
     border-radius: 2px 0 0 2px; }
   md-event-calendar .md-event-calendar-cell-event.md-end {
     margin: 4px 4px 4px 0;
     border-radius: 0 2px 2px 0; }
   md-event-calendar .md-event-calendar-cell-event.md-end-left {
-    margin: 4px 13px 4px 13px;
+    margin: 4px 4px 4px 13px;
     border-radius: 0 2px 2px 0; }
   md-event-calendar .md-event-calendar-cell-event.md-continue, md-event-calendar .md-event-calendar-cell-event.md-continue-both {
     margin: 4px 0 4px 0;
@@ -265,3 +291,6 @@ md-event-calendar .md-event-calendar-show-more-container {
     padding: 6px;
     margin-left: -11px;
     margin-top: -5px; }
+
+md-event-calendar.md-create-disabled md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-create-link {
+  display: none; }