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
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 --saveNpm
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 --savesetup
install modules
# install npm modules
npm install
# install bower components
bower installInclude 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 buildRun Tests
Test using Karma Run the gulp tasks:
gulp testUsage
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 |
| md-create-event-click | function | Function to be called when empty area of day is clicked. You can pass in |
| md-show-create-link | boolean | Show |
| 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.
