How to hide edit and delete icons (Agenda view) on mouse over or click on tasks

Question

HI i have a doubt cause i havent found a way to acomplish the following

Lets say i have 3 tasks Two of them the owner/creator of the task is User # 1 and the second Task the owner/creator is User # 10
so i have My Schedule view on AGENDA and see all tasks , now the user # 10 logs in and see the Agenda view and all the tasks appear but User #10 can only edit his task and the 2 other task which belong to User#1 have to be read only. SO the idea is when i set the mouse over the other tasks (which belong to user#1) the delete and edit icons must not appear

like the following image

So as an example HERE the idea is that the Orange Task 11:00 to 11:45 the (edit and delete) icons must be hidden   and on the green task they must appear
now i tried to use events cellHover but eventually moving the mouse over the tasks specific inside "agenda view " sooner or later I get an exception error on the JS code

TypeError: tdelement[(index + (view * i))] is undefined        ej.schedule.js:3707:45
ChangeCurrentTimePosition     ej.schedule.js:3707:45

Currently im using version 15.2.0.43

carlos mendez · Answer

Checking the source code on line 2865 "_onCellMouseOver: function (e) { " It seems that if the view its Agenda then the event "cellHover" its not supported but for the others the event it does work. Also it doesnt seems that using a custom template for cell display on Agenda view can be useful cause anyways the buttons are created.

Karthigeyan Krishnamurthi · Answer

Hi Carlos, Thank you for contacting Syncfusion support. When an appointment is hovered/clicked in Agenda view, appointmentHover/ appointmentClick event will be raised where appointments details can be accessed for your requirement.

 
$("#Schedule1").ejSchedule({ 
    width: "100%", 
    height: "525px", 
    currentView: "agenda", 
    currentDate: new Date(2017, 10, 4), 
    appointmentSettings: { 
        applyTimeOffset: false, 
        dataSource: dManager, 
        id: "Id", 
        subject: "Subject", 
        startTime: "StartTime", 
        endTime: "EndTime", 
        description: "Description", 
        allDay: "AllDay", 
        recurrence: "Recurrence", 
        recurrenceRule: "RecurrenceRule" 
    }, 
    appointmentHover: "agendaCustom", 
    appointmentClick: "agendaCustom" 
}); 
function agendaCustom(args) { 
    if (args.appointment.ownerId == 3) 
        $(".e-agendahover").css("visibility", "hidden") 
    else 
        $(".e-agendahover").css("visibility", "visible") 
}

Note: While hovering an appointment in Agenda view, mouse pointer should point the appointment completely to trigger the appointmentHover event. Regards, Karthigeyan

carlos mendez · Answer

Thanks, that did the trick and working fine.

Karthigeyan Krishnamurthi · Answer

Hi Carlos,   
 
We are happy to hear that our solution has fulfilled your requirement. 
 
Regards, 
Karthigeyan