jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Scheduler, Scheduler, Scheduler Control, Scheduler Component, Scheduling, Javascript Scheduler, Angular Scheduler, Scheduler Events, Schedulers, Scheduler Appointments" /> <meta name="description" content="This page represents the help documentation of the jqxDropDownList widget." /> <title>jqxScheduler API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>appointmentOpacity</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the appointments opacity. </p> <h4>Code example</h4> <p> Set the <code>appointmentOpacity</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({ appointmentOpacity: 0.7 }); </code></pre> <p> Get the <code>appointmentOpacity</code> property. </p> <pre><code>var appointmentOpacity = $('#jqxScheduler').jqxScheduler('appointmentOpacity');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-appointmentopacity-property">appointmentOpacity is set to 0.7</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>appointmentsMinHeight</span> </td> <td> <span>Number</span> </td> <td>18 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the minimum height of appointments in the all day area, month view and timeline views. </p> <h4>Code example</h4> <p> Set the <code>appointmentsMinHeight</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({ appointmentsMinHeight: 30 }); </code></pre> <p> Get the <code>appointmentsMinHeight</code> property. </p> <pre><code>var appointmentsMinHeight = $('#jqxScheduler').jqxScheduler('appointmentsMinHeight');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-appointmentsminheight-property">appointmentsMinHeight is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>appointmentDataFields</span> </td> <td> <span>Object</span> </td> <td> <pre><code> { allDay: "allDay", background: "background", borderColor: "borderColor", color: "color", description: "description", draggable: "draggable", from: "from", hidden: "hidden", id: "id", location: "location", recurrencePattern: "recurrencePattern", recurrenceException: "recurrenceException", resizable: "resizable", resourceId: "resourceId", readOnly: "readOnly", subject: "subject", style: "style", status: "status", to: "to", tooltip: "tooltip", timeZone: "timeZone" } </code></pre> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the appointments data fields. A data field should match a field defined in the dataAdapter's source object. For example: If your have a data field called "start" in your source object, you should add 'from: "start"' in the appointmentDataFields definition. <ul> <li>allDay - boolean field. Defines whether the appointment is all day appointment.</li> <li>background - string field. Expects Hex string. Defines the appointment's background.</li> <li>borderColor - string field. Expects Hex string. Defines the appointment's border color.</li> <li>color - string field. Expects Hex string. Defines the appointment's text color.</li> <li>description - string field. Defines the appointment's description.</li> <li>draggable - boolean field. Defines whether the user can drag the appointment.</li> <li>from - jqxDate field. Defines the appointment's start.</li> <li>hidden - boolean field. Defines whether the appointment is displayed.</li> <li>id - string/number field. Defines the Id of the appointment.</li> <li>location - string field. Defines the appointment's location.</li> <li>recurrencePattern - string field. Defines the appointment's recurrence rule. Ex: "FREQ=DAILY;". List of supported keywords: <ul> <li>FREQ - "DAILY" / "WEEKLY" / "MONTHLY" / "YEARLY". The FREQ rule part identifies the type of recurrence rule. This rule part MUST be specified in the recurrence rule.</li> <li>COUNT - Number. The Count rule part defines the number of occurrences at which to range-bound the recurrence.</li> <li>UNTIL - String like "UNTIL=20160919T210000Z". The UNTIL rule part defines a date-time value where the recurrence ends.</li> <li>BYDAY - String like "MO,TU". The BYDAY rule part specifies a COMMA character (US-ASCII decimal 44) separated list of days of the week; MO indicates Monday; TU indicates Tuesday; WE indicates Wednesday; TH indicates Thursday; FR indicates Friday; SA indicates Saturday; SU indicates Sunday. Each BYDAY value can also be preceded by a positive (+n) or negative (-n) integer. If present, this indicates the nth occurrence of the specific day within the MONTHLY or YEARLY RRULE. For example, within a MONTHLY rule, +1MO (or simply 1MO) represents the first Monday within the month, whereas -1MO represents the last Monday of the month.</li> <li>BYMONTHDAY - String like 15, 30. The BYMONTHDAY rule part specifies a COMMA character (ASCII decimal 44) separated list of days of the month. Valid values are 1 to 31</li> <li>BYMONTH - Number like 1. The BYMONTH rule part specifies a month of the year. Valid values are 1 to 12.</li> <li>INTERVAL - Number like 1. The INTERVAL rule part contains a positive integer representing how often the recurrence rule repeats. The default value is "1",</li> </ul> Examples: "FREQ=WEEKLY;BYDAY=MO,WE", "FREQ=MONTHLY;BYMONTHDAY=10,15;COUNT=20", "FREQ=DAILY;INTERVAL=3;COUNT=10", "FREQ=MONTHLY;BYDAY=-2FR;COUNT=7", "FREQ=YEARLY;COUNT=30;BYMONTH=3" </li> <li>recurrenceException - string field. Defines the exceptions of the recurrence rule. The bound value should be a string or comma separated list of Date strings. Example: "2016-11-24 09:00:00,2016-11-26 12:00:00" </li> <li>resizable - boolean field. Defines whether the user can resize the appointment.</li> <li>resourceId - string/number field. Defines the appointment's resource.</li> <li>readOnly - boolean field. Defines whether the appointment is editable.</li> <li>subject - string field. Defines the appointment's subject.</li> <li>style - string field. Expects Hex string. Defines the appointment's style. When defined it sets the background, border color and text color of the appointment.</li> <li>status - string field. Defines the appointment's status. See the statuses property for available statuses.</li> <li>to - jqxDate field. Defines the appointment's end.</li> <li>tooltip - string field. Defines the appointment's tooltip displayed on mouse hover.</li> <li>timeZone - string field. Defines the appointment's time zone. See timeZones for the list of timeZones.</li> </ul> </p> <h4>Code example </h4> <p> Set the <code>appointmentDataFields</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", style: "style", resourceId: "calendar" } }); </code></pre> <p> Get the <code>appointmentDataFields</code> property. </p> <pre><code>var appointmentDataFields = $('#jqxScheduler').jqxScheduler('appointmentDataFields');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-appointmentdatafields-property">appointmentDataFields is set to custom object.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>appointmentTooltips</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether Scheduler appointments are with tooltips enabled. </p> <h4>Code example </h4> <p> Set the <code>appointmentTooltips</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({ appointmentTooltips: true }); </code></pre> <p> Get the <code>appointmentTooltips</code> property. </p> <pre><code>var appointmentTooltips = $('#jqxScheduler').jqxScheduler('appointmentTooltips');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-appointmenttooltips-property">appointmentTooltips is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>columnsHeight</span> </td> <td> <span>Number</span> </td> <td>30 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Schedulers' columns height. </p> <h4>Code example </h4> <p> Set the <code>columnsHeight</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({ columnsHeight: 35 }); </code></pre> <p> Get the <code>columnsHeight</code> property. </p> <pre><code>var columnsHeight = $('#jqxScheduler').jqxScheduler('columnsHeight');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-columnsheight-property">columnsHeight is set to 40</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>contextMenu</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the Scheduler's context menu is enabled. </p> <h4>Code example </h4> <p> Set the <code>contextMenu</code> property. </p> <pre><code>$("#jqxScheduler").jqxScheduler({ contextMenu: false }); </code></pre> <p> Get the <code>contextMenu</code> property. </p> <pre><code>var contextMenu = $('#jqxScheduler').jqxScheduler('contextMenu');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-contextmenu-property">contextMenu is set false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>contextMenuOpen</span> </td> <td> <span>Function</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a function called when the context menu is opened. </p> <h4>Code example </h4> <p> Set the <code>contextMenuOpen</code> property. </p> <pre style='width: 850px; max-width: 850px; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/demos.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdata.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdate.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscheduler.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscheduler.api.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdatetimeinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxmenu.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcalendar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxtooltip.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxwindow.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxlistbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdropdownlist.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxnumberinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxradiobutton.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/globalization/globalize.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript"</span>></span><div /> $(document).ready(function () {<div /> var appointments = new Array();<div /><div /> var appointment1 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id1"</span>,<div /> description: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"George brings projector for presentations."</span>,<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Quarterly Project Review Meeting"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 1"</span>,<div /> start: new Date(2016, 10, 23, 9, 0, 0),<div /> end: new Date(2016, 10, 23, 16, 0, 0)<div /> }<div /><div /> var appointment2 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id2"</span>,<div /> description: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"IT Group Mtg."</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 2"</span>,<div /> start: new Date(2016, 10, 24, 10, 0, 0),<div /> end: new Date(2016, 10, 24, 15, 0, 0)<div /> }<div /><div /> var appointment3 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id3"</span>,<div /> description: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Course Social Media"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 3"</span>,<div /> start: new Date(2016, 10, 27, 11, 0, 0),<div /> end: new Date(2016, 10, 27, 13, 0, 0)<div /> }<div /><div /> var appointment4 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id4"</span>,<div /> description: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"New Projects Planning"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 2"</span>,<div /> start: new Date(2016, 10, 23, 16, 0, 0),<div /> end: new Date(2016, 10, 23, 18, 0, 0)<div /> }<div /><div /> var appointment5 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id5"</span>,<div /> description: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Interview with James"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 1"</span>,<div /> start: new Date(2016, 10, 25, 15, 0, 0),<div /> end: new Date(2016, 10, 25, 17, 0, 0)<div /> }<div /><div /> var appointment6 = {<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id6"</span>,<div /> description: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Interview with Nancy"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Room 4"</span>,<div /> start: new Date(2016, 10, 26, 14, 0, 0),<div /> end: new Date(2016, 10, 26, 16, 0, 0)<div /> }<div /> appointments.push(appointment1);<div /> appointments.push(appointment2);<div /> appointments.push(appointment3);<div /> appointments.push(appointment4);<div /> appointments.push(appointment5);<div /> appointments.push(appointment6);<div /><div /><div /> // prepare the data<div /> var source =<div /> {<div /> dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"array"</span>,<div /> dataFields: [<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'string'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'description', type: 'string'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'location', type: 'string'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'subject', type: 'string'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'calendar', type: 'string'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'start', type: 'date'</span> },<div /> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'end', type: 'date'</span> }<div /> ],<div /> id: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id'</span>,<div /> localData: appointments<div /> };<div /> var adapter = new $.jqx.dataAdapter(source);<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler({<div /> date: new $.jqx.date(2016, 11, 23),<div /> width: 850,<div /> height: 600,<div /> source: adapter,<div /> view: 1,<div /> showLegend: true,<div /> /**<div /> * called when the context menu is created.<div /> * @param {Object} menu - jqxMenu's jQuery object.<div /> * @param {Object} settings - Object with the menu's initialization settings.<div /> */<div /> contextMenuCreate: function(menu, settings)<div /> {<div /> var source = settings.source;<div /> source.push({ id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"delete", label: "Delete Appointment"</span> });<div /> source.push({<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"status", label: "Set Status"</span>, items:<div /> [<div /> { label: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Free", id: "free"</span> },<div /> { label: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Out of Office", id: "outOfOffice"</span> },<div /> { label: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Tentative", id: "tentative"</span> },<div /> { label: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Busy", id: "busy"</span> }<div /> ]<div /> });<div /> },<div /> /**<div /> * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.<div /> * @param {Object} menu - jqxMenu's jQuery object.<div /> * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.<div /> * @param {jQuery.Event Object} the jqxMenu's itemclick event object.<div /> */<div /> contextMenuItemClick: function (menu, appointment, event)<div /> {<div /> var args = event.args;<div /> switch (args.id) {<div /> case <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"delete"</span>:<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'deleteAppointment'</span>, appointment.id);<div /> return true;<div /> case <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"free"</span>:<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'setAppointmentProperty', appointment.id, 'status', 'free'</span>);<div /> return true;<div /> case <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"outOfOffice"</span>:<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'setAppointmentProperty', appointment.id, 'status', 'outOfOffice'</span>);<div /> return true;<div /> case <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"tentative"</span>:<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'setAppointmentProperty', appointment.id, 'status', 'tentative'</span>);<div /> return true;<div /> case <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"busy"</span>:<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'setAppointmentProperty', appointment.id, 'status', 'busy'</span>);<div /> return true;<div /> }<div /> },<div /> /**<div /> * called when the menu is opened.<div /> * @param {Object} menu - jqxMenu's jQuery object.<div /> * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.<div /> * @param {jQuery.Event Object} the open event.<div /> */<div /> contextMenuOpen: function (menu, appointment, event) {<div /><div /> if (!appointment) {<div /> menu.jqxMenu(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'hideItem', 'delete'</span>);<div /> menu.jqxMenu(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'hideItem', 'status'</span>);<div /> }<div /> else {<div /> menu.jqxMenu(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'showItem', 'delete'</span>);<div /> menu.jqxMenu(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'showItem', 'status'</span>);<div /> }<div /> },<div /> /**<div /> * called when the menu is closed.<div /> * @param {Object} menu - jqxMenu's jQuery object.<div /> * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.<div /> * @param {jQuery.Event Object} the close event.<div /> */<div /> contextMenuClose: function (menu, appointment, event) {<div /> },<div /> ready: function () {<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#scheduler"</span>).jqxScheduler(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'ensureAppointmentVisible', 'id1'</span>);<div /> },<div /> resources:<div /> {<div /> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme02"</span>,<div /> dataField: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"calendar"</span>,<div /> source: new $.jqx.dataAdapter(source)<div /> },<div /> appointmentDataFields:<div /> {<div /> from: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"start"</span>,<div /> to: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"end"</span>,<div /> id: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id"</span>,<div /> description: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"description"</span>,<div /> location: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"place"</span>,<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"subject"</span>,<div /> resourceId: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"calendar"</span><div /> },<div /> views:<div /> [<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'dayView'</span>,<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'weekView'</span>,<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'monthView'</span><div /> ]<div /> });<div /> });<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div id=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheduler"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span><div /><div /></pre> <p> Get the <code>contextMenuOpen</code> property. </p> <pre><code>var contextMenuOpen = $('#jqxScheduler').jqxScheduler('contextMenuOpen');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-contextmenu-callbacks">contextMenuOpen is set to custom function.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>contextMenuClose</span> </td> <td> <span>Function</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a function called when the context menu is closed. </p> <h4>Code example </h4> <p> Set the <code>contextMenuClose</code> property. </p> <pre style='width: 850px; max-width: 850px; margin: 0px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html lang=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"en"</span>></span><div /><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><link rel=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css"</span> /></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../scripts/demos.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcore.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxbuttons.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdata.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdate.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscheduler.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxscheduler.api.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdatetimeinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxmenu.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcalendar.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxtooltip.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxwindow.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxlistbox.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxdropdownlist.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxnumberinput.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><script type=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"text/javascript" src="../../../../jqwidgets/jqxradiobutton.js"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></script></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><s