RadScheduler horizontal time line

[Stepan]

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.

[Peter]

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

[Stepan]

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.

[Peter]

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

[Chris]

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

[Peter]

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

[Renato]

I try getting this . Is it possible ? 
I thinking change style at appointment but i dont know if is correct

[Plamen]

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

[Christian]

thanks for the help, but it is possible to cross over between appointments? 

[Plamen]

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

[Christian]

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

[Plamen]

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

[Jeremy]

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

[Plamen]

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

[Jeremy]

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

[Plamen]

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

[Vince]

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-bottom: 3px 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;
}

[Ala eddine]

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

[Plamen]

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

[Prava kafle]

Hi,

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


Thanks,
Prava

[Plamen]

Hello Prave,

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

Regards,
Plamen
Telerik

[Prava kafle]

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 

[Plamen]

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