We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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
agenda view
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

4 Replies

CM carlos mendez July 25, 2017 12:16 AM UTC

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.

KK Karthigeyan Krishnamurthi Syncfusion Team July 25, 2017 10:58 AM UTC

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

CM carlos mendez July 26, 2017 05:50 PM UTC

Thanks, that did the trick and working fine.

KK Karthigeyan Krishnamurthi Syncfusion Team July 27, 2017 03:54 AM UTC

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

Live Chat Icon For mobile
Up arrow icon