jQWidgets Forums

This topic contains 5 replies, has 4 voices, and was last updated by tassilo-k 6 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Need help customizing the appointment dialog Posts

March 15, 2016 at 9:10 pm Need help customizing the appointment dialog #82504

Participant

Getting a bit frustrated with the dialog popup.

I understand there are examples that show how to create a customized print view and hide certain elements of the default appointment dialog but i need to edit the dialog further and can’t figure out how.

What i’m looking to do is either load a custom jqxWindow INSTEAD of the default dialog or learn how to update the default dialog to include my own custom fields. It seems like i can only hide the default fields. What if i want to add or replace fields or change the wording in the title bar on that popup?

I see you can set the scheduler editFlag to false to disable but i still want the events to fire, i just want to replace them with my own custom fields. Setting the flag to false seems to prevent anything from happening on double click of cells.

I have been able to use $('#scheduler').jqxScheduler('closeDialog'); in the editDialogOpen function to keep it from opening but it seems buggy when i try to open my own window instead: $('#scheduleWindow').jqxWindow('open');

Any detailed direction you can provide on this would be appreciated!

Here is where my code is at:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id='allhtml'>
    <head>
        <?php include '../scripts/ie_menu.php'; ?>
        <link rel="stylesheet" href="../scripts/JQwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../scripts/JQwidgets/jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
        <style>
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
        <script src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxcore.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxbuttons.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxscrollbar.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxdata.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxdate.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxscheduler.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxscheduler.api.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxdatetimeinput.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxmenu.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxcalendar.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxtooltip.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxwindow.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxcheckbox.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxlistbox.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxdropdownlist.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxnumberinput.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxradiobutton.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/jqxinput.js"></script>
           <script type="text/javascript" src="../scripts/JQwidgets/jqwidgets/globalization/globalize.js"></script>
        <script>
        $(document).ready(function () {
          $('#scheduleWindow').jqxWindow({
              width: 600,
              height: 200,
              resizable: false,
              isModal: true,
              autoOpen: false,
          });

                      var source =
                      {
                          dataType: 'json',
                          dataFields: [
                              { name: 'id', type: 'string' },
                              { name: 'woID', type: 'string' },
                              { name: 'woNum', type: 'string' },
                              { name: 'calendar', type: 'string' },
                              { name: 'operatorID', type: 'string' },
                              { name: 'startDate', type: 'date', format: "yyyy-MM-dd HH:mm" },
                              { name: 'endDate', type: 'date', format: "yyyy-MM-dd HH:mm" }
                          ],
                          id: 'id',
                          url: 'getschedule.php'
                      };
                  var adapter = new $.jqx.dataAdapter(source);
                  $("#scheduler").jqxScheduler({
                      date: new $.jqx.date(2016, 03, 14),
                      width: '95%',
                      height: '90%',
                      source: adapter,
                      view: 'weekView',
                      showLegend: true,
                      editDialogOpen: function (dialog, fields, editAppointment) {
                          console.log('editDialogOpen');
                          console.log(fields);
                          //$('#scheduler').jqxScheduler('closeDialog');
                          //$('#scheduleWindow').jqxWindow('open');
                        },
                      editDialogCreate: function (dialog, fields, editAppointment) {
                          console.log('editDialogCreate');
                          //$('#scheduler').jqxScheduler('closeDialog');
                          //$('#scheduleWindow').jqxWindow('open');
                        },
                      ready: function () {
                          $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                      },
                      resources:
                      {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source:  new $.jqx.dataAdapter(source)
                      },
                      appointmentDataFields:
                      {
                          from: "startDate",
                          to: "endDate",
                          id: "id",
                          subject: "woNum",
                          resourceId: "calendar"
                      },
                      views:
                      [
                        {type: 'dayView'},
                        { type: 'weekView'},
                        { type: 'monthView'}
                      ]
                  });
              });

        </script>
        <style>
            .jqx-grid-cell {
                font-size:11px;

            }

        </style>
    </head>
    <body style='background-color:#f7f7f7;font-size:11px;'>
        <div style='width:100%;'>
        <h4 style='text-align:left;float:left;font-size:16px;width:150px;display:inline;padding:0px;margin:0px;width:50%;padding-bottom:30px;'>Work Order Scheduler</h4>
      </div>
          <div id="scheduler" class="scheduler"></div>
          <div id='scheduleWindow'>
              <div id="scheduleWindowHeader">
                  <span id="captureContainer" style="float: left; font-weight: bold">Schedule Work Order</span>
              </div>
              <div id="schedulerWindowContent" style="overflow: hidden; padding-left: 10px; padding-top: 10px;background-color:#f7f7f7;">
                  Please select or enter a reason for cancelling this document:<br/><br/>
                  <div class='dropdown_text editable cancelReason_text' id="cancelReason_text"></div><br/>
                  <input class='input_text editable od_text' type="text" id="customCancelReason"/><br/>

                  <center style='padding-top:20px;'><input type="button" value="Save..." id='cancelButton' /></center>
              </div>
          </div>
    </body>
</html>

March 16, 2016 at 6:49 am Need help customizing the appointment dialog #82508

Peter Stoev

Keymaster

Hi mrallaris,

You cannot do this. You can either disable our dialog and create a custom dialog or customize it. You cannot have the events of our dialog raised and call “close” function within “open” functions and vice versa.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 16, 2016 at 3:12 pm Need help customizing the appointment dialog #82540

mrallaris

Participant

Thanks Peter,

Based on what you’re saying i’d like to know is there a way via the ‘customize it’ route that i can:

– swap out the Subject input field (for example) with a jqx dropdown field that gets populated by an ajax call?
– add a custom field that is not in the current template?

And if so, are there code examples somewhere on jqwidgets.com for this?

March 16, 2016 at 3:36 pm Need help customizing the appointment dialog #82541

Peter Stoev

Keymaster

All Scheduler examples are on: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/index.htm. It’s shown how to hide fields here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-edit-dialog.htm?light. It’s also shown how to add new fields. If you want to create jqxDropDownList, then you will have to add a DIV tag after the subject input, hide the subject input and initialize jqxDropDownList widget from it. Then bind to jqxDropDownList events and synchronize it with the hidden subject input.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 31, 2018 at 6:50 am Need help customizing the appointment dialog #102566

soumenpapai

Participant

How can i disable your dialog and show my custome dialog?

January 26, 2019 at 1:47 pm Need help customizing the appointment dialog #103698

tassilo-k

Participant

If you want to create jqxDropDownList, then you will have to add a DIV tag after the subject input, hide the subject input and initialize jqxDropDownList widget from it. Then bind to jqxDropDownList events and synchronize it with the hidden subject input.

Hey Peter

can you make a short code sample about that?

Best Regards
Tassilo

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.