Follow the Billionaire's Daily Routine with Telerik AJAX Timeline

Uncover the billionaire's (secret) daily routines with the Telerik timeline control. Learn some useful tips and tricks for the controls too.

I bet that some of you will find the subject catchy, while others worn-out.

You may also wonder, what do billionaire habits and the Telerik UI for ASP.NET AJAX new Timeline component have in common?

Don’t worry, it is just a way to share with you what I have learned from some popular books, tutorials and videos about self-motivation, time management, work-life blend and personal growth in an illustrative way using our brand new component—the Timeline for ASP.NET Web Forms.

Its amazing capabilities for visualizing dates, events and stories will help me summarize and present the wisdom gained during the past few years that may improve your life and career, or at least make you to become a bit more self-confident.

I am thrilled to kick this off, so let’s go: There will always be a first step and it is to build your own Life-changing daily habits. The question is how to do that without a plan, without a schedule, without some guidance. For the purposes of the blog post and to visualize for you some of the most popular daily routines and habits of the highly successful and, of course, richest people 😊. I created a Web Forms timeline example named Day-Plan (click here) which automatically scrolls to the most suitable routine for the current time of the day.

Here is a short animation of how it looks and behaves:

As you can see everything begins early-early in the morning when everybody else still sleeps. There is nobody else around 😊. Right, only me and it is so quiet, and I can concentrate on the important stuff for me and for the day! The time is mine!

I started to practice the early rising routine two months ago and slowly but surely, I broke the habit to go late to bed, to not sleep enough and to wake up tired. Right now, at this moment, I am feeling great (it’s 5 am) and I can work on the blog super concentrated, creative and productive! I became a morning person!

If you examine a bit more carefully the Day Plan sample, you will count more than 10-15 daily routines, but don’t get anxious, try them out and see which work for you and make your life better. Personally, I am a huge fan of two of them:

• Time Management—This skill is not about adding more and more into your schedule. It is about making smarter, more purposeful choices with the hours you have.
  
  Let me share with you some on my favorite ideas for organizing and saving time:
  • Prioritize your goals when managing your time
  • Identify when you are at your sharpest, and use this time effectively (for example in the morning)
  • Recognize what distracts you and refocus quickly
  • Take regular short breaks for a quick stretch and eye training. Use your lunch time!
  • Switch to another task to clear your mind after some amount of time (you can use a timer)
  • Self-audit—track time for each task you do and identify bottlenecks
  • Set Away status on your online communicator after worktime ends if you are still logged in (be sure to restore it in the morning)
  • Set Busy status when needing no-distractions focused time
  • Set clear deadlines and reminders for upcoming deadlines
  • Request tips, second opinions from your colleagues on tasks you work on for more than usual
  • Share and ask for feedback and general tips and tricks
  • Last but not least drink plenty of water since this will keep your brain fresh and productive
• Long walk/run in the nature—usually this is our neighbor South park (the picture in the demo is from it) or the near Vitosha Mountain. Both of them offer a lot of trees, rivers and make me happy and full of positive energy, and I am also able to achieve my 10,000 steps everyday goal effortlessly and pleasantly.

Just before jumping into the tech specifics of the sample, let’s make a quick overview of RadTimeline features. It displays a collection of events and their data in a chronological succession for each year, month or a day (as in the example). You can scroll through the events and collapse/expand them. The events order can be vertical or horizontal, and you can customize their templates, as well as respond to events and use API control the widget behavior. Other useful features are the out-of-the-box mobile and responsive behavior, flexible client-side and server-side binding mechanism, sorting of items, built-in actions and images support.

Here we go! Here is the desert explaining how the Day Plan example works:

The auto-scroll and expand event functionality is achieved by attaching the JavaScript function below to the OnDataBound client-event of RadTimeLine:

<script>                                                                              
    function onDataBound(timeline, args) {
        var events = timeline.get_dataItems();
        currentDate = new Date();
                  
        for (var i = events.length - 1; i >= 0; i--) {
            if (events[i].date < currentDate) {
                setTimeout(function () {
                    var timeEvent = timeline.get_items()[i];
                    var yOffset = -10;
                    var y = timeEvent.getBoundingClientRect().top + window.pageYOffset + yOffset;
                    //performs a smooth scrolling with a small negative top offset to the most suitable daily event for the current time 
                    window.scrollTo({ top: y, behavior: 'smooth' });
  
                    //expands the routine event for the current time
                    timeline.expand(timeline.get_items()[i]);
                }, 500);
                break;
            }
        }
    }
</script>
<telerik:RadTimeline runat="server" CollapsibleEvents="true" DateFormat="HH:mm"AlternatingMode="true" Skin="Bootstrap" Height="3000px" EventHeight="50">
    <ClientEvents OnDataBound="onDataBound" />
...

If you’d like to make the current event more shining, you can highlight it in the desired color with this line:

//style the header background
$telerik.$(timeEvent).find(".k-card-header").css("background-color", "#ebf5eb");
//apply background to the card body
$telerik.$(timeEvent).find(".k-card").css("background-color", "#ebf5eb");

The default larger padding between the vertical events is also reduced by the following CSS class override:

Here is the difference with the original padding:

<style>
.RadTimeline.k-timeline-vertical .k-timeline-event {
    padding: 0px 0px;
}
</style>

Another interesting thing to note is that the timeline usually displays events spread across one or more years. The current sample is special since it showcases the events in the scope of time for the current day. This is easily achieved via the DateFormat="HH:mm" server property of the control. Using this approach, you can display hours, months and years in it.

Of course, you can find more on RadTimeline for ASP.NET AJAX in its live demos and documentation.

Summary

As you can see, you should be fully devoted to the cause, you will need to sacrifice some of your bad habits and incorporate some new ones, but the end results will be worth it. It may be hard to wake up early and get to bed before 11 PM for many of us, but this is highly recommended since it supports the brain regeneration and boosts its activity and learning in the small hours of the morning.

Let me know in the comments what are your habits, your rules and whether they changed your life for good! Maybe there are some real billionaires among the readers so it will be amazing to get some useful tips from them too. Enjoy!

Last but not least if you like the Timeline Web Forms control used in the demo, you can download its absolutely free and fully functional trial and give it a spin.