day-calendar icon indicating copy to clipboard operation
day-calendar copied to clipboard

:calendar: Simple calendar that renders a series of events.

Day Calendar

Built with Grunt

Try out the demo :computer:

This app renders a series of events on a single day calendar. It takes an array of JavaScript Objects that contains the start and end time of the event:

[
    {start: 30, end: 120},
    {start: 300, end: 330},
    {start: 290, end: 330}
]

The numbers are minutes since 9am (so 30 is 9:30 am, 120 is 11am etc.). Only the working day from 9am to 6pm is shown.

User Interface :calendar:

screenshot

Instructions

You can interact with the calendar and pass an array of JavaScript objects on the console using the renderDay() function

renderDay([
    { 
        start: 200,
        end:   270
     }
 ]);

Installation Instructions

If you are new to GitHub, you can find a quick tutorial here.

(1) Download repository & open it
git clone https://github.com/tobiasbueschel/day-calendar.git
cd day-calendar
(2) Install node modules
sudo npm install
(3) Install bower components
bower install
(4) Running the application and making changes

The project uses the JavaScript Task Runner Grunt. The following commands will be usefull:

  • grunt dev runs the development version of the app
  • grunt prod runs the production version of the app
  • grunt inject injects bower components into index.html

Contributing

Feel free to send a pull request. If you find any bugs please report it on the issue page.

References & Technology used

License

See the MIT license.