This is a migrated thread and some comments may be shown as answers.

RadScheduler horizontal time line

22 Answers 283 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Stepan
Top achievements
Rank 1
Stepan asked on 29 Mar 2011, 09:49 AM
Colleagues,

Who knows if it is possible to add to the RadScheduler for ASP.NET a horizontal line crossing the whole scheduler which would mark the actual time?

The idea is to move this line from top to bottom, as time passes, helping the user to notice which of the appointments are out of date or in progress. This might be very useful for all kinds of planner application where a busy manager must keep an eye on lots of appointments and re-schedule those which are not being started/finished on time. 

We have similar functionality in the Outlook’s calendar, for example.

Please, see the screen-shot that I attached. There a red line crosses the whole scheduler, expressing the current time (9:33).

Regards,

- Stepan.

22 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 29 Mar 2011, 12:09 PM
Hello Stepan,

You can easily achieve this by handling TimeSlotCreated:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       if ((e.TimeSlot.End < DateTime.Now.AddMinutes(30)) && (e.TimeSlot.End > DateTime.Now))
       {
           e.TimeSlot.CssClass = "NowCss";
       }
   }

<style type="text/css">
      .NowCss
      {
          border-bottom: 1px solid red !important;
      }
  </style>


Kind regards,
Peter
the Telerik team
0
Stepan
Top achievements
Rank 1
answered on 29 Mar 2011, 12:51 PM
Peter, thank you very much for your advice! This seems to be a good work-around for my issue.

But still one difference with the Outlook's UI remains: the red line does not cross the appointment rectangles... What do you think, can it also be achieved?

Thanks,

- Stepan.

0
Peter
Telerik team
answered on 29 Mar 2011, 03:00 PM

I am not sure how this can be achieved. If I can think of something, I will follow up and let you know. If you manage to find a solution, please share it with us.

Cheers, Peter
the Telerik team
0
Chris
Top achievements
Rank 2
answered on 24 Jun 2011, 10:50 AM
Peter,
 this is a great initial workaround, but like the OP I would love to have something appear over the appointments, but also I would like to extend the line so that it appears in the time label area. Any ideas how I could do that ?


Also I had to modify the code to work with week view otherwise it just underlined the current day. Please see below for the code to work with week view. I used TimeOfDay to make it date indipendant and in my case a 10 minute span.

protected void rsTimetable_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        if ((e.TimeSlot.End.TimeOfDay < DateTime.Now.TimeOfDay.Add(new TimeSpan(0,10,0) ))
                && (e.TimeSlot.End.TimeOfDay > DateTime.Now.TimeOfDay))
        {
            e.TimeSlot.CssClass = "NowCss";
        }
    }


Thanks

Chris
0
Peter
Telerik team
answered on 29 Jun 2011, 08:52 AM
Hi Chris,

Unless we implement this requirement as a built-in feature, it would require some really creative workaround to be realized. Of course, it is always possible that some one embarrasses me with a neat and simple solution in the forum, but the only possible way to go that I can think right now is to use jQuery with complex logic and computations.

Regards, Peter
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Renato
Top achievements
Rank 1
answered on 13 Apr 2012, 08:21 PM
I try getting this . Is it possible ? 
I thinking change style at appointment but i dont know if is correct
0
Plamen
Telerik team
answered on 18 Apr 2012, 03:56 PM
Hello Renato,

 
You can use the following code in the AppointmentDateBound event in order to achieve similar functionality: 

protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
   {
       if (e.Appointment.Subject=="Test")
       {
           e.Appointment.Start = DateTime.Now;
           e.Appointment.End = DateTime.Now.AddMinutes(1);
           e.Appointment.AllowDelete = false;
           e.Appointment.AllowEdit = false;
           e.Appointment.BackColor = System.Drawing.Color.Red;
           e.Appointment.BorderColor = System.Drawing.Color.Red;
       }
   }

Then you can can add an appointment with a specific subject (in this case it is "Test" ) and set the EnableExactTimeRendering="true" property of RadScheduler. Here you can see a video about the issue.

Hope this will be helpful.

Greetings,
Plamen Zdravkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Christian
Top achievements
Rank 1
answered on 18 Apr 2012, 05:45 PM
thanks for the help, but it is possible to cross over between appointments? 
0
Plamen
Telerik team
answered on 19 Apr 2012, 07:59 AM
Hi Christian,

 
This is a current limitation of the described scenario and we haven't found a solution for it so far. If you have a any ideas how we can implement any improvement please feel free to share it with us.

Kind regards,
Plamen Zdravkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Christian
Top achievements
Rank 1
answered on 19 Apr 2012, 04:32 PM

Hi, I found a way to do this.
in radscheduler load:

--

 RadScheduler1.TimelineView.SlotDuration = 

TimeSpan.Parse("00:15:00");  

RadScheduler1.TimelineView.TimeLabelSpan = 4;

RadScheduler1.TimelineView.NumberOfSlots = 96;

