An AngularJS Calendar Directive that supports events and date-choosing

calendar.coffee

PlanApp.directive 'calendar', ($compile) ->
  restrict: 'E'
	templateUrl: "/assets/templates/calendar.html"
	scope: 
		events: "=events"
		currentEvent: "=event"
	controller: ($scope, $element, $attrs, $transclude) ->
		days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

		$scope.months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
		$scope.date = new Date()
		$scope.firstDay = new Date $scope.date.getFullYear(), $scope.date.getMonth(), 1
		$scope.lastDay = new Date $scope.date.getFullYear(), $scope.date.getMonth()+1, 0
		$scope.dragFrom = false
		$scope.dragTo = false


		### Functions ###
		$scope.getDate = (day) ->
			dayDiff = day - $scope.firstDay.getDay()
			if dayDiff <= 0 or dayDiff > $scope.lastDay.getDate()
				return ""
			else
				return dayDiff

		$scope.incrementDate = (inc) ->
			if inc > 12 #Too hard, and out of scope
				return false

			newMonth = $scope.date.getMonth() + inc
			newYear = $scope.date.getFullYear()

			if $scope.date.getMonth() + inc > 11
				newYear++
				newMonth = (($scope.date.getMonth() + inc) % 11) - 1
				console.log newYear, newMonth
			else if $scope.date.getMonth() + inc < 0
				newYear--
				newMonth = 12 + ($scope.date.getMonth() + inc)

			$scope.date = $scope.firstDay = new Date newYear, newMonth, 1
			$scope.lastDay = new Date newYear, newMonth+1, 0

		$scope.inCurrentEvent = (day) ->
			if not $scope.currentEvent?
				return false

			currentDate = new Date $scope.date.getFullYear(), $scope.date.getMonth(), day - $scope.firstDay.getDay()
			return $scope.currentEvent.start <= currentDate <= $scope.currentEvent.end

		$scope.endDrag = () ->
			$scope.dragFrom = false
			$scope.dragTo = 0

		$scope.setDragTo = (to) ->
			$scope.dragTo = to

		$scope.setDragFrom = (from) ->
			$scope.dragFrom = from

calendar.js

<div class="dir-calendar-controls">
  <div class='calendar-nav' ng-click="incrementDate(-1)">&#8592;</div>
	<div class='calendar-date'>{{months[date.getMonth()]}} {{date.getFullYear()}}</div>
	<div class='calendar-nav next' ng-click="incrementDate(1)">&#8594;</div>
	<div class="clear"></div>
</div>
<table class="dir-calendar">
	<thead>
		<tr>
			<th>Sun</th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</th>
			<th>Thu</th>
			<th>Fri</th>
			<th>Sat</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="week in [1,2,3,4,5,6]" class="week week_{{week}}">
			<td ng-repeat="dow in [1,2,3,4,5,6,7]" ng-mouseover="setDragTo((7 * (week - 1)) + dow)" ng-mousedown="setDragFrom((7 * (week - 1)) + dow)" ng-mouseup="endDrag()" ng-class="{inDrag: dragFrom && dragFrom <= ((7 * (week - 1)) + dow) && dragTo >= ((7 * (week - 1)) + dow), inEvent: inCurrentEvent((7 * (week - 1)) + dow), isDay: getDate((7 * (week - 1)) + dow) != ''}"><span class="date">{{getDate((7 * (week - 1)) + dow)}}</span></td>
		</tr>
	</tbody>
</table>

Would love to see a working version of this :)