Add time range on the first row

[Allen]

Can anyone tell me how to add the time range on the first row?  Please refer to the attachement.

 

[Plamen]

Hello Allen,

 
I have inspected the issue and here is the code that helped me add labels in the AllDay TimeSlots and achieve similar functionality as in the attached image:

public string newStartLabel = "";
  public string newEndLabel = "";
  public string dayOfWeek = "";
  protected void RadScheduler1_AppointmentUpdate(object sender, AppointmentUpdateEventArgs e)
  {
      if (e.ModifiedAppointment.Subject == "Availability")
      {
          newStartLabel = e.ModifiedAppointment.Start.ToString();
          newEndLabel = e.ModifiedAppointment.End.ToString();
          dayOfWeek = e.ModifiedAppointment.Start.DayOfWeek.ToString();
      }

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       if (e.TimeSlot.Duration==TimeSpan.FromDays(1))
       {
           Label startLabel = new Label();
           startLabel.ID = "startLabel" + e.TimeSlot.Start.DayOfWeek;
           if (newStartLabel!="" && dayOfWeek==e.TimeSlot.Start.DayOfWeek.ToString())
           {
               startLabel.Text = newStartLabel;
           }
           else
           {
               foreach (Appointment app in RadScheduler1.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End))
               {
                   if (app.Subject == "Availability")
                   {
                       startLabel.Text = app.Start.ToString();
                   }
               }
           }
           Label endLabel = new Label();
           startLabel.ID = "endLabel" + e.TimeSlot.Start.DayOfWeek;
           if (newStartLabel != "" && dayOfWeek == e.TimeSlot.Start.DayOfWeek.ToString())
           {
               endLabel.Text = "-"+newEndLabel;
           }
           else
           {
               foreach (Appointment app in RadScheduler1.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End))
               {
                   if (app.Subject=="Availability")
                   {
                       endLabel.Text = "-"+app.End.ToString();
                   }
               }

           }
           e.TimeSlot.Control.Controls.Add(startLabel);
           e.TimeSlot.Control.Controls.Add(endLabel);
       }

   }

Hope this will help you.

All the best,
Plamen Zdravkov
the Telerik team

[Allen]

Thank you for your help.  It works great.  I have another question:  Is there a way when we double click the time frame, it will pop up a modal for us to edit the time just like we double click the appointments?  Please refer to the attached file.

[Plamen]

Hello Allen,

 
If you want to achieve such functionality you can hook an jQuery click event to each of these little spans and open the appropriate advance form as in the code below:

