customization of create appointment popup window

[saravanan]

Hi,

       I am using schedule control with resource view.  I have populated the resource value with table values (sample values Room1, Room2 etc...)

 

      And I customized the appointment popup window(Added new control : Resource type Text Box). on click of cell, I want to populate this Resource Text Box with the resource value( Resource: Room1).

     

      My .cshtm is given below.

    @(Html.EJ().Schedule("Schedule1")

        .Width("100%")

        .Height("525px")

        .TimeZone("UTC -05:00") 

        .ShowCurrentTimeIndicator()

        .ShowQuickWindow(true)

     .Resources(res =>

     {

                    

                    res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true)

                     .ResourceSettings(flds => flds.Datasource(ViewBag.Owners).Text("text").Id("id").Color("color")).Add();

     })

        .Group(gr =>

          {

             gr.Resources(ViewBag.Resources);

          })  

         .AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Schedule/GetData").CrudURL("/Schedule/CRUD").Adaptor("UrlAdaptor"))

            .Id("Id")

            .Subject("Subject")

            .StartTime("StartTime")

            .StartTimeZone("StartTimeZone")

            .EndTimeZone("EndTimeZone")

            .EndTime("EndTime")

            .Description("Description")

           .ResourceFields("OwnerId")

           

           )

           .ScheduleClientSideEvents(evt => evt.AppointmentWindowOpen("onAppointmentWindowOpen")) 

        )

     and the html is

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

        <form id="custom">

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

                <tbody>

                    <tr style="display: none">

                        <td>Id:

                        </td>

                        <td colspan="2">

                            <input id="customId" type="text" name="Id" />

                        </td>

                    </tr>

                     <tr>

                        <td>Resource:

                        </td>

                        <td colspan="2">

                           <input id="Resource" type="text" name="OwnerId" value =""  style="width: 100%" />

                        </td>

                    </tr>

                    <tr>

                        <td>StartTime:

                        </td>

                        <td>

                            @Html.EJ().DateTimePicker("StartTime").Width("150px")

                        </td>

                    </tr>

                    <tr>

                        <td>EndTime:

                        </td>

                        <td>

                            @Html.EJ().DateTimePicker("EndTime").Width("150px")

                        </td>

                    </tr>

                    <tr>

                        <td>No of user:

                        </td>

                        <td colspan="2">

                            <input id="user" type="text" value="" name="NoOfUser"  style="width: 100%" />

                        </td>

                    </tr>

                    <tr>

                        <td>Contact No:

                        </td>

                        <td colspan="2">

                            <input id="ContactNo" type="text" value="" name="ContactNo"  style="width: 100%" />

                        </td>

                    </tr>

                    <tr>

                        <td>Course Code:

                        </td>

                        <td colspan="2">

                            <input id="CourseCode" type="text" value="" name="CourseCode"  style="width: 100%" />

                        </td>

                    </tr>

                   

                    <tr>

                        <td>Purpose of use:

                        </td>

                        <td colspan="2">

                            <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>

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

I want this Resource value on opening of the create popup window and i need to save the value to the table as well.

please let me know the solution for this.  i have attached the screen shot.

     

Attachment: customise_appointment_b3a15b2f.rar

[Karthigeyan Krishnamurthi]

Hi Saravanan,

Thanks for contacting Syncfusion Support.
We have prepared the sample in-order to meet your requirement with “populating the resource value on the create popup window on cell click”. The sample can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/forum/120565/ze/Resource_grouping1787235130

Please find the following code example that we have used in the above sample to meet your requirement.

<code>

function onAppointmentWindowOpen(args) {

            args.cancel = true;

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

            quickobj.close();

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

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

            if (ej.isNullOrUndefined(args.appointment))

            $("#resource").val(args.resources.text); // Here the resource value are displayed while double clicking the cell

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

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

                var roomValue = ej.DataManager(this.res1).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"]; // This query is used to take the resource name based on the resource id in the appointment

                $("#resource").val(roomValue); // Here the resource value are displayed while double clicking the appointment

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

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

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

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

            }

            else

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

<code>


Regards,
Karthigeyan.