angular-material-event-calendar

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>

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.