angular-material-event-calendar

A calendar module that is based on material design concepts.
The calendar module was built to run as a standalone component, and alongside of ngMaterial. If you use this component with ngMaterial then it will use the themes you have setup and use the $$dateLocal settings to display and format the dates.

Quick Links:
* Installation
* Building
* Run Tests
* Usage
* Colors
* Documentation
* FAQ

Installation

#### Bower

Change to your project's root directory.

``bash


To install latest

bower install angular-material-event-calendar

To install latest and update bower.json

bower install angular-material-event-calendar --save
`

#### Npm

Change to your project's root directory.

`bash


To install latest

npm install angular-material-event-calendar

To install latest and update package.json

npm install angular-material-event-calendar --save
`

#### setup

install modules

`bash


install npm modules

npm install

install bower components

bower install
`

Include the material.components.eventCalendar module as a dependency in your application.

`javascript
// with ngMaterial
angular.module('myApp', ['ngMaterial', 'material.components.eventCalendar']);

// without ngMaterial
angular.module('myApp', ['material.components.eventCalendar']);
`




Building

You can easily build using gulp.

The built files will be created in the dist folder

Run the gulp tasks:

`bash


To run locally. This will kick of the watch process




navigate to localhost:8080

gulp

To build the js and css files to the /build directory


gulp build
`

Run Tests

Test using Karma
Run the gulp tasks:

`bash
gulp test
`




Usage

Example

`html
ng-model="selected"
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"
auto-height=""
class="md-primary"
>






`

Colors

With Angular Material

If you want to have the header and selected elements use the primary color for their backgrounds the just add the md-primary class
`html
class="md-primary"
>

`


Without Angular Material

If you want to change the header and selected event background colors you add this scss file after the angular-material-event-calendar.css file

Primary Color scss: Click Here




Documentation

To add eventCalendar to you angular-material project, include the material.components.eventCalendar module as a dependency in your application.

`javascript
angular.module('myApp', ['ngMaterial', 'material.components.eventCalendar']);
`


* Event Object
* mdEventCalendar
* mdEventCalendarHeader
* mdEventCalendarNext
* mdEventCalendarPrev
* mdEventCalendarTitle
* mdEventCalendarToday




$3

Event Object

`javascript
{
title: 'Event Title',
start: new Date(),
end: new Date(),
allDay: false
}
`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| title | string |

Event Tile

|
| start | date/iso |

Start date

|
| end | date/iso= |

Optional end date

|
| allDay | boolean |

If set to true, no time will be displayed on event

|

$3

mdEventCalendar

`html
[ng-model=""]
[md-events=""]
[md-label=""]
[md-event-click=""]
[md-create-event-click=""]
[md-show-click-link=""]
[md-create-disabled=""]
[auto-height=""]
>
...

`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| ng-model | model= |

Optional model to hold selected event object

|
| md-events | array |

Array of events

|
| md-label | string=title |

Property name for title display

|
| md-event-click | function |

Function to be called on event click. You can pass in $selectedEvent to get the event object you clicked on

|
| md-create-event-click | function |

Function to be called when empty area of day is clicked. You can pass in $date to get the days date you clicked on

|
| md-show-create-link | boolean |

Show Create in the top right corner when cell is hovered over

|
| md-create-disabled | boolean |

Hides create link and disabled create click event

|
| auto-height | number |

Calendar will fill to the bottom of the window. You can pass it a number(pixels) as an offset

|

mdEventCalendarHeader

The header is a container for the previous, next, and title directives. You can also add other elements to this.
`html

...

`

#### Classes

| Param | Type | Details |
| :--: | :--: | :--: |
| md-center | css |

Center content inside of header

|

mdEventCalendarNext

This is the next arrow that will advance the current view by month/week/day. You can add this the header in any order
`html


`




mdEventCalendarPrev

This is the prev arrow that will change the current view by month/week/day. You can add this the header in any order
`html


`




mdEventCalendarTitle

This title will show the appropriate title for the calendar view
`html


`

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


``

FAQ

#### Do i need to use ngMaterial?
No, but you will not get the lovely theme colors.

#### Where is my week/day views?
On their way, this component is under active development.

#### Will this support mobile?
Mobile is in the roadmap and will be released in future versions.