This is a project management application, there are many projects with start date and end date.
I wish to have a schedule page which displays projects with their timeline, something like a gantt chat. Each project consumes one row of the table and the timeline(duration) is highlighted in the yearly calendar.
I am using html and agularJS. I use ng-repeat to retrieve project list which contains project name, start date and end date.
I am not sure how to do yearly calendar and display the dynamic timetable on the calendar.
There's a great project called AngularUI specifically built with the UI elements for what you're trying to do. One of them is a calendar. You can use their calendar UI element to display the projects, as you would like to do.
You say you are using ng-repeat; thus you have a list in your $scope already. You can simply transform the data so that it has the required attributes (title, start, and some other optional ones such as end date) and pass it into the calendar element, example:
$scope.events = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
You may try using dhtmlxGantt, a JavaScript Gantt chart library, with AngularJS. Here is a tutorial: http://www.dhtmlx.com/blog/?p=2200
dhtmlxGantt has a customizable time scale.
(Disclaimer: I'm a part of the DHTMLX team).