Angular - Use group

[sergeant]

Hello,
I would like to use group with angular for ejshedule component.
I don't find the right syntax.
e-group="{
                    resources: ['Owners']
                }"

Can anyone help me?

Thanks in advance.

François

[Velmurugan S]

Hi Sergeant,
Thanks for using Syncfusion products.

You can use the group and resources with angular for schedule component by using the following code snippets.

<code>

<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-resourceFields ="roomId,ownerId"

e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-group="group" e-resources="resData">

</ej-Schedule>

<script>

var resourceData = [

{

field: "roomId",

title: "Room",

name: "Rooms", allowMultiple: false,

resourceSettings: { dataSource: [

{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },

{ text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" }],

text: "text", id: "id", groupId: "groupId",color:"color"

}

},

{

field: "ownerId",

title: "Owner",

name: "Owners", allowMultiple: true,

resourceSettings: { dataSource: [

{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },

{ text: "Steven", id: 3, groupId: 2, color: "#f8a398" },

{ text: "Michael", id: 5, groupId: 1, color: "#7499e1" }

],

text: "text", id: "id", groupId: "groupId", color: "color"

}

}];

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

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

$scope.appointments = appList;

$scope.group = { resources: ["Rooms", "Owners"] };

$scope.resData = resourceData;

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

$scope.drpvalue = "week"

});
</script>


</code>

We have prepared the sample with the above code snippets, which can be downloaded from the following location.

https://www.syncfusion.com/downloads/support/forum/119220/Angular_Multiple_Resource199717385.zip

Please let us know if it helps and if you need any further assistance on this.
Regards,
Velmurugan

[sergeant]

Thanks you !
Your example was perfect.
I solved the problem in 10 secondes.

Another question and the last one, I hope!
Is it possible to use CRUD with url binding with Angular?
In the web documentation, i read it's possible with jquery but I can't find any example with Angular.
I just would like some information about this question.

Thanks in advance for your help.

[Velmurugan S]

Hi Sergeant,
Thanks for your update.
We have prepared the sample that tries to meet your requirement “CRUD with url binding with Angular”, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119220/ScheduleAngular-1636944454.zip

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

Note: We request you to run the above sample from the “Angular_MultipleResource.html” page to take the effect of the CRUD operation.

Regards,
Velmurugan

[sergeant]

Thanks, the problem has been solved with your help.

I've another question: how can I display "Owner" field in my customized appointment window?

I can't find any information in documentation, forum or knowledge base...
I try to search directly in ej.schedule.js, but it's very tricky (for me!).

Thanks in advance.

[Velmurugan S]

Hi Sergeant,
Thanks for your update.

You can display the Owner field in the customized appointment window. Please find the following steps to include and display the Owner field in the appointment window.

Step 1: Create the custom appointment window sample. Refer the following link to create the sample:

Online Sample link:


http://js.syncfusion.com/demos/web/#!/azure/schedule/CustomWindow

Document Link: [ under the section Using Customized Appointment window]

http://help.syncfusion.com/ug/js/index.html#!Documents/databinding17.htm

Step 2: Add the two dropdown (one for the owner field and another one for the Room field) in the CustomAppointmentWindow design. Please refer the following code snippet to add the Owner and Room filed in the custom window:

<code>

<div id="customWindow" style="display: none">

        <form id="custom">

            <table width="100%" cellpadding="5">

                <tbody>

                    ---------------------------------------

                    ---------------------------------------

                    <tr>

                        <td>

                            EndTime:

                        </td>

                        <td>

                            <input id="EndTime" type="text" value="" name="EndTime" />

                        </td>

                    </tr>

                    <tr>

                        <td>

                            Room:

                        </td>

                        <td>                          

                            <input type="text" id="Room" />

                        </td>

                       

                    </tr>

                    <tr>

                        <td>

                            Owner:

                        </td>

                        <td colspan="2">

                            <input type="text" id="Owner" />                           

                        </td>

                    </tr>

                    -----------------------------------------------

                    -----------------------------------------------

               </tbody>

            </table>

        </form>

        <div>

            <button type="submit" onclick="cancel()" id="btncancel" style="float:right;margin-right:20px;">Cancel</button>

            <button type="submit" onclick="save()" id="btnsubmit" style="float:right;margin-right:20px;">Submit</button>

        </div>
    </div>

</code>

Step 3: Add the following code snippets changes in the “Script section”:

<code>
                   // DataSource values for the "Room and Owner field"

