[Solved] Highlight more than one hour

[Mark Hinchliffe]

Hi, I am currently using the Q1 2009 telerik tools.

Is it possible to highlight more than one hour on the calendar and then right click to get the context menu?

I would like to be able to highlight from 9am to 5pm then right click to be able to add an appointment.

Thanks, Mark

[Lukas]

Hi,

I lately wrote some code that solves this problem.
With this you can click a start timeslot, holdt the mousebutton and pull the cursor to the end timeslot an create a appointment over this period.

I'm working in timeline-view only, but it should be almost the same in the other views

First you need to hook the mousedown and mouseup-Event for the timeslot-Elements:
1.Add a name-Attribute to the timeslot-DOM-object on the server-side, so you can identify them on clientside:

    Protected Sub RadScheduler1_TimeSlotCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.TimeSlotCreatedEventArgs) Handles RadScheduler1.TimeSlotCreated

        e.TimeSlot.Control.Attributes.Add("name", "timeslot")
    End Sub

2. Add the mousedown & mouseup event to all those elements:

//Varibale to save startTime of first timeslot clicked
var startTime;

function pageLoad(sender){
//get all elements with namme=timeslot
var tds = document.getElementsByName('timeslots');


        for (var i = 0; i < tds.length; i++)
        {
                tds[i].onmousedown = mouseDown;
                tds[i].onmouseup = mouseUp;
        }
}

3. The callback functions:

fires when mousebutton is pressed

function mouseDown(e, eventArgs)

{

if (!e) e = window.event;

sender = e.target || e.target;;

//get the timeSlot-object from the DOM-element the event was bound to and save the start time

startTime=scheduler._activeModel.getTimeSlotFromDomElement(sender);

}

//fires when mousebutton is released

function mouseUp(e)

{

if (!e) e = window.event;

sender = e.target || e.target;;

//get  timeSlot-object from the DOM-element the event was bound to and get the endtime

var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(sender);

//make new appointment

var newAppointment = new Telerik.Web.UI.SchedulerAppointment();

newAppointment.set_start(startTime);

newAppointment.set_end(timeSlot.get_endTime()); newAppointment.set_subject('SUBJECT')

scheduler.insertAppointment(newAppointment);

}

This should do the trick.
I also hooked up the mouseOver-Event for the timeslot and implemented a function that changes the backgroudColor of those elements to see what you have already marked.

I you want I can provide this code also, but its very complex, so I didn't post it at first

Hope I could help,

Lukas

[Mark Hinchliffe]

Hi, thanks for your quick reply.

Unfortunately I am not quite following where I put each bit of code. I am writing in C#, although I wouldn't expect this to differ much.

Are you able to let me see a copy of your aspx and code behind page to see this in full?

Thanks, Mark

[Lukas]

You can copy the code blocks 2. and 3. directly in your javascript block in your aspx-File

<script type="text/javascript" language="javascript">

//Varibale to save startTime of first timeslot clicked  var startTime;    function pageLoad(sender){  //get all elements with namme=timeslot   var tds = document.getElementsByName('timeslots');                         for (var i = 0; i < tds.length; i++)           {                    tds[i].onmousedown = mouseDown;                   tds[i].onmouseup = mouseUp;           }   }  //fires when mousebutton is pressed  function mouseDown(e, eventArgs)  {  if (!e) e = window.event;              sender = e.target || e.target;;  //get the timeSlot-object from the DOM-element the event was bound to and save the start time  startTime=scheduler._activeModel.getTimeSlotFromDomElement(sender);  }    //fires when mousebutton is released    function mouseUp(e)      {  if (!e) e = window.event;              sender = e.target || e.target;;  //get  timeSlot-object from the DOM-element the event was bound to and get the endtime  var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(sender);    //make new appointment  var newAppointment = new Telerik.Web.UI.SchedulerAppointment();  newAppointment.set_start(startTime);  newAppointment.set_end(timeSlot.get_endTime()); newAppointment.set_subject('SUBJECT') scheduler.insertAppointment(newAppointment);   }

<script>

The first block is the for code behind page.
just let VS create the event for RADScheduler1.TimeSlotCreated and add the code line in the event:

e.TimeSlot.Control.Attributes.Add("name", "timeslot") ;

should be exact same syntax in C# except the semicolon at the end of the line.

I hope I explained it understandabl.
I'm sorry but I can't send you my aspx-File and the code behind because they are together about 1000 lines of code some of it confidental, and it would take hours to extract the important parts.

[Mark Hinchliffe]

I've copied that code in, but when I run the page I get the following error: Object reference not set to an instance of an object. on the e.Timeslot line below:

protected

void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)

 

{

e.TimeSlot.Control.Attributes.Add(

"name", "timeslot");

 

}

Any ideas?

[Lukas]

Was this code automatically added by VS and was it porperly hooked up to event?

Don't know what libs you have import but it might help to add Telerik.Web.UI. to the TimeSlotCreatedEventArgs.
Else I don't have any idea why e should not be set to any reference.

Try to debug it an see what object has no reference e or Timeslot

[Mark Hinchliffe]

Stepping in pointed me in the right direction.

The Timeslot.Control was null. If I changed my selected view to Timeline View, then this worked OK.

Therefore seems like an issue exists with this code working with Week View.

Thanks for your help on this however.

[Fabio]

Existem algums items que estarao null  então coloque esta verificação q resolve.

    protected void AgendaRadScheduler_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
     if (e.TimeSlot.Control != null)
            e.TimeSlot.Control.Attributes.Add("onClick", "alert('Olá');");
    }