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

[carlos mendez]

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]

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]

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. 

 

<Code> 

$("#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") 

} 

</Code> 

 

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

 

Regards, 

Karthigeyan 

[carlos mendez]

Thanks, that did the trick and working fine.

[Karthigeyan Krishnamurthi]

Hi Carlos,   

 

We are happy to hear that our solution has fulfilled your requirement. 

 

Regards, 

Karthigeyan