--

 

 

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)

 { 

if ((e.TimeSlot.End < DateTime.Now.AddMinutes(15)) && (e.TimeSlot.End > DateTime.Now))

 { 

int minuteNow =DateTime.Now.Minute;

 int position = minuteNow-((minuteNow * 4/60)*15);

 switch (position)

 {

 case 0:

 e.TimeSlot.CssClass =

 "MiCss0";return;

 case 1:

 e.TimeSlot.CssClass =

 "MiCss1"; return;

 case 2:

 e.TimeSlot.CssClass =

 "MiCss2"; return;

 case 3:

 e.TimeSlot.CssClass =

 "MiCss3"; return;

 case 4:

 e.TimeSlot.CssClass =

 "MiCss4"; return;

 case 5:

 e.TimeSlot.CssClass =

 "MiCss5"; return;

 case 6:

 e.TimeSlot.CssClass =

 "MiCss6"; return;

 case 7:

 e.TimeSlot.CssClass =

 "MiCss7"; return;

 case 8:

 e.TimeSlot.CssClass =

 "MiCss8"; return;

 case 9:

 e.TimeSlot.CssClass =

 "MiCss9"; return;

 case 10:

 e.TimeSlot.CssClass =

 "MiCss10"; return;

 case 11:

 e.TimeSlot.CssClass =

 "MiCss11"; return;

 case 12:

 e.TimeSlot.CssClass =

 "MiCss12"; return;

 case 13:

 e.TimeSlot.CssClass =

 "MiCss13"; return;

 case 14:

 e.TimeSlot.CssClass =

 "MiCss14"; return;

 default: return;

 }

 }

---
in the stylesheet

 

.MiCss0

 {

 

 

background-image: url('../Administrador/Imagenes/horas/0.png');

 }

 .MiCss1

{

 

background-image: url('../Administrador/Imagenes/horas/1.png');

 }

 .MiCss2

{

 

background-image: url('../Administrador/Imagenes/horas/2.png');

}

 .MiCss3

{

background-image: url('../Administrador/Imagenes/horas/3.png');

}

 .MiCss4

{

 

background-image: url('../Administrador/Imagenes/horas/4.png');

}

 

... continue
See the result in the attached image

0
Plamen
Telerik team
answered on 23 Apr 2012, 03:24 PM
Hello Christian,

 
Thank you for your concern with RadControls and for sharing your workaround with the community.

All the best,
Plamen Zdravkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jeremy
Top achievements
Rank 1
answered on 10 Oct 2012, 01:51 PM
Hi Peter

I have webservice binding in my project and have default view as week view and am using the following code for horizontal current time line. its working perfectly in week view when we navigate to day view there is no current time line in it.

Any suggestions on this?

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        
if ((e.TimeSlot.End.TimeOfDay < DateTime.Now.TimeOfDay.Add(new TimeSpan(0, 30, 0)))
                && (e.TimeSlot.End.TimeOfDay > DateTime.Now.TimeOfDay))
            {
                e.TimeSlot.CssClass = "lineclass";
                
            }
    }

Thanks
0
Plamen
Telerik team
answered on 11 Oct 2012, 09:46 AM
Hello Gabi,

 
This behavior is observed because TimeSlotCreated is thrown only one time when RadScheduler is loaded from Web Service. If you want to change the styles of the slots you have to use the OnClientNavigationComplete event as it is shown in this forum thread.
 
Hope this will be helpful.

All the best,
Plamen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jeremy
Top achievements
Rank 1
answered on 11 Oct 2012, 02:25 PM
Hi Plamen,

Thanks for reply.

I used the code provided on the link that you referred. In weekview its working perfectly but when we navigate to dayview for the first time time line dose not shows up but when you again click on dayview or navigate back to it, then current time line appears.
I have written the following piece of code both on clientnavigationcomplete and pageload but in day view for the first click it dose not appears.

var scheduler = $find('<%=RadScheduler1.ClientID %>');  
                var schedulerElement = scheduler.get_element();


                var param1 = new Date();
                var param3 = new Date();
                param3.setMinutes(param1.getMinutes() + 30);

                $telerik.$(".rsTopWrap .rsContentTable td", schedulerElement).each(function () {
                    var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
                    var paramd = new Date(slot.get_endTime());


                    if (paramd > param1 && paramd < param3) {
                        slot.get_domElement().className = "lineclass";
                    }
                });  
Thanks
0
Plamen
Telerik team
answered on 16 Oct 2012, 12:50 PM
Hi Gabi,

 
Here is the code that should work correctly by using the OnClientDataBound:

function OnClientDataBound(scheduler) {
           $ = $telerik.$;
           
           var param1 = new Date();
                var param3 = new Date();
                param3.setMinutes(param1.getMinutes() + 30);
           var cell = $('.rsContentTable').find('td');
           cell.each(function myfunction(index, item) {
           var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
             var paramd = new Date(slot.get_endTime());
               if (paramd > param1 && paramd < param3) {
                   $(this).addClass("lineclass");
               }
               else {
                   $(this).removeClass("lineclass");
               }
           });
  
       }

