taffy-coustom-ui
Version:
4,759 lines • 505 kB
HTML
<!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;"><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 jqxAppointment 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 jqxAppointment 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 jqxAppointment 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>contextMenuClose</code> property.
</p>
<pre><code>var contextMenuClose = $('#jqxScheduler').jqxScheduler('contextMenuClose');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-contextmenu-callbacks">contextMenuClose is set to custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>contextMenuItemClick</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 a context menu item is clicked.
</p>
<h4>Code example
</h4>
<p>
Set the <code>contextMenuItemClick</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 jqxAppointment 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 jqxAppointment 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 jqxAppointment 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>contextMenuItemClick</code> property.
</p>
<pre><code>var contextMenuItemClick = $('#jqxScheduler').jqxScheduler('contextMenuItemClick');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-contextmenu-callbacks">contextMenuItemClick is set to custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>contextMenuCreate</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 created.
</p>
<h4>Code example
</h4>
<p>
Set the <code>contextMenuCreate</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 jqxAppointment 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 jqxAppointment 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 jqxAppointment 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>contextMenuCreate</code> property.
</p>
<pre><code>var contextMenuCreate = $('#jqxScheduler').jqxScheduler('contextMenuCreate');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-contextmenu-callbacks">contextMenuCreate is set to custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>changedAppointments</span>
</td>
<td>
<span>Array</span>
</td>
<td>[]
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets an array with newly added, deleted or updated appointments. Each element in the Array is an Object which has:
<ul>
<li>type - "Update", "Delete", "Add".</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Get the <code>changedAppointments</code> property.
</p>
<pre><code>var changedAppointments = $('#jqxScheduler').jqxScheduler('changedAppointments');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-changedappointments-property">gets the changedAppointments.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>disabled</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 whether the Scheduler is disabled.
</p>
<h4>Code example
</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ disabled: true });
</code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxScheduler').jqxScheduler('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-disabled-property">disabled is set true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>date</span>
</td>
<td>
<span>jqxDate</span>
</td>
<td>new $.jqx.date('todayDate')
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's Date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.
</p>
<h4>Code example
</h4>
<p>
Set the <code>date</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ date: new $.jqx.date('todayDate') });
</code></pre>
<p>
Get the <code>date</code> property.
</p>
<pre><code>var date = $('#jqxScheduler').jqxScheduler('date');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-date-property">date is set current date.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>dayNameFormat</span>
</td>
<td>
<span>string</span>
</td>
<td>'full'
</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 day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.
</p>
<h4>Code example
</h4>
<p>
Set the <code>dayNameFormat</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ dayNameFormat: 'abbr') });
</code></pre>
<p>
Get the <code>dayNameFormat</code> property.
</p>
<pre><code>var dayNameFormat = $('#jqxScheduler').jqxScheduler('dayNameFormat');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-daynameformat-property">dayNameFormat is set to 'abbr'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>enableHover</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 cells hover is enabled.
</p>
<h4>Code example
</h4>
<p>
Set the <code>enableHover</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ enableHover: false) });
</code></pre>
<p>
Get the <code>enableHover</code> property.
</p>
<pre><code>var enableHover = $('#jqxScheduler').jqxScheduler('enableHover');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-enablehover-property">enableHover is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>editDialog</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 Edit Dialog is enabled.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialog</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ editDialog: false) });
</code></pre>
<p>
Get the <code>editDialog</code> property.
</p>
<pre><code>var editDialog = $('#jqxScheduler').jqxScheduler('editDialog');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-editdialog-property">editDialog is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>editDialogDateTimeFormatString</span>
</td>
<td>
<span>String</span>
</td>
<td>"dd/MM/yyyy hh:mm tt"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is not allDay appointment.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogDateTimeFormatString</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ editDialogDateTimeFormatString: "dd/MM/yyyy hh:mm tt") });
</code></pre>
<p>
Get the <code>editDialogDateTimeFormatString</code> property.
</p>
<pre><code>var editDialogDateTimeFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateTimeFormatString');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-date-format-strings">editDialogDateTimeFormatString is set to "dd-MM-yyyy HH:mm"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>editDialogDateFormatString</span>
</td>
<td>
<span>String</span>
</td>
<td>"dd/MM/yyyy"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is allDay appointment.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogDateFormatString</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ editDialogDateFormatString: "dd/MM/yyyy") });
</code></pre>
<p>
Get the <code>editDialogDateFormatString</code> property.
</p>
<pre><code>var editDialogDateFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateFormatString');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-date-format-strings">editDialogDateFormatString is set to "dd/MM/yyyy"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>editDialogOpen</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 Scheduler's Edit Dialog is opened.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogOpen</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;">"Fashion Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 15, 9, 0, 0),<div /> end: new Date(2016, 10, 18, 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;">"Cloud Data Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 20, 10, 0, 0),<div /> end: new Date(2016, 10, 22, 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;">"Digital Media Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 23, 11, 0, 0),<div /> end: new Date(2016, 10, 28, 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;">"Modern Software Development Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 10, 16, 0, 0),<div /> end: new Date(2016, 10, 12, 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;">"Marketing Future Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 5, 15, 0, 0),<div /> end: new Date(2016, 10, 6, 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;">"Future Computing"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 13, 14, 0, 0),<div /> end: new Date(2016, 10, 20, 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 /><div /> var printButton = null;<div /><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: 2,<div /> showLegend: true,<div /> // called when the dialog is created.<div /> editDialogCreate: function (dialog, fields, editAppointment) {<div /> // hide repeat option<div /> fields.repeatContainer.hide();<div /> // hide status option<div /> fields.statusContainer.hide();<div /> // hide timeZone option<div /> fields.timeZoneContainer.hide();<div /> // hide color option<div /> fields.colorContainer.hide();<div /><div /> fields.subjectLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title"</span>);<div /> fields.locationLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Where"</span>);<div /> fields.fromLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Start"</span>);<div /> fields.toLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"End"</span>);<div /> fields.resourceLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Calendar"</span>);<div /><div /> // add custom print button.<div /> printButton = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><button style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-left: 5px; float:right;'</span>></span>Print<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></button></span>"</span>);<div /> fields.buttons.append(printButton);<div /> printButton.jqxButton({ theme: this.theme });<div /> printButton.click(function () {<div /> var appointment = editAppointment;<div /> if (!appointment)<div /> return;<div /><div /> var appointmentContent =<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><table class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'printTable'</span>></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Title<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.subject.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Start<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.from.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>End<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.to.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Where<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.location.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Calendar<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.resource.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span><div /> + <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></table></span>"</span>;<div /><div /> var newWindow = window.open(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', '', 'width=800, height=500'</span>),<div /> document = newWindow.document.open(),<div /> pageContent =<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><meta charset=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"utf-8"</span> /></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><title></span>jQWidgets Scheduler<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><style></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border-color: #aaa;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable .label {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-weight: bold;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable td{\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'padding: 4px 3px;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border: 1px solid #DDD;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical-align: top;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></style></span>'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span>\n' + appointmentContent + '\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span>\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span>'</span>;<div /> document.write(pageContent);<div /> document.close();<div /> newWindow.print();<div /> });<div /> },<div /> /**<div /> * called when the dialog is opened. Returning true as a result disables the built-in handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogOpen: function (dialog, fields, editAppointment) {<div /> if (!editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: true });<div /> }<div /> else if (editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: false });<div /> }<div /> },<div /> /**<div /> * called when the dialog is closed.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogClose: function (dialog, fields, editAppointment) {<div /> },<div /> /**<div /> * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> * @param {jQuery.Event Object} the keyDown event.<div /> */<div /> editDialogKeyDown: function (dialog, fields, editAppointment, event) {<div /><div /> },<div /> resources:<div /> {<div /> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme01"</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>editDialogOpen</code> property.
</p>
<pre><code>var editDialogOpen = $('#jqxScheduler').jqxScheduler('editDialogOpen');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-">editDialogOpen is set to custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>editDialogCreate</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 Scheduler's Edit Dialog is created.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogCreate</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;">"Fashion Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 15, 9, 0, 0),<div /> end: new Date(2016, 10, 18, 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;">"Cloud Data Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 20, 10, 0, 0),<div /> end: new Date(2016, 10, 22, 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;">"Digital Media Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 23, 11, 0, 0),<div /> end: new Date(2016, 10, 28, 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;">"Modern Software Development Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 10, 16, 0, 0),<div /> end: new Date(2016, 10, 12, 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;">"Marketing Future Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 5, 15, 0, 0),<div /> end: new Date(2016, 10, 6, 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;">"Future Computing"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 13, 14, 0, 0),<div /> end: new Date(2016, 10, 20, 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 /><div /> var printButton = null;<div /><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: 2,<div /> showLegend: true,<div /> // called when the dialog is created.<div /> editDialogCreate: function (dialog, fields, editAppointment) {<div /> // hide repeat option<div /> fields.repeatContainer.hide();<div /> // hide status option<div /> fields.statusContainer.hide();<div /> // hide timeZone option<div /> fields.timeZoneContainer.hide();<div /> // hide color option<div /> fields.colorContainer.hide();<div /><div /> fields.subjectLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title"</span>);<div /> fields.locationLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Where"</span>);<div /> fields.fromLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Start"</span>);<div /> fields.toLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"End"</span>);<div /> fields.resourceLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Calendar"</span>);<div /><div /> // add custom print button.<div /> printButton = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><button style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-left: 5px; float:right;'</span>></span>Print<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></button></span>"</span>);<div /> fields.buttons.append(printButton);<div /> printButton.jqxButton({ theme: this.theme });<div /> printButton.click(function () {<div /> var appointment = editAppointment;<div /> if (!appointment)<div /> return;<div /><div /> var appointmentContent =<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><table class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'printTable'</span>></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Title<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.subject.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Start<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.from.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>End<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.to.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Where<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.location.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Calendar<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.resource.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span><div /> + <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></table></span>"</span>;<div /><div /> var newWindow = window.open(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', '', 'width=800, height=500'</span>),<div /> document = newWindow.document.open(),<div /> pageContent =<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><meta charset=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"utf-8"</span> /></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><title></span>jQWidgets Scheduler<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><style></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border-color: #aaa;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable .label {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-weight: bold;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable td{\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'padding: 4px 3px;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border: 1px solid #DDD;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical-align: top;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></style></span>'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span>\n' + appointmentContent + '\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span>\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span>'</span>;<div /> document.write(pageContent);<div /> document.close();<div /> newWindow.print();<div /> });<div /> },<div /> /**<div /> * called when the dialog is opened. Returning true as a result disables the built-in handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogOpen: function (dialog, fields, editAppointment) {<div /> if (!editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: true });<div /> }<div /> else if (editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: false });<div /> }<div /> },<div /> /**<div /> * called when the dialog is closed.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogClose: function (dialog, fields, editAppointment) {<div /> },<div /> /**<div /> * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> * @param {jQuery.Event Object} the keyDown event.<div /> */<div /> editDialogKeyDown: function (dialog, fields, editAppointment, event) {<div /><div /> },<div /> resources:<div /> {<div /> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme01"</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>editDialogCreate</code> property.
</p>
<pre><code>var editDialogCreate = $('#jqxScheduler').jqxScheduler('editDialogCreate');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-">editDialogCreate is set to custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>editDialogKeyDown</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 Scheduler's Edit Dialog is opened and is on focus and key is pressed.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogKeyDown</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;">"Fashion Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 15, 9, 0, 0),<div /> end: new Date(2016, 10, 18, 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;">"Cloud Data Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 20, 10, 0, 0),<div /> end: new Date(2016, 10, 22, 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;">"Digital Media Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 23, 11, 0, 0),<div /> end: new Date(2016, 10, 28, 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;">"Modern Software Development Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 10, 16, 0, 0),<div /> end: new Date(2016, 10, 12, 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;">"Marketing Future Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 5, 15, 0, 0),<div /> end: new Date(2016, 10, 6, 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;">"Future Computing"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 13, 14, 0, 0),<div /> end: new Date(2016, 10, 20, 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 /><div /> var printButton = null;<div /><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: 2,<div /> showLegend: true,<div /> // called when the dialog is created.<div /> editDialogCreate: function (dialog, fields, editAppointment) {<div /> // hide repeat option<div /> fields.repeatContainer.hide();<div /> // hide status option<div /> fields.statusContainer.hide();<div /> // hide timeZone option<div /> fields.timeZoneContainer.hide();<div /> // hide color option<div /> fields.colorContainer.hide();<div /><div /> fields.subjectLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title"</span>);<div /> fields.locationLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Where"</span>);<div /> fields.fromLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Start"</span>);<div /> fields.toLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"End"</span>);<div /> fields.resourceLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Calendar"</span>);<div /><div /> // add custom print button.<div /> printButton = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><button style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-left: 5px; float:right;'</span>></span>Print<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></button></span>"</span>);<div /> fields.buttons.append(printButton);<div /> printButton.jqxButton({ theme: this.theme });<div /> printButton.click(function () {<div /> var appointment = editAppointment;<div /> if (!appointment)<div /> return;<div /><div /> var appointmentContent =<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><table class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'printTable'</span>></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Title<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.subject.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Start<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.from.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>End<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.to.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Where<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.location.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Calendar<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.resource.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span><div /> + <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></table></span>"</span>;<div /><div /> var newWindow = window.open(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', '', 'width=800, height=500'</span>),<div /> document = newWindow.document.open(),<div /> pageContent =<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><meta charset=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"utf-8"</span> /></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><title></span>jQWidgets Scheduler<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><style></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border-color: #aaa;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable .label {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-weight: bold;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable td{\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'padding: 4px 3px;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border: 1px solid #DDD;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical-align: top;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></style></span>'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span>\n' + appointmentContent + '\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span>\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span>'</span>;<div /> document.write(pageContent);<div /> document.close();<div /> newWindow.print();<div /> });<div /> },<div /> /**<div /> * called when the dialog is opened. Returning true as a result disables the built-in handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogOpen: function (dialog, fields, editAppointment) {<div /> if (!editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: true });<div /> }<div /> else if (editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: false });<div /> }<div /> },<div /> /**<div /> * called when the dialog is closed.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogClose: function (dialog, fields, editAppointment) {<div /> },<div /> /**<div /> * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> * @param {jQuery.Event Object} the keyDown event.<div /> */<div /> editDialogKeyDown: function (dialog, fields, editAppointment, event) {<div /><div /> },<div /> resources:<div /> {<div /> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme01"</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>editDialogKeyDown</code> property.
</p>
<pre><code>var editDialogKeyDown = $('#jqxScheduler').jqxScheduler('editDialogKeyDown');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-">editDialogKeyDown is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>editDialogClose</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 Scheduler's Edit Dialog is closed.
</p>
<h4>Code example
</h4>
<p>
Set the <code>editDialogClose</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;">"Fashion Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 15, 9, 0, 0),<div /> end: new Date(2016, 10, 18, 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;">"Cloud Data Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 20, 10, 0, 0),<div /> end: new Date(2016, 10, 22, 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;">"Digital Media Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 23, 11, 0, 0),<div /> end: new Date(2016, 10, 28, 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;">"Modern Software Development Conference"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"West Coast Events"</span>,<div /> start: new Date(2016, 10, 10, 16, 0, 0),<div /> end: new Date(2016, 10, 12, 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;">"Marketing Future Expo"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Middle West Events"</span>,<div /> start: new Date(2016, 10, 5, 15, 0, 0),<div /> end: new Date(2016, 10, 6, 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;">"Future Computing"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"East Coast Events"</span>,<div /> start: new Date(2016, 10, 13, 14, 0, 0),<div /> end: new Date(2016, 10, 20, 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 /><div /> var printButton = null;<div /><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: 2,<div /> showLegend: true,<div /> // called when the dialog is created.<div /> editDialogCreate: function (dialog, fields, editAppointment) {<div /> // hide repeat option<div /> fields.repeatContainer.hide();<div /> // hide status option<div /> fields.statusContainer.hide();<div /> // hide timeZone option<div /> fields.timeZoneContainer.hide();<div /> // hide color option<div /> fields.colorContainer.hide();<div /><div /> fields.subjectLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Title"</span>);<div /> fields.locationLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Where"</span>);<div /> fields.fromLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Start"</span>);<div /> fields.toLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"End"</span>);<div /> fields.resourceLabel.html(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Calendar"</span>);<div /><div /> // add custom print button.<div /> printButton = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><button style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin-left: 5px; float:right;'</span>></span>Print<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></button></span>"</span>);<div /> fields.buttons.append(printButton);<div /> printButton.jqxButton({ theme: this.theme });<div /> printButton.click(function () {<div /> var appointment = editAppointment;<div /> if (!appointment)<div /> return;<div /><div /> var appointmentContent =<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><table class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'printTable'</span>></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Title<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.subject.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Start<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.from.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>End<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.to.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Where<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.location.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><tr></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'label'</span>></span>Calendar<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><td></span>" + fields.resource.val() + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></td></span>"</span> +<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></tr></span>"</span><div /> + <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></table></span>"</span>;<div /><div /> var newWindow = window.open(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', '', 'width=800, height=500'</span>),<div /> document = newWindow.document.open(),<div /> pageContent =<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><!DOCTYPE html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><html></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><meta charset=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"utf-8"</span> /></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><title></span>jQWidgets Scheduler<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><style></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border-color: #aaa;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable .label {\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'font-weight: bold;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'.printTable td{\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'padding: 4px 3px;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'border: 1px solid #DDD;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'vertical-align: top;\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'}\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></style></span>'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></head></span>\n'</span> +<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><body></span>\n' + appointmentContent + '\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></body></span>\n<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></html></span>'</span>;<div /> document.write(pageContent);<div /> document.close();<div /> newWindow.print();<div /> });<div /> },<div /> /**<div /> * called when the dialog is opened. Returning true as a result disables the built-in handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogOpen: function (dialog, fields, editAppointment) {<div /> if (!editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: true });<div /> }<div /> else if (editAppointment && printButton) {<div /> printButton.jqxButton({ disabled: false });<div /> }<div /> },<div /> /**<div /> * called when the dialog is closed.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> */<div /> editDialogClose: function (dialog, fields, editAppointment) {<div /> },<div /> /**<div /> * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.<div /> * @param {Object} dialog - jqxWindow's jQuery object.<div /> * @param {Object} fields - Object with all widgets inside the dialog.<div /> * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.<div /> * @param {jQuery.Event Object} the keyDown event.<div /> */<div /> editDialogKeyDown: function (dialog, fields, editAppointment, event) {<div /><div /> },<div /> resources:<div /> {<div /> colorScheme: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"scheme01"</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>editDialogClose</code> property.
</p>
<pre><code>var editDialogClose = $('#jqxScheduler').jqxScheduler('editDialogClose');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-edit-dialog-">editDialogClose is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span106'>exportSettings</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the Data Export settings used by jqxScheduler when <code>exportData</code> is called. See also the <code>exportData</code> method.
</p>
List of parameters:
<ul>
<li>serverURL - determines the URL of the save-file.php.</li>
<li>characterSet - determines the char set.</li>
<li>fileName - determines the file's name. Set this to null if you want to export the data to a local variable.</li>
<li>dateTimeFormatString - determines the dates formatting in the exported file.</li>
<li>resourcesInMultipleICSFiles - determines whether multiple ICS files will be generated when the Scheduler has resources. Each file will include appointments only from a specific resource.</li>
</ul>
<h4>Code example</h4>
<p>
Set the <code>exportSettings</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({exportSettings: { serverURL: null, characterSet: null, fileName: "jqxScheduler"}});</code></pre>
<p>
Get the <code>exportSettings</code> property.
</p>
<pre><code>var exportSettings = $('#jqxScheduler').jqxScheduler('exportSettings');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-data-export">exportSettings is set to a custom object.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>600
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ height: 700});
</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxScheduler').jqxScheduler('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-height-property">height is set to 700</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>legendPosition</span>
</td>
<td>
<span>String</span>
</td>
<td>"bottom"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's legendPosition. Possible values: "top" and "bottom".
</p>
<h4>Code example
</h4>
<p>
Set the <code>legendPosition</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ legendPosition: 'top'});
</code></pre>
<p>
Get the <code>legendPosition</code> property.
</p>
<pre><code>var legendPosition = $('#jqxScheduler').jqxScheduler('legendPosition');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-legendposition-property">legendPosition is set to 'top'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>legendHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>34
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's legend height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>legendHeight</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ legendHeight: 40});
</code></pre>
<p>
Get the <code>legendHeight</code> property.
</p>
<pre><code>var legendHeight = $('#jqxScheduler').jqxScheduler('legendHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-legendheight-property">legendHeight is set to 40</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>localization</span>
</td>
<td>
<span>Object</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's localization.
</p>
Default Localization:
<pre><code>
{
// separator of parts of a date (e.g. '/' in 11/05/1955)
'/': "/",
// separator of parts of a time (e.g. ':' in 05:44 PM)
':': ":",
// the first day of the week (0 = Sunday, 1 = Monday, etc)
firstDay: 0,
days: {
// full day names
names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
// abbreviated day names
namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
// shortest day names
namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
},
months: {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
},
// AM and PM designators in one of these forms:
// The usual view, and the upper and lower case versions
// [standard,lowercase,uppercase]
// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
// null
AM: ["AM", "am", "AM"],
PM: ["PM", "pm", "PM"],
eras: [
// eras in reverse chronological order.
// name: the name of the era in this culture (e.g. A.D., C.E.)
// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
// offset: offset in years from gregorian calendar
{"name": "A.D.", "start": null, "offset": 0 }
],
twoDigitYearMax: 2029,
patterns: {
// short date pattern
d: "M/d/yyyy",
// long date pattern
D: "dddd, MMMM dd, yyyy",
// short time pattern
t: "h:mm tt",
// long time pattern
T: "h:mm:ss tt",
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
M: "MMMM dd",
// month/year pattern
Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
// formatting of dates in MySQL DataBases
ISO: "yyyy-MM-dd hh:mm:ss",
ISO2: "yyyy-MM-dd HH:mm:ss",
d1: "dd.MM.yyyy",
d2: "dd-MM-yyyy",
d3: "dd-MMMM-yyyy",
d4: "dd-MM-yy",
d5: "H:mm",
d6: "HH:mm",
d7: "HH:mm tt",
d8: "dd/MMMM/yyyy",
d9: "MMMM-dd",
d10: "MM-dd",
d11: "MM-dd-yyyy"
},
agendaViewString: "Agenda",
agendaAllDayString: "all day",
agendaDateColumn: "Date",
agendaTimeColumn: "Time",
agendaAppointmentColumn: "Appointment",
backString: "Back",
forwardString: "Forward",
toolBarPreviousButtonString: "previous",
toolBarNextButtonString: "next",
emptyDataString: "No data to display",
loadString: "Loading...",
clearString: "Clear",
todayString: "Today",
dayViewString: "Day",
weekViewString: "Week",
monthViewString: "Month",
timelineDayViewString: "Timeline Day",
timelineWeekViewString: "Timeline Week",
timelineMonthViewString: "Timeline Month",
loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",
editRecurringAppointmentDialogTitleString: "Edit Recurring Appointment",
editRecurringAppointmentDialogContentString: "Do you want to edit only this occurrence or the series?",
editRecurringAppointmentDialogOccurrenceString: "Edit Occurrence",
editRecurringAppointmentDialogSeriesString: "Edit The Series",
editDialogTitleString: "Edit Appointment",
editDialogCreateTitleString: "Create New Appointment",
contextMenuEditAppointmentString: "Edit Appointment",
contextMenuCreateAppointmentString: "Create New Appointment",
editDialogSubjectString: "Subject",
editDialogLocationString: "Location",
editDialogFromString: "From",
editDialogToString: "To",
editDialogAllDayString: "All day",
editDialogExceptionsString: "Exceptions",
editDialogResetExceptionsString: "Reset on Save",
editDialogDescriptionString: "Description",
editDialogResourceIdString: "Owner",
editDialogStatusString: "Status",
editDialogColorString: "Color",
editDialogColorPlaceHolderString: "Select Color",
editDialogTimeZoneString: "Time Zone",
editDialogSelectTimeZoneString: "Select Time Zone",
editDialogSaveString: "Save",
editDialogDeleteString: "Delete",
editDialogCancelString: "Cancel",
editDialogRepeatString: "Repeat",
editDialogRepeatEveryString: "Repeat every",
editDialogRepeatEveryWeekString: "week(s)",
editDialogRepeatEveryYearString: "year(s)",
editDialogRepeatEveryDayString: "day(s)",
editDialogRepeatNeverString: "Never",
editDialogRepeatDailyString: "Daily",
editDialogRepeatWeeklyString: "Weekly",
editDialogRepeatMonthlyString: "Monthly",
editDialogRepeatYearlyString: "Yearly",
editDialogRepeatEveryMonthString: "month(s)",
editDialogRepeatEveryMonthDayString: "Day",
editDialogRepeatFirstString: "first",
editDialogRepeatSecondString: "second",
editDialogRepeatThirdString: "third",
editDialogRepeatFourthString: "fourth",
editDialogRepeatLastString: "last",
editDialogRepeatEndString: "End",
editDialogRepeatAfterString: "After",
editDialogRepeatOnString: "On",
editDialogRepeatOfString: "of",
editDialogRepeatOccurrencesString: "occurrence(s)",
editDialogRepeatSaveString: "Save Occurrence",
editDialogRepeatSaveSeriesString: "Save Series",
editDialogRepeatDeleteString: "Delete Occurrence",
editDialogRepeatDeleteSeriesString: "Delete Series",
editDialogStatuses:
{
free: "Free",
tentative: "Tentative",
busy: "Busy",
outOfOffice: "Out of Office"
},
loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",
}
</code></pre>
<h4>Code example
</h4>
<p>
Set the <code>localization</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;"><title id=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Description'</span>></span>jqxScheduler first demo.<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></title></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" src="../../../../jqwidgets/globalization/globalize.culture.de-DE.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: "",<div /> location: "",<div /> subject: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Projektsitzung"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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 Gruppentreffen"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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;">"Soziale Treffen"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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;">"Projekte Planung"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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;">"Interveiw mit Jan"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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;">"Interveiw mit Alberta"</span>,<div /> calendar: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zimmer 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 /> showLegend: true,<div /> // called when the dialog is craeted.<div /> editDialogCreate: function (dialog, fields, editAppointment) {<div /> fields.timeZoneContainer.hide();<div /> },<div /> localization: {<div /> // separator of parts of a date (e.g. <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'/'</span> in 11/05/1955)<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'/'</span>: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"/"</span>,<div /> // separator of parts of a time (e.g. <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">':'</span> in 05:44 PM)<div /> <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">':'</span>: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">":"</span>,<div /> // the first day of the week (0 = Sunday, 1 = Monday, etc)<div /> firstDay: 1,<div /> days: {<div /> // full day names<div /> names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"</span>],<div /> // abbreviated day names<div /> namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"</span>],<div /> // shortest day names<div /> namesShort: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"</span>]<div /> },<div /><div /> months: {<div /> // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)<div /> names: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""</span>],<div /> // abbreviated month names<div /> namesAbbr: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""</span>]<div /> },<div /> // AM and PM designators in one of these forms:<div /> // The usual view, and the upper and lower case versions<div /> // [standard,lowercase,uppercase]<div /> // The culture does not use AM or PM (likely all standard date formats use 24 hour time)<div /> // null<div /> AM: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"AM", "am", "AM"</span>],<div /> PM: [<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"PM", "pm", "PM"</span>],<div /> eras: [<div /> // eras in reverse chronological order.<div /> // name: the name of the era in this culture (e.g. A.D., C.E.)<div /> // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.<div /> // offset: offset in years from gregorian calendar<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name": "A.D.", "start": null, "offset"</span>: 0 }<div /> ],<div /> twoDigitYearMax: 2029,<div /> patterns: {<div /> // short date pattern<div /> d: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"M/d/yyyy"</span>,<div /> // long date pattern<div /> D: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy"</span>,<div /> // short time pattern<div /> t: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"h:mm tt"</span>,<div /> // long time pattern<div /> T: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"h:mm:ss tt"</span>,<div /> // long date, short time pattern<div /> f: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy h:mm tt"</span>,<div /> // long date, long time pattern<div /> F: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dddd, MMMM dd, yyyy h:mm:ss tt"</span>,<div /> // month/day pattern<div /> M: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MMMM dd"</span>,<div /> // month/year pattern<div /> Y: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy MMMM"</span>,<div /> // S is a sortable format that does not vary by culture<div /> S: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"</span>,<div /> // formatting of dates in MySQL DataBases<div /> ISO: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy-MM-dd hh:mm:ss"</span>,<div /> ISO2: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"yyyy-MM-dd HH:mm:ss"</span>,<div /> d1: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd.MM.yyyy"</span>,<div /> d2: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MM-yyyy"</span>,<div /> d3: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MMMM-yyyy"</span>,<div /> d4: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd-MM-yy"</span>,<div /> d5: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"H:mm"</span>,<div /> d6: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm"</span>,<div /> d7: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"HH:mm tt"</span>,<div /> d8: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dd/MMMM/yyyy"</span>,<div /> d9: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MMMM-dd"</span>,<div /> d10: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MM-dd"</span>,<div /> d11: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"MM-dd-yyyy"</span><div /> },<div /> backString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Vorhergehende"</span>,<div /> forwardString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Nächster"</span>,<div /> toolBarPreviousButtonString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Vorhergehende"</span>,<div /> toolBarNextButtonString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Nächster"</span>,<div /> emptyDataString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Nokeine Daten angezeigt"</span>,<div /> loadString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Loading..."</span>,<div /> clearString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Löschen"</span>,<div /> todayString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Heute"</span>,<div /> dayViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Tag"</span>,<div /> weekViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Woche"</span>,<div /> monthViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Monat"</span>,<div /> timelineDayViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zeitleiste Day"</span>,<div /> timelineWeekViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zeitleiste Woche"</span>,<div /> timelineMonthViewString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zeitleiste Monat"</span>,<div /> loadingErrorMessage: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Die Daten werden noch geladen und Sie können eine Eigenschaft nicht festgelegt oder eine Methode aufrufen . Sie können tun, dass, sobald die Datenbindung abgeschlossen ist. jqxScheduler wirft die <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">' bindingComplete '</span> Ereignis, wenn die Bindung abgeschlossen ist."</span>,<div /> editRecurringAppointmentDialogTitleString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bearbeiten Sie wiederkehrenden Termin"</span>,<div /> editRecurringAppointmentDialogContentString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Wollen Sie nur dieses eine Vorkommen oder die Serie zu bearbeiten ?"</span>,<div /> editRecurringAppointmentDialogOccurrenceString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Vorkommen bearbeiten"</span>,<div /> editRecurringAppointmentDialogSeriesString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bearbeiten Die Serie"</span>,<div /> editDialogTitleString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Termin bearbeiten"</span>,<div /> editDialogCreateTitleString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Erstellen Sie Neuer Termin"</span>,<div /> contextMenuEditAppointmentString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Termin bearbeiten"</span>,<div /> contextMenuCreateAppointmentString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Erstellen Sie Neuer Termin"</span>,<div /> editDialogSubjectString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Subjekt"</span>,<div /> editDialogLocationString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ort"</span>,<div /> editDialogFromString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Von"</span>,<div /> editDialogToString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bis"</span>,<div /> editDialogAllDayString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Den ganzen Tag"</span>,<div /> editDialogExceptionsString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ausnahmen"</span>,<div /> editDialogResetExceptionsString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zurücksetzen auf Speichern"</span>,<div /> editDialogDescriptionString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Bezeichnung"</span>,<div /> editDialogResourceIdString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Kalender"</span>,<div /> editDialogStatusString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Status"</span>,<div /> editDialogColorString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Farbe"</span>,<div /> editDialogColorPlaceHolderString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Farbe wählen"</span>,<div /> editDialogTimeZoneString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Zeitzone"</span>,<div /> editDialogSelectTimeZoneString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Wählen Sie Zeitzone"</span>,<div /> editDialogSaveString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sparen"</span>,<div /> editDialogDeleteString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Löschen"</span>,<div /> editDialogCancelString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Abbrechen"</span>,<div /> editDialogRepeatString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Wiederholen"</span>,<div /> editDialogRepeatEveryString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Wiederholen alle"</span>,<div /> editDialogRepeatEveryWeekString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"woche(n)"</span>,<div /> editDialogRepeatEveryYearString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Jahr (en)"</span>,<div /> editDialogRepeatEveryDayString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Tag (e)"</span>,<div /> editDialogRepeatNeverString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Nie"</span>,<div /> editDialogRepeatDailyString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Täglich"</span>,<div /> editDialogRepeatWeeklyString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Wöchentlich"</span>,<div /> editDialogRepeatMonthlyString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Monatlich"</span>,<div /> editDialogRepeatYearlyString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Jährlich"</span>,<div /> editDialogRepeatEveryMonthString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Monate (n)"</span>,<div /> editDialogRepeatEveryMonthDayString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Day"</span>,<div /> editDialogRepeatFirstString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"erste"</span>,<div /> editDialogRepeatSecondString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"zweite"</span>,<div /> editDialogRepeatThirdString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"dritte"</span>,<div /> editDialogRepeatFourthString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"vierte"</span>,<div /> editDialogRepeatLastString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"letzte"</span>,<div /> editDialogRepeatEndString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ende"</span>,<div /> editDialogRepeatAfterString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Nach"</span>,<div /> editDialogRepeatOnString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Am"</span>,<div /> editDialogRepeatOfString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"von"</span>,<div /> editDialogRepeatOccurrencesString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Eintritt (e)"</span>,<div /> editDialogRepeatSaveString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Vorkommen Speichern"</span>,<div /> editDialogRepeatSaveSeriesString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Save Series"</span>,<div /> editDialogRepeatDeleteString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Vorkommen löschen"</span>,<div /> editDialogRepeatDeleteSeriesString: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Series löschen"</span>,<div /> editDialogStatuses:<div /> {<div /> free: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Frei"</span>,<div /> tentative: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Versuchsweise"</span>,<div /> busy: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Beschäftigt"</span>,<div /> outOfOffice: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Ausserhaus"</span><div /> }<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;">"scheme05"</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 /> view: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'weekView'</span>,<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 class=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'default'</span>></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>localization</code> property.
</p>
<pre><code>var localization = $('#jqxScheduler').jqxScheduler('localization');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-localization-property">localization is set to custom object</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>min</span>
</td>
<td>
<span>jqxDate</span>
</td>
<td>new $.jqx.date(0)
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's minimum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.
</p>
<h4>Code example
</h4>
<p>
Set the <code>min</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ min: new $.jqx.date(0) });
</code></pre>
<p>
Get the <code>min</code> property.
</p>
<pre><code>var min = $('#jqxScheduler').jqxScheduler('min');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-navigation-restriction">min is set to new $.jqx.date(2015, 1, 1).</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>max</span>
</td>
<td>
<span>jqxDate</span>
</td>
<td>new $.jqx.date(9999, 12, 31),
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's maximum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.
</p>
<h4>Code example
</h4>
<p>
Set the <code>max</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ max: new $.jqx.date(9999, 12, 31) });
</code></pre>
<p>
Get the <code>max</code> property.
</p>
<pre><code>var max = $('#jqxScheduler').jqxScheduler('max');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-navigation-restriction">max is set to new $.jqx.date(2015, 12, 31, 23, 59, 59).</a>
</div>
</div>
</td>
</tr>read
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>ready</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 a function called when the Scheduler is rendered and ready for usage.
</p>
<h4>Code example
</h4>
<p>
Set the <code>ready</code> property.
</p>
<pre><code>
// prepare the data
var source =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string'},
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm" },
{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" }
],
id: 'id',
url: 'appointments.json'
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
rowsHeight: 40,
source: adapter,
ready: function () {
// gets scrollbable height.
var scrollHeight = $("#scheduler").jqxScheduler('scrollHeight');
// scroll 700px.
$("#scheduler").jqxScheduler('scrollTop', 700);
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "about",
location: "address",
subject: "name",
style: "style",
status: "status"
},
view: 'weekView',
views:
[
"dayView",
"weekView"
]
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-navigation-restriction">ready is set to a custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>renderAppointment</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 a function called when the Scheduler is rendering its appointments. The function has one parameter which is Object with the following members:
<ul>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property.</li>
<li>width - integer. Gets the appointment's width.</li>
<li>height- integer. Gets the appointment's height.</li>
<li>textColor - hex string. Gets or sets the appointment's text color.</li>
<li>background - hex string. Gets or sets the appointment's background color.</li>
<li>borderColor - hex string. Gets or sets the appointment's border color.</li>
<li>style - hex string. Gets or sets the appointment's style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.</li>
<li>cssClass - string. This can be used for adding CSS Class to the appointment.</li>
<li>html - html string. This can be used for replacing the appointment's HTML Content.</li>
<li>view - string. Gets the current view - 'dayView', 'weekView', 'monthView', timelineDayView', 'timelineWeekView', 'timelineMonthView'</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Set the <code>renderAppointment</code> property.
</p>
<pre><code>
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
renderAppointment: function(data)
{
// data Object properties
// appointment - Object with the properties from the Scheduler.s source object.
// width - int
// height- int
// textColor - hex
// background - hex
// borderColor - hex
// style - string
// cssClass - string
// html - html string
// view - string
var img = "< img style='top: 2px; position: relative;' src='../../../../images/person.png' /> ";
if (data.appointment.subject == "Nancy") {
var img = "< img style='top: 2px; position: relative;' src='../../../../images/woman.png' /> ";
}
else if (data.appointment.subject == "Peter") {
var img = "< img style='top: 2px; position: relative;' src='../../../../images/boss.png' /> ";
}
else if (data.appointment.subject == "Antony") {
var img = "< img style='top: 2px; position: relative;' src='../../../../images/oldboss.png' /> ";
}
else if (data.appointment.subject == "John") {
var img = "< img style='top: 2px; position: relative;' src='../../../../images/asian.png' /> ";
}
if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") {
data.html = img + "<i> " + data.appointment.subject + "</i/> ";
if (data.appointment.id == "id1") {
data.style = "#AA4643";
}
else if (data.appointment.id == "id2" || data.appointment.id == "id6") {
data.style = "#309B46";
}
else if (data.appointment.id == "id3") {
data.style = "#447F6E";
}
}
return data;
},
ready: function () {
$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "location",
subject: "subject",
style: "style",
color: "color",
background: "background",
borderColor: "borderColor"
},
view: 'weekView',
appointmentsMinHeight: 20,
views:
[
'dayView',
'weekView',
'monthView'
]
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-renderappointment-property">renderAppointment is set to a custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>rendering</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 a function called by the Scheduler when the Scheduler's rendering function is called.
</p>
<h4>Code example
</h4>
<p>
Set the <code>rendering</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ rendering: function(){} });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-rendered-and-rendering-callbacks">rendering is set to a custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>rendered</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 a function called by the Scheduler when the Scheduler is rendered.
</p>
<h4>Code example
</h4>
<p>
Set the <code>rendered</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ rendered: function(){} });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-rendered-and-rendering-callbacks">rendered is set to a custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>rtl</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 whether the Scheduler is displayed with Right to Left layout.
</p>
<h4>Code example
</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ rtl: true });
</code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxScheduler').jqxScheduler('rtl');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-right-to-left-layout">rtl is set to true.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>resources</span>
</td>
<td>
<span>Object</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 the Scheduler's resource object. The object can have the following members:
<ul>
<li>source - dataAdapter or Array.</li>
<li>colorScheme - String which defines the appoinment's style depending on its resourceId. Values from 'scheme01' to 'scheme27'.</li>
<li>orientation - String which defines the resources representation. Values - 'none', 'horizontal', 'vertical'.</li>
<li>dataField - String which defines the resourceId. If your appointment's resource field is 'calendar', this dataField should be set to 'calendar'.</li>
<li>
resourceColumnWidth - Integer which defines the Scheduler columns width when 'orientation' is 'horizontal'.
<li>
resourceRowHeight - Integer which defines the Scheduler resource group row height when 'orientation' is 'vertical'.
</ul>
</p>
<h4>Code example
</h4>
<p>
Set the <code>resources</code> property.
</p>
<pre><code>
var source =
{
dataType: "array",
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'location', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' }
],
id: 'id',
localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
dayNameFormat: "abbr",
source: adapter,
showLegend: true,
ready: function () {
$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
},
resources:
{
colorScheme: "scheme05",
dataField: "calendar",
orientation: "horizontal",
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
resourceId: "calendar"
},
view: 'weekView',
views:
[
'dayView',
'weekView',
'monthView'
]
});
</code></pre>
<p>
Get the <code>resource</code> property.
</p>
<pre><code>var resources = $('#jqxScheduler').jqxScheduler('resources');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-resources">resources is set to a custom object.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>rowsHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>27
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler rows height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>rowsHeight</code> property. The minimum value is 25.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({rowsHeight: 40});
</code></pre>
<p>
Get the <code>rowsHeight</code> property.
</p>
<pre><code>var rowsHeight = $('#jqxScheduler').jqxScheduler('rowsHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-rowsheight-property">rowsHeight is set to 40.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>showToolbar</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 navigation toolbar is displayed.
</p>
<h4>Code example
</h4>
<p>
Set the <code>showToolbar</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({showToolbar: false});
</code></pre>
<p>
Get the <code>showToolbar</code> property.
</p>
<pre><code>var showToolbar = $('#jqxScheduler').jqxScheduler('showToolbar');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-showtoolbar-property">showToolbar is set to false.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>showLegend</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 whether the Scheduler's legend bar is displayed.
</p>
<h4>Code example
</h4>
<p>
Set the <code>showLegend</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({showLegend: false});
</code></pre>
<p>
Get the <code>showLegend</code> property.
</p>
<pre><code>var showLegend = $('#jqxScheduler').jqxScheduler('showLegend');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-showlegend-property">showLegend is set to false.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>scrollBarSize</span>
</td>
<td>
<span>Number</span>
</td>
<td>15
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the scrollbars size.
</p>
<h4>Code example
</h4>
<p>
Set the <code>scrollBarSize</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({scrollBarSize: 20});
</code></pre>
<p>
Get the <code>scrollBarSize</code> property.
</p>
<pre><code>var scrollBarSize = $('#jqxScheduler').jqxScheduler('scrollBarSize');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrollbars-size">scrollBarSize is set to 20.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>source</span>
</td>
<td>
<span>Object</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 the Scheduler appointments data source. The property should point to dataAdapter instance.
</p>
<h4>Code example
</h4>
<p>
Set the <code>source</code> property.
</p>
<pre><code>
var appointments = new Array();
var appointment1 = {
id: "id1",
description: "George brings projector for presentations.",
location: "",
subject: "Quarterly Project Review Meeting",
calendar: "Room 1",
start: new Date(2016, 10, 23, 9, 0, 0),
end: new Date(2016, 10, 23, 16, 0, 0)
}
var appointment2 = {
id: "id2",
description: "",
location: "",
subject: "IT Group Mtg.",
calendar: "Room 2",
start: new Date(2016, 10, 24, 10, 0, 0),
end: new Date(2016, 10, 24, 15, 0, 0)
}
var appointment3 = {
id: "id3",
description: "",
location: "",
subject: "Course Social Media",
calendar: "Room 1",
start: new Date(2016, 10, 27, 11, 0, 0),
end: new Date(2016, 10, 27, 13, 0, 0)
}
var appointment4 = {
id: "id4",
description: "",
location: "",
subject: "New Projects Planning",
calendar: "Room 2",
start: new Date(2016, 10, 23, 0, 0, 0),
end: new Date(2016, 10, 25, 23, 59, 59)
}
var appointment5 = {
id: "id5",
description: "",
location: "",
subject: "Interview with James",
calendar: "Room 1",
start: new Date(2016, 10, 25, 15, 0, 0),
end: new Date(2016, 10, 25, 17, 0, 0)
}
var appointment6 = {
id: "id6",
description: "",
location: "",
subject: "Interview with Nancy",
calendar: "Room 2",
start: new Date(2016, 10, 26, 14, 0, 0),
end: new Date(2016, 10, 26, 16, 0, 0)
}
appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'location', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' }
],
id: 'id',
localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
dayNameFormat: "abbr",
source: adapter,
showLegend: true,
ready: function () {
$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
},
resources:
{
colorScheme: "scheme05",
dataField: "calendar",
orientation: "horizontal",
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
resourceId: "calendar"
},
view: 'weekView',
views:
[
'dayView',
'weekView',
'monthView'
]
});
</code></pre>
<p>
Get the <code>source</code> property.
</p>
<pre><code>var source = $('#jqxScheduler').jqxScheduler('source');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-data-source">source is set to dataAdapter.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>statuses</span>
</td>
<td>
<span>Object</span>
</td>
<td>
<pre><code>
{
free: "white",
tentative: "tentative",
busy: "transparent",
outOfOffice: "#800080"
}
</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 Scheduler appointments statuses.
</p>
<h4>Code example
</h4>
<p>
Set the <code>statuses</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({statuses: {
free: "green",
tentative: "tentative",
busy: "transparent",
doNotDisturb: "orange",
outOfOffice: "#800080"
} });
</code></pre>
<p>
Get the <code>statuses</code> property.
</p>
<pre><code>var statuses = $('#jqxScheduler').jqxScheduler('statuses');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-statuses">statuses is set to custom object.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>touchRowsHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>37
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler rows height on touch device.
</p>
<h4>Code example
</h4>
<p>
Set the <code>touchRowsHeight</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({touchRowsHeight: 40});
</code></pre>
<p>
Get the <code>touchRowsHeight</code> property.
</p>
<pre><code>var touchRowsHeight = $('#jqxScheduler').jqxScheduler('touchRowsHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-touch-devices">touchRowsHeight is set to 40.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
In order to set a theme, you need to do the following:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-theme">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>touchAppointmentsMinHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>27
</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 on touch devices in the all day area, month view and timeline views.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>touchAppointmentsMinHeight</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({touchAppointmentsMinHeight: 40});
</code></pre>
<p>
Get the <code>touchAppointmentsMinHeight</code> property.
</p>
<pre><code>var touchAppointmentsMinHeight = $('#jqxScheduler').jqxScheduler('touchAppointmentsMinHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-touch-devices">touchAppointmentsMinHeight is set to 40.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>touchScrollBarSize</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 scrollbars size on touch devices.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>touchScrollBarSize</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({touchScrollBarSize: 25});
</code></pre>
<p>
Get the <code>touchScrollBarSize</code> property.
</p>
<pre><code>var touchScrollBarSize = $('#jqxScheduler').jqxScheduler('touchScrollBarSize');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrollbars-size">touchScrollBarSize is set to 25.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>timeZone</span>
</td>
<td>
<span>String</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's Time Zone. Possible values:
<pre><code>
'Dateline Standard Time' - (offsetMinutes: -720, offsetHours: -12, text: '(UTC-12:00) International Date Line West')
'UTC-11' - (offsetMinutes: -660, offsetHours: -11, text: '(UTC-11:00) Coordinated Universal Time-11')
'Hawaiteratoran Standard Time' - (offsetMinutes: -600, offsetHours: -10, text: '(UTC-10:00) Hawaiterator')
'Alaskan Standard Time' - (offsetMinutes: -540, offsetHours: -9, text: '(UTC-09:00) Alaska' ,
'Pacific Standard Time (Mexico)' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Baja California' ,
'Pacific Standard Time' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Pacific Time (US & Canada)' ,
'US Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Arizona')
'Mountain Standard Time (Mexico)' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Chihuahua, La Paz, Mazatlan' ,
'Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Mountain Time (US & Canada)' ,
'Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central Time (US & Canada)' ,
'Central America Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central America')
'Canada Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Saskatchewan')
'Central Standard Time (Mexico)' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Guadalajara, Mexico City, Monterrey' ,
'SA Pacific Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Bogota, Lima, Quito, Rio Branco')
'Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Eastern Time (US & Canada)' ,
'US Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Indiana (East)' ,
'Venezuela Standard Time' - (offsetMinutes: -270, offsetHours: -4.5, text: '(UTC-04:30) Caracas')
'Atlantic Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Atlantic Time (Canada)' ,
'Paraguay Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Asuncion' ,
'Central Brazilian Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Cuiaba' ,
'Pacific SA Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Santiago' ,
'SA Western Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Georgetown, La Paz, Manaus')
'Newfoundland Standard Time' - (offsetMinutes: -210, offsetHours: -3.5, text: '(UTC-03:30) Newfoundland' ,
'SA Eastern Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Cayenne, Fortaleza')
'Argentina Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Buenos Aires' ,
'E. South America Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Brasilia' ,
'Bahia Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Salvador' ,
'Montevideo Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Montevideo' ,
'Greenland Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Greenland' ,
'UTC-02' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Coordinated Universal Time-02')
'Mid-Atlantic Standard Time' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Mid-Atlantic - Old' ,
'Azores Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Azores' ,
'Cape Verde Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Cape Verde Is.')
'Morocco Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Casablanca' ,
'UTC' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Coordinated Universal Time')
'GMT Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Dublin, Edinburgh, Lisbon, London' ,
'Greenwich Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Monrovia, Reykjavik')
'Central European Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb' ,
'Namibia Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Windhoek' ,
'W. Central Africa Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) West Central Africa')
'W. Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Amsterdam, Berlin, Rome' ,
'Central Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Belgrade, Budapest, Prague' ,
'Romance Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Brussels, Copenhagen, Madrid, Paris' ,
'FLE Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Helsinki, Kyiv, Riga, Sofia' ,
'South Africa Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Harare, Pretoria')
'Turkey Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Istanbul' ,
'GTB Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Athens, Bucharest' ,
'Libya Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Tripoli' ,
'E. Europe Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) E. Europe' ,
'Jordan Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Amman' ,
'Middle East Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Beirut' ,
'Egypt Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Cairo' ,
'Syria Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Damascus' ,
'Israel Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Jerusalem' ,
'Arab Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kuwait, Riyadh')
'E. Africa Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Nairobi')
'Arabic Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Baghdad' ,
'Kaliningrad Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kaliningrad, Minsk' ,
'Iran Standard Time' - (offsetMinutes: 210, offsetHours: 3.5, text: '(UTC+03:30) Tehran' ,
'Mauritius Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Port Louis' ,
'Georgian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Tbilisi')
'Caucasus Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Yerevan' ,
'Arabian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Abu Dhabi, Muscat')
'Azerbaijan Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Baku' ,
'Russian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Moscow, St. Petersburg, Volgograd' ,
'Afghanistan Standard Time' - (offsetMinutes: 270, offsetHours: 4.5, text: '(UTC+04:30) Kabul')
'Pakistan Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Islamabad, Karachi' ,
'West Asia Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Ashgabat, Tashkent')
'India Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi')
'Sri Lanka Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Sri Jayawardenepura')
'Nepal Standard Time' - (offsetMinutes: 345, offsetHours: 5.75, text: '(UTC+05:45) Kathmandu')
'Central Asia Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Astana')
'Bangladesh Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Dhaka' ,
'Ekaterinburg Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Ekaterinburg' ,
'Myanmar Standard Time' - (offsetMinutes: 390, offsetHours: 6.5, text: '(UTC+06:30) Yangon (Rangoon)')
'SE Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Bangkok, Hanoi, Jakarta')
'N. Central Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Novosibirsk' ,
'Ulaanbaatar Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Ulaanbaatar')
'China Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Beijing, Chongqing, Hong Kong')
'Singapore Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Kuala Lumpur, Singapore')
'North Asia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Krasnoyarsk' ,
'Taipei Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Taipei')
'W. Australia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Perth' ,
'Korea Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Seoul')
'North Asia East Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Irkutsk' ,
'Tokyo Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Osaka, Sapporo, Tokyo')
'AUS Central Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Darwin')
'Cen. Australia Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Adelaide' ,
'West Pacific Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Guam, Port Moresby')
'Tasmania Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Hobart' ,
'E. Australia Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Brisbane')
'AUS Eastern Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Canberra, Melbourne, Sydney' ,
'Yakutsk Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Yakutsk' ,
'Vladivostok Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Vladivostok' ,
'Central Pacific Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Solomon Is., New Caledonia')
'Magadan Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Magadan' ,
'Kamchatka Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Petropavlovsk-Kamchatsky - Old' ,
'Fiji Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Fiji' ,
'New Zealand Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Auckland, Wellington' ,
'UTC+12' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Coordinated Universal Time+12')
'Tonga Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Nuku\'alofa')
'Samoa Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Samoa')
</code></pre>
</p>
<h4>Code example
</h4>
<p>
Set the <code>timeZone</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({timeZone: 'UTC'});
</code></pre>
<p>
Get the <code>timeZone</code> property.
</p>
<pre><code>var timeZone = $('#jqxScheduler').jqxScheduler('timeZone');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-timezone">timeZone is set to 'UTC'.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>touchDayNameFormat</span>
</td>
<td>
<span>String</span>
</td>
<td>'abbr'
</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 day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.
</p>
<h4>Code example
</h4>
<p>
Set the <code>touchDayNameFormat</code> property.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler({ touchDayNameFormat: 'abbr') });
</code></pre>
<p>
Get the <code>touchDayNameFormat</code> property.
</p>
<pre><code>var touchDayNameFormat = $('#jqxScheduler').jqxScheduler('touchDayNameFormat');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-touchdaynameformat-property">touchDayNameFormat is set to 'abbr'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>toolBarRangeFormat</span>
</td>
<td>
<span>String</span>
</td>
<td>'dd MMMM yyyy'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the toolbar's date format.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>toolBarRangeFormat</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({toolBarRangeFormat: 'dd MM yyyy'});
</code></pre>
<p>
Get the <code>toolBarRangeFormat</code> property.
</p>
<pre><code>var toolBarRangeFormat = $('#jqxScheduler').jqxScheduler('toolBarRangeFormat');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-toolbar-format-strings">toolBarRangeFormat is set to 'dd MM yyyy'.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>toolBarRangeFormatAbbr</span>
</td>
<td>
<span>String</span>
</td>
<td>'dd MM yyyy'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the toolbar's date format when the Scheduler's width is not enough for displaying the full format.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>toolBarRangeFormatAbbr</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({toolBarRangeFormatAbbr: 'dd MM yy'});
</code></pre>
<p>
Get the <code>toolBarRangeFormatAbbr</code> property.
</p>
<pre><code>var toolBarRangeFormatAbbr = $('#jqxScheduler').jqxScheduler('toolBarRangeFormatAbbr');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-toolbar-format-strings">toolBarRangeFormatAbbr is set to 'dd MM yy'.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>toolbarHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>54
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler toolbar's height.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>toolbarHeight</code> property.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler({toolbarHeight: 60});
</code></pre>
<p>
Get the <code>toolbarHeight</code> property.
</p>
<pre><code>var toolbarHeight = $('#jqxScheduler').jqxScheduler('toolbarHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-toolbar-height">toolbarHeight is set to 60.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>views</span>
</td>
<td>
<span>Array</span>
</td>
<td>['dayView', 'weekView', 'monthView']
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's views. Each view in the Array can be String or Object. Strings are: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView', 'agendaView'. If it is an object it can have the following members:
<ul>
<li>appointmentColumnWidth - Number which defines the Appointment column width in the Agenda view.</li>
<li>appointmentHeight - Sets the minimum height of an appointment in All Day Row, Month View or Timeline Views. Default is automatically calculated.</li>
<li>appointmentsRenderMode - Sets the appointments rendering mode. Possible value: "exactTime". In the "exactTime" mode, appointments may render partially in the cells.</li>
<li>allDayRowHeight - Number which defines the all day row's height. Default is automatically calculated.</li>
<li>dayViewNavigation - Boolean which is taken into account in Month View. It defines whether clicking on month cell header navigates to Day View. Default is false.</li>
<li>days - Number which defines the number of days in the Agenda view. Default is 7.</li>
<li>dateColumnWidth - Number which defines the Date column width in the Agenda view.</li>
<li>monthRowAutoHeight - Boolean which defines whether row height in month view is automatic. Default is false.</li>
<li>rowHeight - Number which defines the rows height in the view. Default is null.</li>
<li>showWeekends - Boolean which defines whether weekens will be displayed. Default is true.</li>
<li>showWorkTime - Boolean which defines whether the work time is displayed in Day View, Week View, Timeline Day View and Timeline Week View. Default is true.</li>
<li>showWeekNumbers - Boolean which defines whether the week numbers are dispalyed in Month View. Default is false.</li>
<li>showTimeRangeStatus - Boolean which defines whether the time range status of appointments which have duration >= 1 day and are not all day appointments is displayed in Month View and Day/Week views all day area.</li>
<li>type - String which sets the view's type. Values: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView'.</li>
<li>timeRuler - Object which can have the following members:
<ul>
<li>width - Number which sets the width of the time ruler. Default is 60.</li>
<li>hidden - Sets whether the time ruler is displayed.</li>
<li>timeZones - Sets an Array of time zones. Example: [{ id: "UTC", text: "UTC" }, { id: "Pacific Standard Time", text: "PST" }].</li>
<li>text - Sets the text of the time ruler column.</li>
<li>scale - Sets the time ruler's scale. Values: 'hour', 'halfHour', 'quarterHour', 'tenMinutes', 'fiveMinutes'</li>
<li>scaleStartHour - Sets the scale's start hour.</li>
<li>scaleEndHour - Sets the scale's end hour.</li>
<li>formatString - Sets the Hours and Minutes format string. Example: "hh:mm".</li>
<li>position - Sets the time ruler's position. Possible values: 'left' or 'right'.</li>
</ul>
</li>
<li>text - Sets the view's display text in the Scheduler's Toolbar. Default is automatically set and defined in Scheduler's localization.</li>
<li>timeSlotWidth - Number which defines the width of a time slot in Timeline views. The minimum value is 30.</li>
<li>timeColumnWidth - Number which defines the Time column width in the Agenda view.</li>
<li>weekViewNavigation - Boolean which is taken into account in Month View. It defines whether clicking on week number cell header navigates to Week View. Default is false.</li>
<li>workTime - Object which defines the Scheduler's work time. Example: {
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 19
}
</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Set the <code>views</code> property.
</p>
<pre><code>
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "about",
location: "address",
subject: "name",
style: "style",
status: "status"
},
view: 'weekView',
views:
[
{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
{ type: "weekView", workTime:
{
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 19
}
}
]
});
</code></pre>
<p>
Get the <code>views</code> property.
</p>
<pre><code>var views = $('#jqxScheduler').jqxScheduler('views');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-views">views is set to custom object.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span49'>view</span>
</td>
<td>
<span>Number/String</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's view. Possible vales: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView' and 'timelineMonthView' or the view's Index in the views object.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>view</code> property.
</p>
<pre><code>
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "about",
location: "address",
subject: "name",
style: "style",
status: "status"
},
view: 'weekView',
views:
[
{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
{ type: "weekView", workTime:
{
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 19
}
}
]
});
</code></pre>
<p>
Get the <code>view</code> property.
</p>
<pre><code>var view = $('#jqxScheduler').jqxScheduler('view');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-views">view is set to 'timelineWeekView'.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>800
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the Scheduler's width.
</p>
</p>
<h4>Code example
</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "about",
location: "address",
subject: "name",
style: "style",
status: "status"
},
view: 'weekView',
views:
[
{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
{ type: "weekView", workTime:
{
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 19
}
}
]
});
</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxScheduler').jqxScheduler('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-views">width is set to 850.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>appointmentChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>appointmentChange</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('appointmentChange', function (event) { var args = event.args; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the appointmentChange event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>appointmentClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>appointmentClick</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('appointmentClick', function (event) { var args = event.args; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the appointmentClick event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>appointmentDoubleClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>appointmentDoubleClick</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('appointmentDoubleClick', function (event) { var args = event.args; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the appointmentDoubleClick event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>appointmentDelete</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>appointmentDelete</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('appointmentDelete', function (event) { var args = event.args; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the appointmentDelete event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>appointmentAdd</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>appointmentAdd</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('appointmentAdd', function (event) { var args = event.args; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the appointmentAdd event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span56'>bindingComplete</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the binding is completed.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>bindingComplete</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('bindingComplete', function (event) { });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the bindingComplete event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span57'>cellClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>cellClick</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('cellClick', function (event) { var args = event.args; var cell = args.cell; var date = args.date; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the cellClick event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span58'>cellDoubleClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>cellDoubleClick</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('cellDoubleClick', function (event) { var args = event.args; var cell = args.cell; var date = args.date;});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the cellDoubleClick event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span59'>contextMenuOpen</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the context menu is opened. Event Arguments:
<ul>
<li>menu - jQuery Object which represents the jqxMenu.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>contextMenuOpen</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('contextMenuOpen', function (event) { var args = event.args; var menu = args.menu; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the contextMenuOpen event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span60'>contextMenuClose</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the context menu is closed. Event Arguments:
<ul>
<li>menu - jQuery Object which represents the jqxMenu.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>contextMenuClose</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('contextMenuClose', function (event) { var args = event.args; var menu = args.menu; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the contextMenuClose event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span61'>contextMenuItemClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the context menu item is clicked. Event Arguments:
<ul>
<li>menu - jQuery Object which represents the jqxMenu.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
<li>item - the clicked menu item.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>contextMenuItemClick</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('contextMenuItemClick', function (event) { var args = event.args; var menu = args.menu; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the contextMenuItemClick event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span62'>contextMenuCreate</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the context menu item is created. Event Arguments:
<ul>
<li>menu - jQuery Object which represents the jqxMenu.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>contextMenuCreate</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('contextMenuCreate', function (event) { var args = event.args; var menu = args.menu; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the contextMenuCreate event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span96'>dateChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>dateChange</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('dateChange', function (event) { var args = event.args; var date = args.date; var from = args.from; var to = args.to; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the dateChange event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span64'>editRecurrenceDialogOpen</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the recurrence dialog is opened. Event Arguments:
<ul>
<li>dialog - jQuery Object which represents the jqxWindow.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>editRecurrenceDialogOpen</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('editRecurrenceDialogOpen', function (event) { var args = event.args; var dialog = args.dialog; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span65'>editRecurrenceDialogClose</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the recurrence dialog is closed. Event Arguments:
<ul>
<li>dialog - jQuery Object which represents the jqxWindow.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>editRecurrenceDialogClose</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('editRecurrenceDialogClose', function (event) { var args = event.args; var dialog = args.dialog; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the editRecurrenceDialogClose event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span66'>editDialogCreate</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the edit dialog is created. Event Arguments:
<ul>
<li>dialog - jQuery Object which represents the jqxWindow.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
<li>fields - Object with the following members:
<ul>
<li>subject - Subject input field.</li>
<li>subjectLabel - Subject label.</li>
<li>subjectContainer - Input and label HTML div container element.</li>
<li>location - Location input field.</li>
<li>locationLabel - Location label.</li>
<li>locationContainer - Input and label HTML div container element.</li>
<li>from - From datetime input field.</li>
<li>fromLabel - From label.</li>
<li>fromContainer - Input and label HTML div container element.</li>
<li>to - To Datetimeinput field.</li>
<li>toLabel - To label.</li>
<li>toContainer - Input and label HTML div container element.</li>
<li>allDay - AllDay checkbox field.</li>
<li>allDayLabel - AllDay label.</li>
<li>allDayContainer - Checkbox and label HTML div container element.</li>
<li>timeZone - Timezone DropDownList field.</li>
<li>timeZoneLabel - TimeZone label.</li>
<li>timeZoneContainer - DropDownList and label HTML div container element.</li>
<li>description - Description input field.</li>
<li>descriptionLabel - Description label.</li>
<li>descriptionContainer - Input and label HTML div container element.</li>
<li>color - Color DropDownList field.</li>
<li>colorLabel - Subject label.</li>
<li>colorContainer - DropDownList and label container element.</li>
<li>status - Status DropDownList field.</li>
<li>statusLabel - Status label.</li>
<li>statustContainer - DropDownList and label container element.</li>
<li>resource - Resource DropDownList field.</li>
<li>resourceLabel - Resource label.</li>
<li>resourceContainer - DropDownList and label container element.</li>
<li>buttonsField - buttons HTML div container HTML Element.</li>
<li>saveButton - Save button.</li>
<li>deleteButton - Delete button.</li>
<li>cancelButton - Cancel button.</li>
<li>daily.repeatDayInterval - NumberInput for daily repeat pattern.</li>
<li>daily.repeatDayLabel - Label HTML Element.</li>
<li>daily.panel - Daily repeat pattern HTML div container element.</li>
<li>weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.</li>
<li>weekly.repeatWeekIntervalLabel - Label element.</li>
<li>weekly.repeatDaysLabel - Label element.</li>
<li>weekly.repeatDays - Array of Checkboxes.</li>
<li>weekly.panel - Weekly repeat pattern HTML div container element.</li>
<li>monthly.repeatMonth - NumberInput for monthly repeat pattern.</li>
<li>monthly.repeatMonthLabel - Label element.</li>
<li>monthly.repeatMonthDay - NumberInput for the month day in the pattern.</li>
<li>monthly.repeatMonthDayBool - RadioButton element.</li>
<li>monthly.repeatMonthDayLabel - Label element.</li>
<li>monthly.repeatDayOfWeekBool - RadioButton element.</li>
<li>monthly.repeatDayOfWeek - DropDownList element.</li>
<li>monthly.repeatDayOfWeekLabel - Label element.</li>
<li>monthly.repeatDayOfWeekType - DropDownList element.</li>
<li>monthly.panel - Monthly repeat pattern HTML div container element.</li>
<li>yearly.repeatYear - NumberInput for yearly repeat pattern.</li>
<li>yearly.repeatYearLabel - Label element.</li>
<li>yearly.repeatYearBool - RadioButton element.</li>
<li>yearly.repeatYearBoolLabel - Label element.</li>
<li>yearly.repeatYearMonth - DropDownList element.</li>
<li>yearly.repeatYearDay - NumberInput element.</li>
<li>yearly.repeatDayOfWeekBool - RadioButton element.</li>
<li>yearly.repeatDayOfWeekType - DropDownList element.</li>
<li>yearly.repeatDayOfWeekLabel - Label element.</li>
<li>yearly.repeatDayOfWeekMonth - DropDownList element.</li>
<li>yearly.panel - Yearly repeat pattern HTML div container element.</li>
<li>resetExceptions - Checkbox element.</li>
<li>resetExceptionsLabel - Label element.</li>
<li>resetExceptionsContainer - Checkbox and Label container element.</li>
<li>repeat - DropDownList element.</li>
<li>repeatLabel - Label element.</li>
<li>repeatContainer - DropDownList and Label container element.</li>
<li>repeatPanel - HTML div container element for repeat patterns.</li>
<li>repeatEndPanelContainer - HTML div container element for the repeat pattern's end.</li>
<li>repeatEndPanel.repeatEndNever - RadioButton element.</li>
<li>repeatEndPanel.repeatEndNeverLabel - Label element.</li>
<li>repeatEndPanel.repeatEndAfter - RadioButton element.</li>
<li>repeatEndPanel.repeatEndAfterValue - NumberInput element.</li>
<li>repeatEndPanel.repeatEndAfterLabel - Label element.</li>
<li>repeatEndPanel.repeatEndOn - RadioButton element.</li>
<li>repeatEndPanel.repeatEndOnValue - DateTimeInput element.</li>
<li>repeatEndPanel.repeatEndOnLabel - Label element.</li>
</ul>
</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>editDialogCreate</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('editDialogCreate', function (event) { var args = event.args; var dialog = args.dialog; var fields = args.fields; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the editDialogCreate event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span67'>editDialogOpen</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the edit dialog is opened. Event Arguments:
<ul>
<li>dialog - jQuery Object which represents the jqxWindow.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
<li>fields - Object with the following members:
<ul>
<li>subject - Subject input field.</li>
<li>subjectLabel - Subject label.</li>
<li>subjectContainer - Input and label HTML div container element.</li>
<li>location - Location input field.</li>
<li>locationLabel - Location label.</li>
<li>locationContainer - Input and label HTML div container element.</li>
<li>from - From datetime input field.</li>
<li>fromLabel - From label.</li>
<li>fromContainer - Input and label HTML div container element.</li>
<li>to - To Datetimeinput field.</li>
<li>toLabel - To label.</li>
<li>toContainer - Input and label HTML div container element.</li>
<li>allDay - AllDay checkbox field.</li>
<li>allDayLabel - AllDay label.</li>
<li>allDayContainer - Checkbox and label HTML div container element.</li>
<li>timeZone - Timezone DropDownList field.</li>
<li>timeZoneLabel - TimeZone label.</li>
<li>timeZoneContainer - DropDownList and label HTML div container element.</li>
<li>description - Description input field.</li>
<li>descriptionLabel - Description label.</li>
<li>descriptionContainer - Input and label HTML div container element.</li>
<li>color - Color DropDownList field.</li>
<li>colorLabel - Subject label.</li>
<li>colorContainer - DropDownList and label container element.</li>
<li>status - Status DropDownList field.</li>
<li>statusLabel - Status label.</li>
<li>statustContainer - DropDownList and label container element.</li>
<li>resource - Resource DropDownList field.</li>
<li>resourceLabel - Resource label.</li>
<li>resourceContainer - DropDownList and label container element.</li>
<li>buttonsField - buttons HTML div container HTML Element.</li>
<li>saveButton - Save button.</li>
<li>deleteButton - Delete button.</li>
<li>cancelButton - Cancel button.</li>
<li>daily.repeatDayInterval - NumberInput for daily repeat pattern.</li>
<li>daily.repeatDayLabel - Label HTML Element.</li>
<li>daily.panel - Daily repeat pattern HTML div container element.</li>
<li>weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.</li>
<li>weekly.repeatWeekIntervalLabel - Label element.</li>
<li>weekly.repeatDaysLabel - Label element.</li>
<li>weekly.repeatDays - Array of Checkboxes.</li>
<li>weekly.panel - Weekly repeat pattern HTML div container element.</li>
<li>monthly.repeatMonth - NumberInput for monthly repeat pattern.</li>
<li>monthly.repeatMonthLabel - Label element.</li>
<li>monthly.repeatMonthDay - NumberInput for the month day in the pattern.</li>
<li>monthly.repeatMonthDayBool - RadioButton element.</li>
<li>monthly.repeatMonthDayLabel - Label element.</li>
<li>monthly.repeatDayOfWeekBool - RadioButton element.</li>
<li>monthly.repeatDayOfWeek - DropDownList element.</li>
<li>monthly.repeatDayOfWeekLabel - Label element.</li>
<li>monthly.repeatDayOfWeekType - DropDownList element.</li>
<li>monthly.panel - Monthly repeat pattern HTML div container element.</li>
<li>yearly.repeatYear - NumberInput for yearly repeat pattern.</li>
<li>yearly.repeatYearLabel - Label element.</li>
<li>yearly.repeatYearBool - RadioButton element.</li>
<li>yearly.repeatYearBoolLabel - Label element.</li>
<li>yearly.repeatYearMonth - DropDownList element.</li>
<li>yearly.repeatYearDay - NumberInput element.</li>
<li>yearly.repeatDayOfWeekBool - RadioButton element.</li>
<li>yearly.repeatDayOfWeekType - DropDownList element.</li>
<li>yearly.repeatDayOfWeekLabel - Label element.</li>
<li>yearly.repeatDayOfWeekMonth - DropDownList element.</li>
<li>yearly.panel - Yearly repeat pattern HTML div container element.</li>
<li>resetExceptions - Checkbox element.</li>
<li>resetExceptionsLabel - Label element.</li>
<li>resetExceptionsContainer - Checkbox and Label container element.</li>
<li>repeat - DropDownList element.</li>
<li>repeatLabel - Label element.</li>
<li>repeatContainer - DropDownList and Label container element.</li>
<li>repeatPanel - HTML div container element for repeat patterns.</li>
<li>repeatEndPanelContainer - HTML div container element for the repeat pattern's end.</li>
<li>repeatEndPanel.repeatEndNever - RadioButton element.</li>
<li>repeatEndPanel.repeatEndNeverLabel - Label element.</li>
<li>repeatEndPanel.repeatEndAfter - RadioButton element.</li>
<li>repeatEndPanel.repeatEndAfterValue - NumberInput element.</li>
<li>repeatEndPanel.repeatEndAfterLabel - Label element.</li>
<li>repeatEndPanel.repeatEndOn - RadioButton element.</li>
<li>repeatEndPanel.repeatEndOnValue - DateTimeInput element.</li>
<li>repeatEndPanel.repeatEndOnLabel - Label element.</li>
</ul>
</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>editDialogOpen</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('editDialogOpen', function (event) { var args = event.args; var dialog = args.dialog; var fields = args.fields; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the editDialogOpen event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span68'>editDialogClose</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the edit dialog is closed. Event Arguments:
<ul>
<li>dialog - jQuery Object which represents the jqxWindow.</li>
<li>appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.</li>
<li>fields - Object with the following members:
<ul>
<li>subject - Subject input field.</li>
<li>subjectLabel - Subject label.</li>
<li>subjectContainer - Input and label HTML div container element.</li>
<li>location - Location input field.</li>
<li>locationLabel - Location label.</li>
<li>locationContainer - Input and label HTML div container element.</li>
<li>from - From datetime input field.</li>
<li>fromLabel - From label.</li>
<li>fromContainer - Input and label HTML div container element.</li>
<li>to - To Datetimeinput field.</li>
<li>toLabel - To label.</li>
<li>toContainer - Input and label HTML div container element.</li>
<li>allDay - AllDay checkbox field.</li>
<li>allDayLabel - AllDay label.</li>
<li>allDayContainer - Checkbox and label HTML div container element.</li>
<li>timeZone - Timezone DropDownList field.</li>
<li>timeZoneLabel - TimeZone label.</li>
<li>timeZoneContainer - DropDownList and label HTML div container element.</li>
<li>description - Description input field.</li>
<li>descriptionLabel - Description label.</li>
<li>descriptionContainer - Input and label HTML div container element.</li>
<li>color - Color DropDownList field.</li>
<li>colorLabel - Subject label.</li>
<li>colorContainer - DropDownList and label container element.</li>
<li>status - Status DropDownList field.</li>
<li>statusLabel - Status label.</li>
<li>statustContainer - DropDownList and label container element.</li>
<li>resource - Resource DropDownList field.</li>
<li>resourceLabel - Resource label.</li>
<li>resourceContainer - DropDownList and label container element.</li>
<li>buttonsField - buttons HTML div container HTML Element.</li>
<li>saveButton - Save button.</li>
<li>deleteButton - Delete button.</li>
<li>cancelButton - Cancel button.</li>
<li>daily.repeatDayInterval - NumberInput for daily repeat pattern.</li>
<li>daily.repeatDayLabel - Label HTML Element.</li>
<li>daily.panel - Daily repeat pattern HTML div container element.</li>
<li>weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.</li>
<li>weekly.repeatWeekIntervalLabel - Label element.</li>
<li>weekly.repeatDaysLabel - Label element.</li>
<li>weekly.repeatDays - Array of Checkboxes.</li>
<li>weekly.panel - Weekly repeat pattern HTML div container element.</li>
<li>monthly.repeatMonth - NumberInput for monthly repeat pattern.</li>
<li>monthly.repeatMonthLabel - Label element.</li>
<li>monthly.repeatMonthDay - NumberInput for the month day in the pattern.</li>
<li>monthly.repeatMonthDayBool - RadioButton element.</li>
<li>monthly.repeatMonthDayLabel - Label element.</li>
<li>monthly.repeatDayOfWeekBool - RadioButton element.</li>
<li>monthly.repeatDayOfWeek - DropDownList element.</li>
<li>monthly.repeatDayOfWeekLabel - Label element.</li>
<li>monthly.repeatDayOfWeekType - DropDownList element.</li>
<li>monthly.panel - Monthly repeat pattern HTML div container element.</li>
<li>yearly.repeatYear - NumberInput for yearly repeat pattern.</li>
<li>yearly.repeatYearLabel - Label element.</li>
<li>yearly.repeatYearBool - RadioButton element.</li>
<li>yearly.repeatYearBoolLabel - Label element.</li>
<li>yearly.repeatYearMonth - DropDownList element.</li>
<li>yearly.repeatYearDay - NumberInput element.</li>
<li>yearly.repeatDayOfWeekBool - RadioButton element.</li>
<li>yearly.repeatDayOfWeekType - DropDownList element.</li>
<li>yearly.repeatDayOfWeekLabel - Label element.</li>
<li>yearly.repeatDayOfWeekMonth - DropDownList element.</li>
<li>yearly.panel - Yearly repeat pattern HTML div container element.</li>
<li>resetExceptions - Checkbox element.</li>
<li>resetExceptionsLabel - Label element.</li>
<li>resetExceptionsContainer - Checkbox and Label container element.</li>
<li>repeat - DropDownList element.</li>
<li>repeatLabel - Label element.</li>
<li>repeatContainer - DropDownList and Label container element.</li>
<li>repeatPanel - HTML div container element for repeat patterns.</li>
<li>repeatEndPanelContainer - HTML div container element for the repeat pattern's end.</li>
<li>repeatEndPanel.repeatEndNever - RadioButton element.</li>
<li>repeatEndPanel.repeatEndNeverLabel - Label element.</li>
<li>repeatEndPanel.repeatEndAfter - RadioButton element.</li>
<li>repeatEndPanel.repeatEndAfterValue - NumberInput element.</li>
<li>repeatEndPanel.repeatEndAfterLabel - Label element.</li>
<li>repeatEndPanel.repeatEndOn - RadioButton element.</li>
<li>repeatEndPanel.repeatEndOnValue - DateTimeInput element.</li>
<li>repeatEndPanel.repeatEndOnLabel - Label element.</li>
</ul>
</li>
</ul>
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>editDialogClose</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('editDialogClose', function (event) { var args = event.args; var dialog = args.dialog; var fields = args.fields; var appointment = args.appointment; });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the editDialogClose event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span97'>viewChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>viewChange</code> event by type: jqxScheduler.
</p>
<pre><code>$('#jqxScheduler').on('viewChange', function (event) { var args = event.args; var date = args.date; var from = args.from; var to = args.to; var oldViewType = args.oldViewType; var newViewType = args.newViewType });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-events">Bind to the viewChange event by type: jqxScheduler.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span69'>addAppointment</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds a new appointment.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>addAppointment</code> method.
</p>
<pre><code>
// @param appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
$('#jqxScheduler').jqxScheduler('addAppointment', appointment);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-addappointment">adds a new appointment.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span70'>beginAppointmentsUpdate</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Begins an update process and stops the Scheduler's rendering and appointments rendering.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>beginAppointmentsUpdate</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('beginAppointmentsUpdate');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-methods">beginAppointmentsUpdate is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span71'>clearAppointmentsSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears the appointments selection.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>clearAppointmentsSelection</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('clearAppointmentsSelection');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-clearappointmentsselection">clearAppointmentsSelection is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span72'>clearSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears cells selection.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>clearSelection</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('clearSelection');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-clearselection">clearSelection is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span73'>closeMenu</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Closes the context menu.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>closeMenu</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('closeMenu');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-closemenu">closeMenu is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span74'>closeDialog</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Closes the edit dialog.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>closeDialog</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('closeDialog');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-closedialog">closeDialog is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span75'>deleteAppointment</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Deletes an appointment.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>appointmenId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>deleteAppointment</code> method.
</p>
<pre><code>
// @param appointmentId - appointment's Id.
$('#jqxScheduler').jqxScheduler('deleteAppointment', appointmentId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-deleteappointment">deleteAppointment is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span76'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the Scheduler and removes it from the DOM.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('destroy');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-destroy">destroy is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span77'>endAppointmentsUpdate</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Ends the update process and resumes the Scheduler's rendering. The method works together with the beginAppointmentsUpdate.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>endAppointmentsUpdate</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('endAppointmentsUpdate');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-methods">endAppointmentsUpdate is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span78'>ensureAppointmentVisible</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Scrolls to an appointment if it is out of the visible area.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>id</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>ensureAppointmentVisible</code> method.
</p>
<pre><code>
// @param appointmentId - appointment's Id.
$('#jqxScheduler').jqxScheduler('ensureAppointmentVisible', appointmentId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-methods">ensureAppointmentVisible is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span79'>ensureVisible</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Scrolls to a Date.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>resourceId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>ensureVisible</code> method.
</p>
<pre><code>
// @param jqxDate - jqxDate object or JavaScript Date object.
// @param resourceId - Id of a resource. Pass null when there are no resources or resources orientation is set to "none" or orientation is not set. The resourceId param ensures that the Scheduler will scroll to the Date in a given resource when the resources orientation is "horizontal" or "vertical".
$('#jqxScheduler').jqxScheduler('ensureVisible', jqxDate, resourceId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-ensurevisible">ensureVisible is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span105'>exportData</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Exports jqxScheduler's data to ICS, Excel, HTML, XML, JSON, CSV or TSV. See also the <code>exportSettings</code> property
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>format</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>exportData</code> method.
</p>
<pre><code>$("#jqxScheduler").jqxScheduler('exportData','xls');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=scheduler-data-export">Invoke the exportData method of the jqxScheduler.</a>
</div>
<br />
Export to Excel works with the ExcelML format. ExcelML is XML-based file format. It complies to the <a href="http://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx">Microsoft XMLSS specification</a> and is supported in Microsoft Office 2003 and later.
<br />
* When you open export to Excel, you may receive the following message: "The file you are trying to open, 'file_name.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening this file. Do you want to open the file now?"
<br />
The reason of this warning message is explained in details in the following post: <a href="http://blogs.msdn.com/b/vsofficedeveloper/archive/2008/03/11/excel-2007-extension-warning.aspx">excel-2007-extension-warning.aspx</a>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span80'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Focuses the Scheduler.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>
$('#jqxScheduler').jqxScheduler('focus');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-focus-1">focus is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span81'>getAppointmentProperty</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the value of an Appointment property.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>appointmentId</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>name</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getAppointmentProperty</code> method.
</p>
<pre><code>
// @param appointmentId - appointment's Id.
// @param propertyName - property's name. See appointmentDateFields property for the list of appointment properties.
var propertyValue = $('#jqxScheduler').jqxScheduler('getAppointmentProperty', appointmentId, propertyName);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-getappointmentproperty">getAppointmentProperty is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span82'>getSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the cells selection. Returns an object with the following members:
<ul>
<li>from - jqxDate which represents the selection's start. </li>
<li>to - jqxDate which represents the selection's end. </li>
<li>resourceId - selection's resource Id if resources are enabled.</li>
</ul>
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getSelection</code> method.
</p>
<pre><code>
var selection = $('#jqxScheduler').jqxScheduler('getSelection');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-getselection">getSelection is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span83'>getAppointments</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the appointments loaded in jqxScheduler. The return value is an Array of Objects. Each Object has the appointmentDataFields. See appointmentDataFields property.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getAppointments</code> method.
</p>
<pre><code>
var appointments = $('#jqxScheduler').jqxScheduler('getAppointments');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-data-appointments">getAppointments is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span84'>getDataAppointments</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the appointments loaded in jqxScheduler. The return value is an Array of Objects. Each Object has the fields defined in the dataAdapter's source object.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getDataAppointments</code> method.
</p>
<pre><code>
var appointments = $('#jqxScheduler').jqxScheduler('getDataAppointments');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-data-appointments">getDataAppointments is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span85'>hideAppointmentsByResource</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Hides appointments by given resourceId.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>resourcesId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>hideAppointmentsByResource</code> method.
</p>
<pre><code>
// @param resourceId - resourceId.
$('#jqxScheduler').jqxScheduler('hideAppointmentsByResource', resourceId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-hideappointmentsbyresource">hideAppointmentsByResource is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span86'>openMenu</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Opens the context menu.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>openMenu</code> method.
</p>
<pre><code>
// @param left - left position.
// @param top - top position.
$('#jqxScheduler').jqxScheduler('openMenu', 50, 100);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-openmenu">openMenu is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span87'>openDialog</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Opens the edit dialog.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>openDialog</code> method.
</p>
<pre><code>
// @param left - left position.
// @param top - top position.
$('#jqxScheduler').jqxScheduler('openDialog', 50, 100);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-opendialog">openDialog is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span88'>selectAppointment</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects an appointment.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>appointmentId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectAppointment</code> method.
</p>
<pre><code>
// @param appointmentId - appointment's Id.
$('#jqxScheduler').jqxScheduler('selectAppointment', appointmentId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-selectappointment">selectAppointment is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span89'>setAppointmentProperty</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the value of an appointment's property.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>appointmentId</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>name</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>value</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>setAppointmentProperty</code> method.
</p>
<pre><code>
// @param appointmentId - appointment's Id.
// @param propertyName - property's name. See appointmentDateFields property for the list of appointment properties.
// @param value - property's new value.
$('#jqxScheduler').jqxScheduler('setAppointmentProperty', appointmentId, propertyName, value);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-methods">setAppointmentProperty is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span90'>selectCell</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects a cell.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>date</em></td>
<td>Date</td>
<td></td>
</tr>
<tr>
<td><em>allday</em></td>
<td>Boolean</td>
<td></td>
</tr>
<tr>
<td><em>resourceId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectCell</code> method.
</p>
<pre><code>
// @param date - jqxDate object or JavaScript date.
// @param allDay - Boolean value which specifies whether the cell to be selected is from the all day area.
// @param resourceId - resource's Id when resources are enabled.
$('#jqxScheduler').jqxScheduler('selectCell', date, allDay, resourceId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-selectcell">selectCell is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span91'>showAppointmentsByResource</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Shows appointments by given resourceId.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>resourceId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>showAppointmentsByResource</code> method.
</p>
<pre><code>
// @param resourceId - resourceId.
$('#jqxScheduler').jqxScheduler('showAppointmentsByResource', resourceId);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-showappointmentsbyresource">showAppointmentsByResource is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span92'>scrollWidth</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returns the scrollbable width.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Number</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>scrollWidth</code> method.
</p>
<pre><code>
var width = $('#jqxScheduler').jqxScheduler('scrollWidth');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrolling-methods">scrollWidth is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span93'>scrollHeight</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returns the scrollbable height.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Number</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>scrollHeight</code> method.
</p>
<pre><code>
var height = $('#jqxScheduler').jqxScheduler('scrollHeight');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrolling-methods">scrollHeight is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span94'>scrollLeft</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Scrolls horizontally to a given position.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>scrollLeft</code> method.
</p>
<pre><code>
// @param left - horizontal scrollbar's value.
$('#jqxScheduler').jqxScheduler('scrollLeft', 100);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrolling-methods">scrollLeft is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span95'>scrollTop</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Scrolls vertically to a given position.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>scrollTop</code> method.
</p>
<pre><code>
// @param top - vertical scrollbar's value.
$('#jqxScheduler').jqxScheduler('scrollTop', 100);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxscheduler-scrolling-methods">scrollTop is invoked.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>