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.

# 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.

# 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

# install npm modules
npm install

# install bower components
bower install

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

// 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:

# 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:

gulp test

Usage

Example

<md-event-calendar
  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"
>
  <md-event-calendar-header class="md-center">
    <md-event-calendar-prev></md-event-calendar-prev>
    <md-event-calendar-title></md-event-calendar-title>
    <md-event-calendar-next></md-event-calendar-next>
  </md-event-calendar-header>
</md-event-calendar>

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

<md-event-calendar
  class="md-primary"
>
</md-event-calendar>

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.

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

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

Event Object

Event Object

{
  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

|

Directives

mdEventCalendar

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

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.

<md-event-calendar-header>
...
</md-event-calendar-header>

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

<md-event-calendar-next>
</md-event-calendar-next>

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

<md-event-calendar-prev>
</md-event-calendar-prev>

mdEventCalendarTitle

This title will show the appropriate title for the calendar view

<md-event-calendar-title>
</md-event-calendar-title>

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

<md-event-calendar-today>
</md-event-calendar-today>

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.