var Rooms=[{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },

                   { text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" }];

       

        var Owners = [{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },

                      { text: "Steven", id: 3, groupId: 2, color: "#f8a398" },

                      { text: "Michael", id: 5, groupId: 1, color: "#7499e1" }];

        $(function () {

            $("#customWindow").ejDialog({

                width: 600,

                height: "auto",

                position: { X: 400, Y: 200 },

                showOnInit: false,

                enableModal: true,

                title: "Create Appointment",

                enableResize: false,

                allowKeyboardNavigation: false,

                close: "clearFields"

            });

            $("#btncancel").ejButton({ width: '85px' });

            $("#btnsubmit").ejButton({ width: '85px' });

            $("#Room").ejDropDownList({

                dataSource: Rooms,

                fields:{text: "text", id: "id", value: "text"}

            });

            $("#Owner").ejDropDownList({

                dataSource: Owners,

                fields: { text: "text", id: "id", value: "text" }

            });

        });

        function onAppointmentWindowOpen(args) {

            args.cancel = true;

            var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");

            quickobj.close();

            $("#subject").removeClass("validation");

            $("#customdescription").removeClass("validation");

            $("#StartTime").ejDateTimePicker({ value: args.startTime });

            $("#EndTime").ejDateTimePicker({ value: args.endTime });          

            if (!ej.isNullOrUndefined(args.target)) {

                if ($(args.target.currentTarget).hasClass("e-alldaycells"))

                    $("#allday").prop("checked", true);

            }

            if (!ej.isNullOrUndefined(args.appointment)) {

                var userValue;

                $("#customId").val(args.appointment.Id);

                $("#subject").val(args.appointment.Subject);

                $("#customdescription").val(args.appointment.Description);

                $("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });

                $("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });

                var roomObject = $("#Room").data("ejDropDownList");

                var roomValue = ej.DataManager(roomObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.RoomId))[0]["text"];

                var ownerObject = $("#Owner").data("ejDropDownList");

                var ownerValue = ej.DataManager(ownerObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"];             

                $("#Room").ejDropDownList("clearText");

                $("#Owner").ejDropDownList("clearText");

                $("#Room").ejDropDownList({ text:roomValue, value: roomValue });

                $("#Owner").ejDropDownList({ text:ownerValue, value: ownerValue });

                $("#allday").prop("checked", args.appointment.AllDay);

                $("#recurrence").prop("checked", args.appointment.Recurrence);

                if (args.appointment.Recurrence) {

                    $("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase());

                    $("tr.recurrence").css("display", "table-row");

                }

                $("#customWindow").ejDialog("open");

            }

            else

                $("#customWindow").ejDialog("open");

        }

        function save() {

            if ($("#subject").val().trim() == "") {

                $("#subject").addClass("error");

                return false;

            }           

            ------------------------------------

            ------------------------------------

           else

                obj["RecurrenceRule"] = null;

            var roomobj = $("#Room").data("ejDropDownList");

            var ownerobj = $("#Owner").data("ejDropDownList");

            obj["RoomId"] = roomobj.getSelectedItemsID()[0];

            obj["OwnerId"] = ownerobj.getSelectedItemsID()[0];

            $("#customWindow").ejDialog("close");

            var object = $("#Schedule1").data("ejSchedule");

            object.saveAppointment(obj);

            clearFields();

        }

        function clearFields() {

            $("#customId").val("");

            $("#subject").val("");

            $("#customdescription").val("");

            $("#Room").val("");

            $("#Owner").val("");

            $("#allday").prop("checked", false);

            $("#recurrence").prop("checked", false);

            document.getElementById("rType").selectedIndex = "0";

            $("tr.recurrence").css("display", "none");

        }

        -----------------------

        -----------------------

               
</code>

Step 4: Initialize the client side event to open the custom appointment window. Please refer the following code snippet to initialize the client side events in the Angular JS Schedule support.

<code>

                <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-resourcefields="RoomId,OwnerId"

                             e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-group="group" e-resources="resData" e-appointmentwindowopen="onAppointmentWindowOpen">

                   
                </ej-schedule>
</code>

Step 5: Then run the sample and you can view the “Owner field and Room field” in the customized appointment window. Refer the following screenshot of the above code implementation.


Figure 1: Room field values in the dropdownlist


Figure 2: Owner field values in the dropdownlist



Figure 3: Edit/View the appointment details

Also we have modified the sample with the above code snippet changes, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119220/ze/ScheduleAngularWithCustomWindow-1575541816

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

Regards,
Velmurugan

[sergeant]

Thanks for your help.

Another question, where i could find the owner field  (in args variable) on create appointment event (to initialize dropdown Owner)?

[Sarath Kumar P K]

Hi Sergeant,

Thanks for your update.

We were able to reproduce the problem and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

We have prepared the workaround sample to meet your requirement which can be downloaded from the below location.
https://www.syncfusion.com/downloads/support/forum/119220/ze/ScheduleMultipleResource1755086316

<code>

$(function () {

            $("#Schedule1").ejSchedule({

                width: "100%",

                height: "525px",

               .....

                   recurrenceRule: "RecurrenceRule",

                    resourceFields: "ownerId"

                },

                appointmentWindowOpen:"onAppointmentWindowOpen"

            });
        });

function onAppointmentWindowOpen(args) {

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

                var dateCount = this.model.currentView == "month" ? 7 : this.model.currentView == "day" ? 1 : this._dateRender.length;

                var index = this._cellIndex;

                var resIndex = index / dateCount;

                var resource = this.model.currentView == "month" ? this.res1[parseInt(this._currentColIndex / 7)] : this.res1[parseInt(resIndex)];    //resource variable returns the Owner data

                alert("Current Resource value is=" + resource.text);

            }
        }
</code>

Please let me know if you have any questions.

Regards,
Sarath Kumar P K