angular-simple-calendar

A Simple Date-Range Calendar

After searching the web for a nice looking simple date range calendar and coming up empty I made my own.
This is meant to be easily modifiable and used as either a complete product or a boiler plate.

Small Simple Demp

A Small Demo

Dependencies

Simple Calendar requires Additional Code
Angular JS - download here
Font Awesome - download here
Bootstrap - download here (only needed for 2 classes, "form-group" and "form-control")

Included Parts

I've included the basics.

• A Basic CSS File
• A Template (can be modified)
• The Angular JS Directive

Basic Usage

First, remember to add 'simpleCalendar' to your module's dependencies array.

  angular.module('MyModule',['simpleCalendar']);

You can initialize simple calendar in all 3 angular ways.

// you can initialize by creating a simple-calendar tag
<simple-calendar></simple-calendar>

// you can initialize by adding simple-calendar as an attribute to a div
<div simple-calendar></div>

// you can initialize by adding simple-calendar as a class to a div
<div class="simple-calendar"></div>

You can also pass in a few options

// you can specify a few options
<div simple-calendar number-of-weeks="6" start-date="startDate" end-date="endDate"></div>

Option	Description
number-of-weeks	any positive integer (defaults to 6)
start-date	the $scope variable you want to write the selected start date to
end-date	the $scope variable you want to write the selected end date to