first commit

konzz · Sep 15, 2014 · 58f7b23 · 58f7b23
commit 58f7b23
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components/*
+.DS_Store
diff --git a/README.md b/README.md
diff --git a/bower.json b/bower.json
@@ -0,0 +1,13 @@
+{
+    "name": "calendar",
+    "version": "1.0.0",
+    "dependencies": {
+      "angular": "1.2.15",
+      "angular-ui-calendar": "latest",
+      "angular-ui-date": "latest",
+      "jquery": "1.9.0",
+      "firebase": "1.0.21",
+      "angularfire": "0.8.2",
+      "bootstrap": "3.0.3"
+    }
+  }
diff --git a/css/calendar.css b/css/calendar.css
@@ -0,0 +1,15 @@
+h2  {
+  margin-top: 0;
+}
+
+.ui-datepicker{
+  display: none;
+}
+
+.ui-datepicker-next {
+  float: right;
+}
+
+.ui-datepicker-today {
+  background-color: #fcf8e3;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<html ng-app="calendar">
+<head>
+  <title>Calendar</title>
+
+  <!-- JQuery -->
+  <script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
+  <script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
+
+  <!-- AngularJS -->
+  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
+
+  <!-- Firebase -->
+  <script type="text/javascript" src="bower_components/firebase/firebase.js"></script>
+  <script type="text/javascript" src="bower_components/angularfire/dist/angularfire.min.js"></script>
+
+  <!-- FullCalendar -->
+  <script type="text/javascript" src="bower_components/fullcalendar/fullcalendar.js"></script>
+  <script type="text/javascript" src="bower_components/fullcalendar/gcal.js"></script>
+  <link href="bower_components/fullcalendar/fullcalendar.css" rel="stylesheet">
+
+  <!-- AngularUI Calendar -->
+  <script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
+
+  <!-- AngularUI Datepicker -->
+  <script type="text/javascript" src="bower_components/angular-ui-date/src/date.js"></script>
+
+  <!-- Custom JavaScript -->
+  <script type="text/javascript" src="scripts/app.js"></script>
+
+  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/calendar.css" rel="stylesheet">
+</head>
+<body>
+  <div class="container">
+    <header id="header"><h1>AngularJS + Firebase Calendar</h1></header>
+
+    <div class="row" ng-controller="calendar">
+      <div class="col-sm-8">
+        <div ui-calendar ng-model="events"></div>        
+      </div>
+      <div class="col-sm-4">
+        <h2>New event</h2>
+        <form ng-submit="addEvent()">
+          <input ng-model="newEvent.title" type="text" placeholder="Title">
+          <input ui-date ui-date-format="DD, d MM, yy" ng-model="newEvent.start">
+          <input type="submit" value="Add">
+        </form>
+      </div>
+
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1,26 @@
+'use strict';
+
+angular.module('calendar', ['ui.calendar', 'ui.date', 'firebase'])
+.controller('calendar', ['$scope', '$firebase', function($scope, $firebase){
+
+  var firebaseEvents = new Firebase("https://{{FIREBASE URL}}.firebaseio.com/");
+  var events = $firebase(firebaseEvents);
+
+
+  $scope.newEvent = {
+    title: '',
+    start: ''
+  };
+
+  $scope.events = [events.$asArray()];
+
+  $scope.addEvent = function(){
+    events.$push($scope.newEvent);
+
+    $scope.newEvent = {
+      title: '',
+      start: ''
+    };
+  }
+
+}]);