function pageLoad() {
     var scheduler = $find('<%=RadScheduler1.ClientID %>');
    $telerik.$("#RadScheduler1_startLabelMonday").click(function myfunction(e) {

    var appointment = scheduler.get_appointments().findByID(55);
    scheduler.editAppointment(appointment);
});

One way to choose the right id of the needed appointment is to save it as a tooltip or some attribute of the appropriate label.

Hope this will be helpful.

Kind regards,
Plamen Zdravkov
the Telerik team

[Allen]

This is only happen in the month view.  When I double click any of the appointment, it error out: "Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Multiple controls with the same ID 'endLabelSunday' were found. FindControl requires that controls have unique IDs".
Please refer to the attached file.

[Plamen]

Hello Allen,

This is caused by the changes we made in WeekView and in order to avoid it we should check the selected view in the TimeSlotCreated event as in the code below:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
 {
    RadScheduler scheduler=(RadScheduler)sender;
     if (scheduler.SelectedView==SchedulerViewType.WeekView && e.TimeSlot.Duration==TimeSpan.FromDays(1))

Hope this will help.

 

Kind regards,
Plamen Zdravkov
the Telerik team

[Allen]

Thanks, the error has gone.  However, the time ranges disapeared in Month View after the change.  I need to show the time ranges in the Month View as well.  Please refer to the attached files.

[Allen]

I have solved the issue.  I simply assign unique ID on each day for both week view and month view.  Thanks for your help.

[Allen]

For the jQuery, after I placed the script, I receive the error "Microsoft JScript runtime error: 'hideActiveToolTip' is undefined".
Please refer to the attached files:

<%

 

@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AvailabilityLinksSubMaster.master" CodeBehind="MyAvailability.aspx.vb" Inherits="MSP.MyAvailability" %>

 

<%

 

@ MasterType virtualpath="~/AvailabilityLinksSubMaster.master" %>

 

<%

 

@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

 

<%

 

@ Register namespace="Telerik.Web.UI" tagprefix="UI" %>

 

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

 

 

 

<style type="text/css">

 

 

 

div.RadScheduler .rcOtherMonth

 

{

 

 

}

 

 

div.RadScheduler .rsAllDayHeader,

 

 

 

div.RadScheduler .rsVerticalHeaderTable div

 

{

 

 

font-weight: bold;

 

 

 

text-align: right;

 

}

 

 

 

.rsApt

 

{

 

 

width: 46.5%!important;

 

}

 

 

.rsAllDayRow .rsWrap

 

{

 

 

display:none !important;

 

}

 

 

div.RadToolTip table.rtWrapper td.rtWrapperContent

 

{

 

 

background-color:none !important;

 

 

 

background-image: url("../Images/Menu_Bkgrd_Normal2.png") !important;

 

}

 

 

.ScreenOnly {display : none;}

 

 

 

</style>

 

 

 

 

<link href="App_Themes/Default/Scheduler.Macys.css" rel="stylesheet"

 

 

 

type="text/css" />

 

 

 

<link href="App_Themes/Default/Calendar.Macys.css" rel="stylesheet"

 

 

 

type="text/css" />

 

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">

 

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

 

<script type="text/javascript">

 

 

 

function pageLoad()

 

{

 

 

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

 

$telerik.$(

 

"#RadScheduler1_startLabelMonday").click(function myfunction(e)

 

{

 

 

var appointment = scheduler.get_appointments().findByID(55);

 

scheduler.editAppointment(appointment);

});

 

 

function hideActiveToolTip()

 

{

 

 

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

 

 

 

if (tooltip)

 

{

tooltip.hide();

}

}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

 

 

function beginRequestHandler(sender, args)

 

{

 

 

var prm = Sys.WebForms.PageRequestManager.getInstance();

 

 

 

if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1)

 

{

hideActiveToolTip();

}

}

 

 

function OnClientRequestStart(sender, args)

 

{

args.set_cancel(

 

true);

 

 

 

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

 

 

 

if (tooltip)

 

{

 

 

var element = tooltip.get_targetControl();

 

 

 

var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);

 

<%

 

--

 

$get(

 

 

"startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");

 

$get(

 

 

"endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");

 

--

 

 

%>

 

$get(

 

"descriptionDiv").innerHTML = "double click to edit your preference";

 

tooltip.set_text($get(

 

"contentContainer").innerHTML);

 

}

}

 

 

</script>

 

 

 

</telerik:RadCodeBlock>

 

 

 

 

 

<!-- Start Header -->

 

<!-- End Header -->

 

 

 

<table cellpadding="0" cellspacing="0" class="style5" cols="1" width="100%">

 

 

 

<tr>

 

 

 

<td valign="top">

 

 

 

<!-- Top Menu -->

 

 

 

 

<!-- End Top Menu -->

 

 

 

<!-- Start Workspace -->

 

 

 

<div id="Workspace" align="left" class="style6">

 

 

 

<div id="PrintViewHeader" style="display: none;">

 

 

 

<table border="0" cellpadding="1" cellspacing="1" cols="2" width="98%">

 

 

 

<tbody class="SiteTextSmall">

 

 

 

<tr>

 

 

 

<td align="center" class="PageHeading">

 

Availability

 

</td>

 

 

 

</tr>

 

 

 

<tr class="ScreenOnly">

 

 

 

<td align="left">

 

 

 

<span class="SiteTextboldRed">For best results, change your printer setting to

 

landscape.

 

</span>

 

 

 

</td>

 

 

 

</tr>

 

 

 

</tbody>

 

 

 

</table>

 

 

 

</div>

 

 

 

 

 

<!-- Schedule option -->

 

 

 

<table border="0" cellpadding="1" cellspacing="1" cols="1" width="98%">

 

 

 

<tbody class="SiteTextSmall">

 

 

 

<tr>

 

 

 

<td colspan="1" rowspan="1">

 

 

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">

 

 

 

<telerik:RadScheduler ID="RadScheduler1" runat="server" DayEndTime="23:59:59"

 

 

 

RowHeight="16px" SelectedView="MonthView"

 

 

 

WorkDayEndTime="8.00:00:00" WorkDayStartTime="00:00:00"

 

 

 

AllowDelete="False"

 

 

 

NumberOfHoveredRows="1" SelectedDate="2012-06-10"

 

 

 

EnableExactTimeRendering="True" Height="460px"

 

 

 

EnableEmbeddedSkins="False" Skin="Macys"

 

 

 

onclientappointmentcontextmenu="hideActiveToolTip"

 

 

 

onclientappointmentdoubleclick="hideActiveToolTip"

 

 

 

onclientrecurrenceactiondialogshowing="hideActiveToolTip"

 

 

 

OverflowBehavior="Expand">

 

 

 

<AdvancedForm Width="60%" Modal="True" />

 

 

 

<ResourceTypes>

 

 

 

<telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="USERID"

 

 

 

KeyField="ID" Name="Users" TextField="USERNAME" />

 

 

 

</ResourceTypes>

 

 

 

<TimelineView UserSelectable="False" />

 

 

 

<WeekView DayEndTime="23:59:59" ColumnHeaderDateFormat="dddd, d" />

 

 

 

<Localization AdvancedEditAppointment="Edit" AdvancedNewAppointment="New"

 

 

 

AllDay="Range" />

 

 

 

<MonthView FirstDayHeaderDateFormat="MMMM dd" ColumnHeaderDateFormat="MMMM dddd"

 

 

 

HeaderDateFormat="MMMM, yyyy" />

 

 

 

</telerik:RadScheduler>

 

 

 

 

<div align="center">

 

 

 

<asp:ImageButton ID="btnSubmit" runat="server"

 

 

 

ImageUrl="../images/b_submit_sm.gif" onclick="btnSubmit_Click" />

 

 

 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 

 

 

<asp:ImageButton ID="btnCancel" runat="server"

 

 

 

ImageUrl="../images/b_cancel.gif" onclick="btnSubmit_Click" />

 

 

 

</div>

 

 

 

 

&nbsp;<asp:SqlDataSource

 

 

 

 

ID="SqlDataSource1" runat="server"

 

 

 

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

 

 

 

DeleteCommand="DELETE FROM &quot;AVAILABILITY_TEST&quot; WHERE &quot;ID&quot; = :ID"

 

 

 

InsertCommand="INSERT INTO &quot;AVAILABILITY_TEST&quot; (&quot;ID&quot;, &quot;SUBJECT&quot;, &quot;START_TIME&quot;, &quot;END_TIME&quot;, &quot;USERID&quot;, &quot;RECURRENCERULE&quot;, &quot;RECURRENCEPARENTID&quot;) VALUES (:ID, :SUBJECT, :START_TIME, :END_TIME, :USERID, :RECURRENCERULE, :RECURRENCEPARENTID)"

 

 

 

ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"

 

 

 

SelectCommand="SELECT * FROM &quot;AVAILABILITY_TEST&quot;"

 

 

 

UpdateCommand="UPDATE &quot;AVAILABILITY_TEST&quot; SET &quot;SUBJECT&quot; = :SUBJECT, &quot;START_TIME&quot; = :START_TIME, &quot;END_TIME&quot; = :END_TIME, &quot;USERID&quot; = :USERID, &quot;RECURRENCERULE&quot; = :RECURRENCERULE, &quot;RECURRENCEPARENTID&quot; = :RECURRENCEPARENTID WHERE &quot;ID&quot; = :ID">

 

 

 

<DeleteParameters>

 

 

 

<asp:Parameter Name="ID" Type="Decimal" />

 

 

 

</DeleteParameters>

 

 

 

<InsertParameters>

 

 

 

<asp:Parameter Name="ID" Type="Decimal" />

 

 

 

<asp:Parameter Name="SUBJECT" Type="String" />

 

 

 

<asp:Parameter Name="START_TIME" Type="DateTime" />

 

 

 

<asp:Parameter Name="END_TIME" Type="DateTime" />

 

 

 

<asp:Parameter Name="USERID" Type="Decimal" />

 

 

 

<asp:Parameter Name="RECURRENCERULE" Type="String" />

 

 

 

<asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />

 

 

 

</InsertParameters>

 

 

 

<UpdateParameters>

 

 

 

<asp:Parameter Name="SUBJECT" Type="String" />

 

 

 

<asp:Parameter Name="START_TIME" Type="DateTime" />

 

 

 

<asp:Parameter Name="END_TIME" Type="DateTime" />

 

 

 

<asp:Parameter Name="USERID" Type="Decimal" />

 

 

 

<asp:Parameter Name="RECURRENCERULE" Type="String" />

 

 

 

<asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />

 

 

 

<asp:Parameter Name="ID" Type="Decimal" />

 

 

 

</UpdateParameters>

 

 

 

</asp:SqlDataSource><asp:SqlDataSource

 

 

 

ID="SqlDataSource2" runat="server"

 

 

 

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

 

 

 

ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"

 

 

 

SelectCommand="SELECT &quot;ID&quot;, &quot;USERNAME&quot; FROM &quot;AVAILABILITY_TEST_USERS&quot;">

 

 

 

</asp:SqlDataSource>

 

 

 

 

 

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="130"

 

 

 

Height="40" Skin = ""

 

 

 

OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" />

 

 

 

<div style="display: none;">

 

 

 

<div id="contentContainer">

 

<%

 

--

 

Starts on: <span id="startTime"></span>

<br />

Ends on: <span id="endTime"></span>

<hr />

 

Description:

--

 

 

%>

 

 

 

<div id="descriptionDiv">

 

 

 

</div>

 

 

 

</div>

 

 

 

</div>

 

 

 

</telerik:RadAjaxPanel>

 

 

 

</td>

 

 

 

</tr>

 

 

 

 

</tbody>

 

 

 

</table>

 

 

 

 

<!-- Permanent availability -->

 

 

 

 

</div>

 

 

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

<!-- End Workspace -->

 

 

</

 

 

asp:Content>

 

[Plamen]

Hello Allen,

 
Would you please explain what should be the functionality you want to add to the tooltips of the labels because it is not very clear?  Please let us know as well what is the reason you do not use the inbuilt Tooltip of the label as in the code below:

Label startLabel = new Label();
           startLabel.ToolTip = "aaaa";
           startLabel.ID = "startLabel" + e.TimeSlot.Start.DayOfWeek;

Kind regards, 
Plamen Zdravkov
the Telerik team

[Allen]

Because I need to add unique ID for the month view (from day 1 to day 31). My question is how to use this jQuery click event to each of these little spans (appointments) and open the appropriate advance form as in the code suggested by you:
I need it in detail.

function pageLoad() {

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

$telerik.$("#RadScheduler1_startLabelMonday").click(function myfunction(e) {

var appointment = scheduler.get_appointments().findByID(55);

scheduler.editAppointment(appointment);

});

[Plamen]

Hello Allen,

 
You can set the ids of the labels in such way so they have similar endings as "StartLabel" for example and get the click event by getting elements by their endings. Here is one way to achieve this:

  $telerik. $("[id$='StartLabel']").click(function myfunction(e) {
  alert(1);
//    var appointment = scheduler.get_appointments().findByID(55);
//    scheduler.editAppointment(appointment);
});

if ( e.TimeSlot.Duration==TimeSpan.FromDays(1))
       {
           Label startLabel = new Label();

           startLabel.ToolTip = "aaaa";
           startLabel.ID =  e.TimeSlot.Start.Date.Day+"Day"+e.TimeSlot.Start.Date.Month+"MonthStartLabel" ;

...
 Label endLabel = new Label();
            endLabel.ID = e.TimeSlot.Start.Date.Day + "Day" + e.TimeSlot.Start.Date.Month + "MonthEndLabel";
...

Hope this will be helpful.

Kind regards,
Plamen
the Telerik team