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 --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 ngMaterialangular; // without ngMaterialangular;
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
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
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;
- Event Object
- mdEventCalendar
- mdEventCalendarHeader
- mdEventCalendarNext
- mdEventCalendarPrev
- mdEventCalendarTitle
- mdEventCalendarToday
Event Object
Event Object
title: 'Event Title' start: end: 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
...
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.
...
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
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
mdEventCalendarTitle
This title will show the appropriate title for the calendar view
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
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.