Add Edit icon in appointments

5 posts, 1 answers
  1. Dayanithy
    Dayanithy avatar
    10 posts
    Member since:
    Jul 2011

    Posted 20 Nov 2013 Link to this post

    Hi,

    I am using RadScheduler - version 2013.3.1015.35.

    Is it possible to add an edit icon next to the delete icon in the appointment? I have attached the screenshot of how i wanted the screen to be. I am using only the month view.

    The edit button should be visible only when you mouse hover the appointment(Similar to delete).

    Any help is greatly appreciated.

    Thanks,
    Dayanithy
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 25 Nov 2013 Link to this post

    Hello Dayanithy,

    An easy and convenient way of achieving such functionality would be to use the appointment templates. This way you are able add custom elements/controls to your appointment container.  Pleas refer to this demo for more information. The <AppointmentTemplate> section contains all controls you want to place in the appointment container.

    Regards,
    Boyan Dimitrov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dayanithy
    Dayanithy avatar
    10 posts
    Member since:
    Jul 2011

    Posted 26 Nov 2013 Link to this post

    Thanks Boyan.

    How can we achieve the mouse hover functionality for the custom controls in the appointment template, similar to DELETE icon/control?

    Thanks
    Dayanithy
  5. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Nov 2013 Link to this post

    Hello Dayanithy,

    An easy and convenient way of achieving such functionality is shown in the code snippet below:
    //markup code
    <telerik:RadScheduler ID="RadScheduler1" runat="server" >
        <AppointmentTemplate>
            <a class="CustomClass">
                <img src="your image name.png" />
            </a>
        </AppointmentTemplate>
    </telerik:RadScheduler>
    //css
    .CustomClass {
        visibility: hidden  ;
    }
    //JavaScript
    function pageLoad() {
        $telerik.$(".rsAptContent").hover(function () {
            $telerik.$(".CustomClass").css("visibility", "visible");
        }, function () {
            $telerik.$(".CustomClass").css("visibility", "hidden")
        });
    }


    Regards,
    Boyan Dimitrov
    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.
  6. Dayanithy
    Dayanithy avatar
    10 posts
    Member since:
    Jul 2011

    Posted 29 Nov 2013 Link to this post

    Thank you  Boyan.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017