Add Edit icon in appointments

[Dayanithy]

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

[Boyan Dimitrov]

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

[Dayanithy]

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

[Boyan Dimitrov]

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

[Dayanithy]

Thank you  Boyan.

[Shoikan]

Hello Boyan, I'm implementing the same functionality as Dayanithy, and while your solution works fine, it shows and hides the button of all of the appointments at once instead of showing the button of the current appointment being hovered.

Is there a solution for this behaviour?

Thanks in advance.