Hope this will be helpful.

Kind regards,
Plamen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Vince
Top achievements
Rank 1
answered on 29 Jan 2013, 09:41 PM
While the answer I was looking for is in fact in this thread, it took me a long time to piece it together. For the benefit of others in the future, here is my fully functioning code to display a horizontal time line when using web service (client side) binding:

<style type="text/css">
    .RsNowLine {
        border-bottom3px solid red !important;
    }
</style>

<telerik:RadScheduler ID="RadScheduler1" runat="server"
        OnClientDataBound="ShowCurrentTimeLine">
...
</telerik:RadScheduler>

function ShowCurrentTimeLine(radScheduler) {
    var $ = $telerik.$;
    var currentTime = GetTimeString(new Date()); // "new Date()" gives you the current time. Or use new Date("Your date string here, example: Tue Jan 29 2013 13:12:53")
  
    // Loop through each td element in the RadScheduler's table
    $("table.rsContentTable td", radScheduler.get_element()).each(function (i) {
        var currentTimeSlot = radScheduler.get_activeModel().getTimeSlotFromDomElement($(this).get(0));
        var currentTimeSlotStartTime = GetTimeString(currentTimeSlot.get_startTime());
        var currentTimeSlotEndTime = GetTimeString(currentTimeSlot.get_endTime());
          
        // Remove the RsNowLine CSS class if it exists. If you don't do this then when the data is refreshed (without refreshing the page)
        // and the currentTime is now in a new timeslot, you will get a second red time line in that new timeslot.
        $(this).removeClass("RsNowLine");
  
        // If the current time is betwen the current timeslot's begin and end time then add the RsNowLine CSS class to the timeslot.
        // Note: if the times are based on a 24 hour clock and in the format HH:MM:SS, a simple string comparison can be used to compare times.
        if (currentTimeSlotStartTime <= currentTime && currentTimeSlotEndTime > currentTime) {
            $(this).addClass("RsNowLine");
        }
    });
}
 
// Returns a date string formatted in the 24 hour clock: HH:MM
function GetTimeString (date) {
  
    // If the object is undefined or is not a JavaScript Date object then return null
    if (date == undefined || !(Object.prototype.toString.call(date) === '[object Date]')) {
        return null;
    }
 
    var hours = date.getHours(); // getHours() returns 24-hour clock format
    hours = (hours.toString().length == 1) ? "0" + hours.toString() : hours.toString(); // Add a leading zero if it's a single digit
    var minutes = date.getMinutes();
    minutes = (minutes.toString().length == 1) ? "0" + minutes.toString() : minutes.toString(); // Add a leading zero if it's a single digit
 
    var dateString = String.format("{0}:{1}", hours, minutes);
 
    return dateString;
}
0
Ala eddine
Top achievements
Rank 1
answered on 01 Jul 2013, 09:18 AM
Hello,

Please i want to implement the same think,  in TimeLineView i have to add a bar that indicate the Now time juste like the following example :
http://www.telerik.com/ClientsFiles/352543_Captura4.PNG

thank you
0
Plamen
Telerik team
answered on 04 Jul 2013, 10:40 AM
Hello,

this functionality is not supported in RadScheduler by default but you can use the solution provided by Christian on the 19-Apr-2012 which is implementing similar behavior with the help of several background images.

Hope this will be helpful.

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Prava kafle
Top achievements
Rank 1
answered on 25 Sep 2013, 03:15 PM
Hi,

Code written by Vince works in all other views except Timeline.
Timeslots in TimeLineView does not  pick class"RsNowLine".


Thanks,
Prava
0
Plamen
Telerik team
answered on 26 Sep 2013, 05:08 AM
Hello Prave,

 
For TimelineView you can review the way Christian on the 19-Apr-2012 has implemented this scenario. 

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Prava kafle
Top achievements
Rank 1
answered on 26 Sep 2013, 06:49 PM
Plamen,
code you referred to is for server side, I am looking for client side code. I went through the postings and found that Timeslotcreated event is fired only once on initial page load on web service bound scheduler. 

In my project, scheduler is refreshed at certain intervals and currenttime  in  timeline view has to be refreshed along with it.

Thanks,
Prava 
0
Plamen
Telerik team
answered on 30 Sep 2013, 11:50 AM
Hi,

 
In case of Web Service binding you will have to set the CSS styles from the client side
 as for example it is done in this forum thread instead of in the TimeSlotCreated event.

Hope this will lead you into the right direction.

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Scheduler
Asked by
Stepan
Top achievements
Rank 1
Answers by
Peter
Telerik team
Stepan
Top achievements
Rank 1
Chris
Top achievements
Rank 2
Renato
Top achievements
Rank 1
Plamen
Telerik team
Christian
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Vince
Top achievements
Rank 1
Ala eddine
Top achievements
Rank 1
Prava kafle
Top achievements
Rank 1
Share this question
or