Daily Task Management Calendar.
A simple 9-5 calendar application that allows a user to save events for each hour of the day, My website has Bootstrap components, and grid system.
On this website you will see a calendar to represent a workday: 9-5, in hour time blocks. Each block is colour coded, and shows whether it occurs in the past, present or future.
When the save button for each time-block is triggered, the text input for that event is saved in local storage. Appointments, and other important events can be added/edited through-out the day to manage time more effectively.
Upon refreshing of the page - the data initially save are all persisted on the calendar app by pulling the data from the local storage.
This app will run in the browser and feature dynamically updated HTML and CSS powered by jQuery.
The grid system rows and column has all be created dynamically without inputting htmls in the html files.
The website can be found at the following address: https://seni82.github.io/work-day-scheduler/
Main website.
I have used the following momentjs functions for time comparison :
- isBefore();
- isBetween();
- isAfter();
This functions give a more concise comparison of time state and used that to determine the time block colour displayed.
See momenjs docs for reference.
I am not pleased yet with the time comparison as I believe there are better ways of doing the time comparison. (I will look into improving this.)
No longer have any issues as issues identified with time comparison has now been fixed.
- VSCode.
- JQuery.
- Css / Html.
- BootStrap.
- JavaScript.