What is the need?
At some point of my UI Development, I had to make some modification on the existing kendoUI Calendar to meet the requirements of building mobile apps on ionic/cordova using Angularjs. The initial white board design of what we were looking for looked like the following
How I designed it?
So, I took the default KendoUI calendar by going into their official websites. I looked at the API documentation on various activities I could perform or do. For my project , these APIs provided with sufficient amount of codes to meet my requirements. However, the challenging part was to design the UI Elements without changing the original capability of the KENDO Calendar. A lot of CSS needed to be changed , a lot a classes on the DOM needed to removed or modified css needed to be generated.
As a firm believer of a minimal design patterns, I could not stand the colors and background on the calendar provided by telerik. Therefore,I removed all of these extra coloring to make it loo like the following
As according to the initial capabilities , I needed to provide users with some type of color schemes s that their senses would be able to understand the purpose of the actual calendar. In addition, I had a footer area of the calendar to work with that anyway. So, I made changes in the footer area to add four spans tags in representation to these colors that are identified as different states of the time-tracking process areas.
Adding more to the dates- these dynamic css classes and span tags
Understanding what's being done and to be able to do what needs to be done are different things.There were some challenging part trying to analysis how would these dynamic text values fit into the screen according to the let and right or on load events. Insertion of these span tags and their associative css classes needs to be predefined to meet the users need.
I could have done more to make it prettier but I had no more time. I still feel like less margin between the date and these hours(For time-tracking) should have been less. But, what is the use of telling that now when I did't do it at that moment.
Some of the things I have realized and been keeping my eyes on are following: