AngularJS Material Calendar
A calendar directive for AngularJS and Angular Material Design. It's lightweight at ~2.1 kB, and has a lot of configurability.
Install it via Bower
bower install --save material-calendar
Or add it to your dependencies in your
npm install --save angular-material-calendar
First off, check out the demo.
The documentation still needs to be written. It should be pretty
straight forward to figure out if you're brave by using the
example/index.html file, which shows a full-fledged instance
of the directive in action.
Long story short, though, it's much improved by using dedicated
click handlers, setting a
ngModel if desired, taking all
kinds of labels, and allowing output of HTML into the day blocks.
There's also an option to display it with each day taking up full page
width, which is great for small mobile screens and displaying content.
By default, the standard CSS and template are included in the single
that's all you should need to use. The default template is in
src/angular-material-calendar.html for reference, but you can also
load a custom template with the
template-url attribute of the
directive, which should be a url that the
$http service will fetch
The related scope looks like this:
Hacking On It
Use gulp to spin up the server and re-compile resources on the fly. The
default task does all that for you. Just make sure to Selenium is
up and running:
# In one terminalwebdriver-manager start
# In separate terminalgulp
is linted with
eslint, too, so make sure that's not complaining about code
styling or other issues.
Unit tests are thanks to Karma, so run those at the same time while developing. They'll detect code changes and run automatically in the background:
# In another terminalkarma start
Pull requests are most welcomed! The build process requires strict linting of code, so please follow the established ESLint style guide.
Also, the first round of the directive was just a proof-of-concept and test coverage is not complete, please do add tests for all new features and bug-fixes, too! Most submissions won't be merged without a test.
Also, if you could kindly add an extra test that's not related to your submission just to help us get to 100% coverage, that would be very much appreciated!
- Unit tests (the basic setup is there, need to fill them out)
- Verify the correct handling of timezones (tests?)
- Write documentation
- Spread the work
- Add to cdnjs, jsdelivr, etc.
- Automate the website update process after successful CI build