Tutorial: AngularJs Timesheet (PHP, JavaScript)

This tutorial shows how to create a timesheet PHP web application using AngularJs. Includes PHP source code and a sample SQLite database.
Mar 15, 2016
angularjs timesheet javascript php

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

angularjs-timesheet-javascript-php-timesheet-initialization.png

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"
    };
});

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java