Tutorial: AngularJs Timesheet (PHP, JavaScript)

Features

• Timesheet view (time spent by one person)
• Project view (time spent on project, by people)
• Drag and drop support
• Daily summaries
• AngularJS scheduler
• Using Angular routes for navigation
• Modal dialog for event editing
• PHP backend
• Sample SQLite database

Source code of the tutorial is available for download.

Example: Basic AngularJS Timesheet Configuration

View (timesheet.html)

<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<!-- DayPilot -->
<script src="js/daypilot/daypilot-all.min.js"></script>

<!-- controller -->
<script src="people.js"></script>

<!-- HTML -->
<div ng-app="timesheet.people" ng-controller="PeopleCtrl">
  <daypilot-scheduler id="dp" config="scheduler"></daypilot-scheduler>
</div>

Controller (timesheet.js)

var app = angular.module('timesheet.people', ['daypilot']);

app.controller('PeopleCtrl', function($scope) {

    $scope.scheduler = {
        viewType: "Days",
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        days: DayPilot.Date.today().daysInMonth(),
        cellWidthSpec: "Auto"
    };
});