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

Schedule readOnly just some appointments

Hi,

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

1 Reply

VS Velmurugan S Syncfusion Team 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:

http://www.syncfusion.com/downloads/support/forum/119838/ze/AngularReadOnlySample1190212412

JS Playground Link:

http://jsplayground.syncfusion.com/rtwy5nvq

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,

<code>
               

<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">

                </ej-schedule>

            </div>

        </div>

    </div>

    <div>

    </div>

    <script>


        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>
</body>

</code>

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

Regards,
Velmurugan


Loader.
Up arrow icon