Skip to content

Sarfaraaz/angular-material-event-calendar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Angular Material calendar

Quick Links:

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

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.

About

Angular material calendar component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 77.1%
  • CSS 21.1%
  • HTML 1.8%