Build an Angular JS (1.x) Directive

Create a day editor / planner directive for Angular js. I use momentjs for my dates and times. It must speak to a tasks API

I want a day planner I can call as follows:

<div day-planner

ng-repeat="person in people"

increment="15" (i.e., 15 minutes)

start="8am" end="5pm" (any representation, it doesn't have to be a string!)

></div>

The person json will be something like

person = {

tasks = [

{

start: 8am,

duration: 240 (i.e., minutes)

description: "Blah blah blah",

type: one of "travel", "visit", "unavailable", or others...

....

},

{

...

}

]

}

When someone clicks on a task elsewhere in my app, I want them to hover over the day planner, and it highlights the appropriate duration. When they click the cell in the day planner, it calls the tasks API with a post. If they click on a task which is already in the app, then below the current day planner row, the details are given.

I want it to look something like this (this is supposed to be a table!):

-----------------------------------------------------------------------------------------------------------------

| 8a | 8:15 | 8:30 | 8:45 | 9a | etc | | |

-----------------------------------------------------------------------------------------------------------------

Tony | G | G | G | .....

-----------------------------------------------------------------------------------------------------------------

Michael | |

Where G means green (for example), which is highlighted green because Tony has the task outlined above.

I will made any additional changes as I go. So it must be good clean code, easy to read, and all that.

It's not a difficult directive, I'm just short on time. Happy to provide any additional info.

Thanks

AngularJS Bootstrap CSS HTML5 JavaScript

Ταυτότητα Εργασίας: #10587874

Σχετικά με την εργασία