Read only appointment

Hello, I need this.
I want to create an application using schedul control, where, if I enter with username/password I can have different right to:
- be the administrator, so CRUD is possible for every appointment
- be "normal user" so CRUD is possible only for appointment regarding this normal user
- no authentication, only view the appointments but don't no CRUD operation with appointments

Is it possible?
I want to integrate this control using python and web2py framework.
Any suggestion?
Is there any possibility con manage user rights?
Thank you

1 Reply

VS Velmurugan S Syncfusion Team February 28, 2018 12:37 PM UTC

Hi Andrea, 
Thanks for Contacting Syncfusion support. 
The mentioned requirement can be achieved by using our client side events and for authentication purpose, we have introduced the additional field on appointment window to check for the user type. Please refer to the following code example to meet the requirement. 
<code> 
<div> 
    <div> 
        <input type="text" id="selectType" /> 
        <div id="usersType"> 
            <ul> 
                <li>Administrator</li> 
                <li>Normal User</li> 
                <li>No Authentication</li> 
            </ul> 
        </div> 
    </div> 
    <div id="Schedule1"> 
    </div> 
</div> 
<script type="text/javascript"> 
    var serverValue; 
    $(function () { 
        var dataManager = ej.DataManager({ 
            // get the appointment data from the specified controller action 
            url: '@Url.Action("GetData","Home")', // This will trigger to bind the appointment data initially to the Schedule control 
            crudUrl: '@Url.Action("Batch","Home")', // This will trigger while performing CRUD operation on the Scheduler appointments 
            crossDomain: true 
        }); 
        dataManager.adaptor = new ej.UrlAdaptor(); 
        $("#Schedule1").ejSchedule({ 
            width: "100%", 
            height: "525px", 
            currentDate: new Date(2015, 5, 7), 
            appointmentSettings: { 
                dataSource: dataManager, 
                id: "Id", 
                subject: "Subject", 
                startTime: "StartTime", 
                endTime: "EndTime", 
                description: "Description", 
                allDay: "AllDay", 
                recurrence: "Recurrence", 
                recurrenceRule: "RecurrenceRule" 
            }, 
            beforeAppointmentCreate: "onBeforeAppointmentCreate", 
            beforeAppointmentChange: "onBeforeAppointmentChange", 
            beforeAppointmentRemove: "onEdit", 
            dragStart: "onEdit", 
            resizeStart: "onEdit", 
            appointmentWindowOpen: "onAppointmentOpen", 
 
        }); 
 
       // Dropdown list to showcase the user type 
        $('#selectType').ejDropDownList({ 
            targetID: "usersType", 
            watermarkText: "Select a user", 
            width: "200px", 
            change: "userTypeChange" 
        }); 
    }); 
 
    function onAppointmentOpen(args) { 
        if (this._appointmentAddWindow.find(".custom-fields").length == 0) //to add the custom field in default window 
        { 
            var customDesign = "<tr class='custom-fields'><td class='e-textlabel'>UserID</td><td><input id='UserID' name='UserID' class='UserID' type='text' /></td></tr>"; 
            $(customDesign).insertAfter(this._appointmentAddWindow.find("#" + this._id + "subjecttr")); 
        } 
 
        if (!ej.isNullOrUndefined(args.appointment)) // Here we are assigning the user id value to additional field (UserID from the appointment collection) 
            this._appointmentAddWindow.find(".UserID").val(args.appointment.UserID); 
        else 
            this._appointmentAddWindow.find(".UserID").val(""); 
 
    } 
    function onBeforeAppointmentCreate(args) { 
        app = ej.isNullOrUndefined(args.appointment[0]) ? args.appointment : args.appointment[0] 
        this._appointmentAddWindow.find(".UserID").val(app.UserID); 
    } 
    function onEdit(args) { 
       // Here we are preventing the appointment delete, resize and drag based on the user type 
        if (ej.isNullOrUndefined(serverValue) || serverValue != args.appointment.UserID && serverValue != "Administrator") 
            args.cancel = true; 
    } 
    function onBeforeAppointmentChange(args) { 
       // Here we are preventing the appointment editing based on the user type 
        if (ej.isNullOrUndefined(serverValue) || serverValue != args.appointment.changed[0].UserID && serverValue != "Administrator") 
            args.cancel = true; 
    } 
    function userTypeChange(args) { 
        serverValue = args.value; 
        var schObj = $("#Schedule1").data("ejSchedule"); 
        if (serverValue == "No Authentication") { // Here we setting the readOnly value to the schedule control based on the user type value            
            schObj.option("readOnly", true); 
        } else { 
            schObj.option("readOnly", false); 
        } 
    } 
</script> 
</code> 

We have prepared the sample with above code example, which can be available in the following location. 

In the above sample, we have used the drop down control to store the user types and based on the selected value updated the Schedule control appointment rights. Please refer to the control rights in the above sample. 
i)                    No Authentication -  We have set the Schedule control readOnly property value as true. At this time you cannot perform the CRUD operation. 
ii)                   Normal User – We have checked the user type within the “OnEdit” method and allowed when the appointment UserID value is matched with the selected user type value and proceed to perform CRUD operation or else prevented. 
iii)                 Administrator – We haven’t prevent anything for selecting this type. So, you can perform the CRUD operation. 

Kindly try with the above sample and let us know if you need any further assistance. 

Regards, 
Velmurugan 


Loader.
Up arrow icon