Retrieving the selected time slot

[Ludwig]

Hello everyone,

I am new to the Telerik controls so this might seem like a very simple question but I've spent the last couple of hours trying to figure this out with no success.

Basically, I created a Scheduler which I'm populating server side with events retrieved from my database. After implementing the server side event handler for the time slot context menu item clicked, I am trying to retrieve the Start date and End date for a selected time slot server side. The issue is that though client side I manage to select multiple empty time slots, then I use the context menu to add a new event and postback server side and handle the event as per the below. 

Protected Sub radEventSchedule_TimeSlotContextMenuItemClicked(ByVal sender As Object, ByVal e As Telerik.Web.UI.TimeSlotContextMenuItemClickedEventArgs) Handles radEventSchedule.TimeSlotContextMenuItemClicked
        If e.MenuItem.Value = "NewEvent" Then
            Session("EventStartDate") = e.TimeSlot.Start
            Session("EventEndDate") = e.TimeSlot.End
        End If
    End Sub

My issue is that the startdate (e.TimeSlot.Start) and enddate (e.TimeSlot.End) is only being populated with the start time and end time of the timeslot I've right clicked. Therefore if for example I select from 01:00 - 09:00, these properties are only populated with a range of 30 minutes which is exactly the range of each single timeslot.

My intention is to retrieve the start time and end time of all the selected slots rather than the time slot I've right clicked only.

Thank you for your time.

Ludwig

[Peter]

Hi Ludwig,

You can use the client API to get the end time of the selected slots:

<script type="text/javascript">
       function OnClientTimeSlotContextMenuItemClicking(sender, args) {
           var lastSlotFromSelection = sender.get_selectedSlots()[sender.get_selectedSlots().length - 1];
           alert(lastSlotFromSelection.get_endTime());
       }
   </script>
   <telerik:RadScheduler ID="RadScheduler1" runat="server" OnClientTimeSlotContextMenuItemClicking="OnClientTimeSlotContextMenuItemClicking">
       <TimeSlotContextMenuSettings EnableDefault="true" />
   </telerik:RadScheduler>

Then you can pass it to the server and handle it in AjaxRequest using RadAjaxManager as shown in this help topic.

All the best,
Peter
the Telerik team

[Ludwig]

Hi Peter,

Many thanks for your email, I successfully managed to read the values of the selected fields and post them back server side using the below.

However, I now encountered an issue with the control. Basically I am rendering the scheduler in 24 hour time format, the idea is to have events spanning over multiple days or during non-business hours. The issue is that whenever I visually select a time slot between 00:00 and 08:00, the returned results (using the provided source code) are between office hours. So for example if I select the time slots between 03:00 till 05:00, the returned result is 11:00 till 13:00 which I noticed is exactly 3 hours after 08:00. Therefore visually it seems that the radscheduler is rendering the calendar in 24 hour time format correctly however the returned results are still during business hours specifically.

Moreover, I also noticed that if I select any timeslots during the weekend or else after office hours and selecting multiple days, say from 21:00 till 22:00 of the next day, a JavaScript error is returned immediately as soon as I hover over the next day with the mouse pointer. The error(below) is related to some cells which seem to be undefined.
Error: Microsoft JScript runtime error: Unable to get value of the property 'cells': object is null or undefined
Line of Code: return this._getContentTable().tBodies[0].rows[j].cells[l];

The below is the scheduler in question as defined in design mode. I tried various combinations removing and adding different properties with no success unfortunately.

<telerik:RadScheduler ID="radEventSchedule" runat="server"  DayStartTime="00:00:00" DayEndTime="23:59:59"
    FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" OnClientTimeSlotContextMenuItemClicked="OnClientTimeSlotContextMenuItemClicking"
    ShowFooter="false" WorkDayStartTime="00:00:00" WorkDayEndTime="23:59:59"  RowHeight="25" EnableAjaxSkinRendering="true"
    AllowInsert="false" AllowEdit="false" AllowDelete="false" OverflowBehavior="Expand">
    <AppointmentTemplate>
        <b><%#Eval("Subject")%></b>
        <br />
        <%#Eval(clsEvents.FieldDetails.Venue) %>
    </AppointmentTemplate>
    <AppointmentContextMenus>
        <telerik:RadSchedulerContextMenu ID="AppContextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Edit Event" Value="EditEvent" runat="server" PostBack="true"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Delete Event" Value="DeleteEvent" runat="server" PostBack="true"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Translate Event" Value="TranslateEvent" runat="server" PostBack="true"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Assign Event to a Specific Country" Value="AssignEvent" runat="server" PostBack="true"></telerik:RadMenuItem>
            </Items>
        </telerik:RadSchedulerContextMenu>
    </AppointmentContextMenus>
    <TimeSlotContextMenus>
        <telerik:RadSchedulerContextMenu ID="TimeSlotContextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Add New Event" Value="NewEvent" runat="server"></telerik:RadMenuItem>
            </Items>
        </telerik:RadSchedulerContextMenu>
    </TimeSlotContextMenus>
    <TimelineView UserSelectable="false" />
