Hackathon3: An Angular Datepicker

We conducted our 3rd SI Hackathon on Feb 19th to Feb 20th. This is one of the hackathon results.

Background

While searching for a nice datepicker for SI I figured out that there’s nothing that is really pleasing from both technical and aesthetical perspective. Either it is an jQuery wrapped thingy, or wrapped pickaday or if Angular-native, not ready for Angular 1.3. Plus, it would be really nice to have one that also reflects our special needs to pick multiple dates and multiple ranges and display it all in one place. I got Ingo onboard so we did this together.

Concept

Our first inspiration was the profile page from Github, where you get a heatmap of activity. I think most of the people understand it instantly although it displays a lot of dates (a whole year!) and is tilted by 90° compared to a more traditional calendar view:

Based on this Ingo made a mock-up:

si-datepicker-(1)

Realisation

We build a working version as an Angular directive, that’s how it looks like:

Screen Shot 2015-02-23 at 13.49.18

As sample data we took the default dates for a new objective cycle. You can instantly spot that the editing period for managers (purple) and employees (red) is parallel, that the time period (green) starts after you can set your goals and that all three end at the same date. All without actually reading the dates and comparing them yourself.

When you hover a date on the bottom with your mouse, it gets highlighted in the calendar:

hover-timeline

When you hover over a date, you get the date of month shown:

hover-date

To set a new event you simply click on it and then specify which event should happen there:

select-date

Technical Background

All drawn elements are HTML, all interaction is Angular. No SVG or canvas, no other libraries than Angular, no CSS styles from elsewhere.

Outlook

We like the outcome but it needs some polish both on the coding side, the usability and functionality. For example, you can’t paginate yet (create dates outside the visible view). Also a mode for just one date would be nice.

Gernot and others already came around with a lot of ideas so we should be able to bring this to a usable stage within some more days of work. Then, we could also Open Source it :-).