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.
Unfortunately, activation email could not send to your email. Please try again.

Schedule readOnly just some appointments

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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

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

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


CONFIRMATION

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.

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.

;