</telerik:RadScheduler>

[Peter]

Hello Ludwig,

Instead of setting:

DayStartTime="00:00:00"
DayEndTime="23:59:59"

please, set:

ShowFullTime="true"

Do you still experience problems?

Kind regards,
Peter
the Telerik team

[Ludwig]

Hello Peter,

Many thanks for this.

The property below has done the trick. Thanks again. :)

Ludwig

[Yu]

Hi,
I also got this kind of problems.
after i using OnClientTimeSlotContextMenuItemClicking in javascript.
1. The context menu of timeline view can not firing. how to solve this?
2. how to convert the date format for lastSlotFromSelection.get_endTime() to dd/mm/yyyy?
Thanks in advance.

javacript:

function

 

 

OnClientTimeSlotContextMenuItemClicking(sender, args) {

 

var lastSlotFromSelection = sender.get_selectedSlots()[sender.get_selectedSlots().length - 1];

alert(lastSlotFromSelection.get_endTime());

document.getElementById(

 

'<%= hdQueryStringDateEnd.ClientID%>').value = lastSlotFromSelection.get_endTime();

}

code behind:

protected void rsRoomBooking_TimeSlotContextMenuItemClicked(object sender, TimeSlotContextMenuItemClickedEventArgs e)

{

rsRoomBooking.SelectedDate = e.TimeSlot.Start.Date;

 

 

 

 

 

string RoomId = e.TimeSlot.Resource.Key.ToString();

 

 

 

 

 

string starttime = e.TimeSlot.Start.ToString("HH:mm");

 

 

 

 

 

string startdate = e.TimeSlot.Start.Date.ToString("dd/MM/yyyy");

 

 

 

 

 

string endtime = e.TimeSlot.Start.AddHours(1).ToString("HH:mm");

 

 

 

 

 

string endDate = startdate;

 

 

 

 

 

if (rsRoomBooking.SelectedView != SchedulerViewType.TimelineView)

{

 

 

 

 

 

string endDateLongFormaat = hdQueryStringDateEnd.Value;

 

 

 

 

 

int a = endDateLongFormaat.IndexOf(":");

 

 

 

 

 

string day = endDateLongFormaat.Substring(a - 5, 2).Trim();

 

 

 

 

 

string month = endDateLongFormaat.Substring(4, 3);

 

 

 

 

 

string year = endDateLongFormaat.Substring(a + 16);

 

 

 

 

 

string final = day + "-" + month + "-" + year;

 

 

 

 

 

DateTime v = Convert.ToDateTime(final);

 

 

 

 

 

if (rsRoomBooking.SelectedView == SchedulerViewType.MonthView)

{

v =

 

 

 

 

 

Convert.ToDateTime(final).AddDays(-1);

}

endDate = v.ToString(

 

 

 

 

 

"dd/MM/yyyy");

 

 

 

 

 

//if (rsRoomBooking.SelectedView == SchedulerViewType.TimelineView)

 

 

 

 

 

//{

 

 

 

 

 

// endDate = startdate;

 

 

 

 

 

//}

}

 

 

 

 

 

//string endDate = startdate;

 

 

 

 

 

if (e.MenuItem.Value.Equals("CommandNewBooking"))

{

 

 

 

 

 

if (rsRoomBooking.SelectedView == SchedulerViewType.MonthView)

{

starttime = GetWorkingStartTime().ToString(

 

 

 

 

 

"HH:mm");

endtime = GetWorkingStartTime().AddHours(1).ToString(

 

 

 

 

 

"HH:mm");

}

 

 

 

 

 

int bookingno = -1;

 

 

 

 

 

int roomid = Convert.ToInt16(RoomId);

 

 

 

 

 

string from = "Calendar";

 

 

 

 

 

string sPageRedirect = GetNewBookingUrl(bookingno, roomid, from, startdate, starttime, endDate, endtime);

　

 

 

 

 

 

Uri redirectUrl = new Uri(sPageRedirect);

PageRedirection(redirectUrl,

 

 

 

 

 

EnumConstants.TransferType.Redirect);

}

}

[Boyan Dimitrov]

Hello,

Regarding your first question - I am afraid I am not able to replicate the described issue. The client OnClientTimeSlotClicking event is fired as expected in the RadScheduler timeline view. Please refer to the attached sample project and let us know if the pop-up box does not show if you click on any context menu item of the time slot in the time line view.

Regarding you second question - you are able to format your date time object in various ways as shown in the following forum post. An easy and conveninent way to format that object would be to use the built-in Date object methods: getDate(), getMonth(), getFullYear(). 

Regards,
Boyan Dimitrov
the Telerik team

[Subodh]

Hello Telerik Team,


                             I have to show appointment time both side on scheduler window, how can i show this?

Regards,
Subodh.

[Boyan Dimitrov]

Hello,

I am afraid that such functionality is not supported with our RadScheduler Dayview. The hour panel on the left could be moved on the right side of the calendar area using our right to left support. I would like to clarify that showing a time panel on the top of the calendar area could not be achieved.


Regards,
Boyan Dimitrov
Telerik