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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Schedule readOnly just some appointments

Thread ID:





119838 Aug 6,2015 07:09 AM UTC Aug 7,2015 09:41 AM UTC JavaScript 1
Tags: ejSchedule
Kovács István
Asked On August 6, 2015 07:09 AM UTC


I want to use your schedule javascript control in my angularjs project but unfortunately I didn't find how could I set some appointments readOnly not the whole control.
I hope you are going to help me.

Best reguards

Velmurugan S [Syncfusion]
Replied On August 7, 2015 09:41 AM UTC

Hi Kovács,

Thank you for using Syncfusion products.

We have prepared a workaround sample (with categorize option) that meets your requirement, as we do not have the default support for making only some of the appointments as read-only. Please find the sample from the following location:


JS Playground Link:


In the above sample, we have applied the categorize with two options (Completed, Not Started) to the Schedule appointments and based on those categorize values we made the appointment as read-only. For example, the appointment with Id value “101” and if it’s corresponding Categorize value is completed, then we have made that appointment alone as readOnly based on the Categorize value (Completed).

Please find the following code snippets to make only the completed appointments as readOnly,


<body ng-controller="ScheduleCtrl">

    <div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <ej-schedule style="float: left" id="Schedule1" e-appointmentsettings-datasource="appointments" e-appointmentsettings-id="Id" e-appointmentsettings-subject="Subject" e-appointmentsettings-starttime="StartTime"

                             e-appointmentsettings-endtime="EndTime" e-appointmentsettings-description="Description" e-appointmentsettings-allday="AllDay" e-appointmentsettings-recurrence="Recurrence" e-appointmentsettings-recurrencerule="RecurrenceRule"

                            e-appointmentsettings-categorize="Categorize" e-categorizesettings="categorizeItems" e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-appointmenthover="readOnlyChange" e-appointmentclick="readOnlyChange" e-appointmentwindowopen="readOnlyChange" e-appointmentdeleted="readOnlyChange" e-resizestop="readOnlyChange" e-dragstop="readOnlyChange">








        window.Default = [{

            Id: 100,

            Subject: "Bering Sea Gold",

            StartTime: new Date(2014, 4, 2, 06, 00),

            EndTime: new Date(2014, 4, 2, 08, 00),

            Description: "",

            AllDay: false,

            Recurrence: true,

            RecurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10",

            Categorize: "1"





           Id: 109,

            Subject: "MayDay",

            StartTime: new Date(2014, 3, 30, 06, 30),

            EndTime: new Date(2014, 3, 30, 07, 30),

            Description: "",

            AllDay: false,

            Recurrence: false,

            Categorize: "1"



        var list = [

                   { empid: "day", text: "Day", value: "day" },

                   { empid: "week", text: "Week", value: "week" },

                   { empid: "workweek", text: "Work Week", value: "workweek" },

                   { empid: "month", text: "Month", value: "month" }


        // The following code snippets is to bind the categorize values to the Schedule control

        var StatusItems = {

            enable: true,

            allowMultiple: true,

            dataSource: [

               { text: "Completed", id: 1, color: "#7499e1", fontColor: "red" },

               { text: "Not Started", id: 2, color: "#7cce6e", fontColor: "white" },


            text: "text", id: "id", color: "color", fontColor: "fontColor"


        angular.module('syncApp', ['ejangular'])

             .controller('ScheduleCtrl', function ($scope) {

                 $scope.appointments = window.Default;

                 $scope.dataList = list;

                 $scope.setDate = new Date(2014, 4, 5);

                 $scope.drpvalue = "week";

                 $scope.categorizeItems = StatusItems// Here we are assigning the categorize items to the angular scope variable


        // The following code block is used to make the appointment as readonly

        function readOnlyChange(args) {

            if (args.originalEventType != "cellDoubleClick") {

                var data = ej.DataManager(this.model.categorizeSettings.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.Categorize))

                for (var i = 0; i < data.length; i++) {

                    if (data[i].text == "Completed")

                        args.cancel = true;



        }    </script>


Please let us know if you need any further assistance on this.



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon