| Name
|
Type
|
Default
|
|
appointmentOpacity
|
Boolean
|
false
|
Sets or gets the appointments opacity.
Code example
Set the appointmentOpacity property.
$("#jqxScheduler").jqxScheduler({ appointmentOpacity: 0.7 });
Get the appointmentOpacity property.
var appointmentOpacity = $('#jqxScheduler').jqxScheduler('appointmentOpacity');
|
|
appointmentsMinHeight
|
Number
|
18
|
Sets or gets the minimum height of appointments in the all day area, month view and timeline views.
Code example
Set the appointmentsMinHeight property.
$("#jqxScheduler").jqxScheduler({ appointmentsMinHeight: 30 });
Get the appointmentsMinHeight property.
var appointmentsMinHeight = $('#jqxScheduler').jqxScheduler('appointmentsMinHeight');
|
|
appointmentDataFields
|
Object
|
{
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"
}
|
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.
- allDay - boolean field. Defines whether the appointment is all day appointment.
- background - string field. Expects Hex string. Defines the appointment's background.
- borderColor - string field. Expects Hex string. Defines the appointment's border color.
- color - string field. Expects Hex string. Defines the appointment's text color.
- description - string field. Defines the appointment's description.
- draggable - boolean field. Defines whether the user can drag the appointment.
- from - jqxDate field. Defines the appointment's start.
- hidden - boolean field. Defines whether the appointment is displayed.
- id - string/number field. Defines the Id of the appointment.
- location - string field. Defines the appointment's location.
- recurrencePattern - string field. Defines the appointment's recurrence rule. Ex: "FREQ=DAILY;". List of supported keywords:
- 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.
- COUNT - Number. The Count rule part defines the number of occurrences at which to range-bound the recurrence.
- UNTIL - String like "UNTIL=20160919T210000Z". The UNTIL rule part defines a date-time value where the recurrence ends.
- 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.
- 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
- BYMONTH - Number like 1. The BYMONTH rule part specifies a month of the year. Valid values are 1 to 12.
- INTERVAL - Number like 1. The INTERVAL rule part contains a positive integer representing how often the recurrence rule repeats. The default value is "1",
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"
- 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"
- resizable - boolean field. Defines whether the user can resize the appointment.
- resourceId - string/number field. Defines the appointment's resource.
- readOnly - boolean field. Defines whether the appointment is editable.
- subject - string field. Defines the appointment's subject.
- 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.
- status - string field. Defines the appointment's status. See the statuses property for available statuses.
- to - jqxDate field. Defines the appointment's end.
- tooltip - string field. Defines the appointment's tooltip displayed on mouse hover.
- timeZone - string field. Defines the appointment's time zone. See timeZones for the list of timeZones.
Code example
Set the appointmentDataFields property.
$("#jqxScheduler").jqxScheduler({appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
style: "style",
resourceId: "calendar"
}
});
Get the appointmentDataFields property.
var appointmentDataFields = $('#jqxScheduler').jqxScheduler('appointmentDataFields');
|
|
appointmentTooltips
|
Boolean
|
true
|
Sets or gets whether Scheduler appointments are with tooltips enabled.
Code example
Set the appointmentTooltips property.
$("#jqxScheduler").jqxScheduler({ appointmentTooltips: true });
Get the appointmentTooltips property.
var appointmentTooltips = $('#jqxScheduler').jqxScheduler('appointmentTooltips');
|
|
columnsHeight
|
Number
|
30
|
Sets or gets the Schedulers' columns height.
Code example
Set the columnsHeight property.
$("#jqxScheduler").jqxScheduler({ columnsHeight: 35 });
Get the columnsHeight property.
var columnsHeight = $('#jqxScheduler').jqxScheduler('columnsHeight');
|
|
contextMenu
|
Boolean
|
true
|
Sets or gets whether the Scheduler's context menu is enabled.
Code example
Set the contextMenu property.
$("#jqxScheduler").jqxScheduler({ contextMenu: false });
Get the contextMenu property.
var contextMenu = $('#jqxScheduler').jqxScheduler('contextMenu');
|
|
contextMenuOpen
|
Function
|
null
|
Sets or gets a function called when the context menu is opened.
Code example
Set the contextMenuOpen property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { 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 3", 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, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } 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 4", 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, source: adapter, view: 1, showLegend: true, /** * called when the context menu is created. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} settings - Object with the menu's initialization settings. */ contextMenuCreate: function(menu, settings) { var source = settings.source; source.push({ id: "delete", label: "Delete Appointment" }); source.push({ id: "status", label: "Set Status", items: [ { label: "Free", id: "free" }, { label: "Out of Office", id: "outOfOffice" }, { label: "Tentative", id: "tentative" }, { label: "Busy", id: "busy" } ] }); }, /** * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the jqxMenu's itemclick event object. */ contextMenuItemClick: function (menu, appointment, event) { var args = event.args; switch (args.id) { case "delete": $( "#scheduler").jqxScheduler( 'deleteAppointment', appointment.id); return true; case "free": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'free'); return true; case "outOfOffice": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'outOfOffice'); return true; case "tentative": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'tentative'); return true; case "busy": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'busy'); return true; } }, /** * called when the menu is opened. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the open event. */ contextMenuOpen: function (menu, appointment, event) { if (!appointment) { menu.jqxMenu( 'hideItem', 'delete'); menu.jqxMenu( 'hideItem', 'status'); } else { menu.jqxMenu( 'showItem', 'delete'); menu.jqxMenu( 'showItem', 'status'); } }, /** * called when the menu is closed. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the close event. */ contextMenuClose: function (menu, appointment, event) { }, ready: function () { $( "#scheduler").jqxScheduler( 'ensureAppointmentVisible', 'id1'); }, resources: { colorScheme: "scheme02", dataField: "calendar", source: new $.jqx.dataAdapter(source) }, appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }, views: [ 'dayView', 'weekView', 'monthView' ] }); }); </script></head><body> <div id="scheduler"></div>
Get the contextMenuOpen property.
var contextMenuOpen = $('#jqxScheduler').jqxScheduler('contextMenuOpen');
|
|
contextMenuClose
|
Function
|
null
|
Sets or gets a function called when the context menu is closed.
Code example
Set the contextMenuClose property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { 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 3", 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, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } 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 4", 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, source: adapter, view: 1, showLegend: true, /** * called when the context menu is created. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} settings - Object with the menu's initialization settings. */ contextMenuCreate: function(menu, settings) { var source = settings.source; source.push({ id: "delete", label: "Delete Appointment" }); source.push({ id: "status", label: "Set Status", items: [ { label: "Free", id: "free" }, { label: "Out of Office", id: "outOfOffice" }, { label: "Tentative", id: "tentative" }, { label: "Busy", id: "busy" } ] }); }, /** * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the jqxMenu's itemclick event object. */ contextMenuItemClick: function (menu, appointment, event) { var args = event.args; switch (args.id) { case "delete": $( "#scheduler").jqxScheduler( 'deleteAppointment', appointment.id); return true; case "free": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'free'); return true; case "outOfOffice": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'outOfOffice'); return true; case "tentative": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'tentative'); return true; case "busy": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'busy'); return true; } }, /** * called when the menu is opened. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the open event. */ contextMenuOpen: function (menu, appointment, event) { if (!appointment) { menu.jqxMenu( 'hideItem', 'delete'); menu.jqxMenu( 'hideItem', 'status'); } else { menu.jqxMenu( 'showItem', 'delete'); menu.jqxMenu( 'showItem', 'status'); } }, /** * called when the menu is closed. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the close event. */ contextMenuClose: function (menu, appointment, event) { }, ready: function () { $( "#scheduler").jqxScheduler( 'ensureAppointmentVisible', 'id1'); }, resources: { colorScheme: "scheme02", dataField: "calendar", source: new $.jqx.dataAdapter(source) }, appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }, views: [ 'dayView', 'weekView', 'monthView' ] }); }); </script></head><body> <div id="scheduler"></div>
Get the contextMenuClose property.
var contextMenuClose = $('#jqxScheduler').jqxScheduler('contextMenuClose');
|
|
contextMenuItemClick
|
Function
|
null
|
Sets or gets a function called when a context menu item is clicked.
Code example
Set the contextMenuItemClick property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { 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 3", 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, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } 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 4", 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, source: adapter, view: 1, showLegend: true, /** * called when the context menu is created. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} settings - Object with the menu's initialization settings. */ contextMenuCreate: function(menu, settings) { var source = settings.source; source.push({ id: "delete", label: "Delete Appointment" }); source.push({ id: "status", label: "Set Status", items: [ { label: "Free", id: "free" }, { label: "Out of Office", id: "outOfOffice" }, { label: "Tentative", id: "tentative" }, { label: "Busy", id: "busy" } ] }); }, /** * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the jqxMenu's itemclick event object. */ contextMenuItemClick: function (menu, appointment, event) { var args = event.args; switch (args.id) { case "delete": $( "#scheduler").jqxScheduler( 'deleteAppointment', appointment.id); return true; case "free": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'free'); return true; case "outOfOffice": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'outOfOffice'); return true; case "tentative": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'tentative'); return true; case "busy": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'busy'); return true; } }, /** * called when the menu is opened. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the open event. */ contextMenuOpen: function (menu, appointment, event) { if (!appointment) { menu.jqxMenu( 'hideItem', 'delete'); menu.jqxMenu( 'hideItem', 'status'); } else { menu.jqxMenu( 'showItem', 'delete'); menu.jqxMenu( 'showItem', 'status'); } }, /** * called when the menu is closed. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the close event. */ contextMenuClose: function (menu, appointment, event) { }, ready: function () { $( "#scheduler").jqxScheduler( 'ensureAppointmentVisible', 'id1'); }, resources: { colorScheme: "scheme02", dataField: "calendar", source: new $.jqx.dataAdapter(source) }, appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }, views: [ 'dayView', 'weekView', 'monthView' ] }); }); </script></head><body> <div id="scheduler"></div>
Get the contextMenuItemClick property.
var contextMenuItemClick = $('#jqxScheduler').jqxScheduler('contextMenuItemClick');
|
|
contextMenuCreate
|
Function
|
null
|
Sets or gets a function called when the context menu is created.
Code example
Set the contextMenuCreate property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { 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 3", 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, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } 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 4", 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, source: adapter, view: 1, showLegend: true, /** * called when the context menu is created. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} settings - Object with the menu's initialization settings. */ contextMenuCreate: function(menu, settings) { var source = settings.source; source.push({ id: "delete", label: "Delete Appointment" }); source.push({ id: "status", label: "Set Status", items: [ { label: "Free", id: "free" }, { label: "Out of Office", id: "outOfOffice" }, { label: "Tentative", id: "tentative" }, { label: "Busy", id: "busy" } ] }); }, /** * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the jqxMenu's itemclick event object. */ contextMenuItemClick: function (menu, appointment, event) { var args = event.args; switch (args.id) { case "delete": $( "#scheduler").jqxScheduler( 'deleteAppointment', appointment.id); return true; case "free": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'free'); return true; case "outOfOffice": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'outOfOffice'); return true; case "tentative": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'tentative'); return true; case "busy": $( "#scheduler").jqxScheduler( 'setAppointmentProperty', appointment.id, 'status', 'busy'); return true; } }, /** * called when the menu is opened. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the open event. */ contextMenuOpen: function (menu, appointment, event) { if (!appointment) { menu.jqxMenu( 'hideItem', 'delete'); menu.jqxMenu( 'hideItem', 'status'); } else { menu.jqxMenu( 'showItem', 'delete'); menu.jqxMenu( 'showItem', 'status'); } }, /** * called when the menu is closed. * @param {Object} menu - jqxMenu's jQuery object. * @param {Object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection. * @param {jQuery.Event Object} the close event. */ contextMenuClose: function (menu, appointment, event) { }, ready: function () { $( "#scheduler").jqxScheduler( 'ensureAppointmentVisible', 'id1'); }, resources: { colorScheme: "scheme02", dataField: "calendar", source: new $.jqx.dataAdapter(source) }, appointmentDataFields: { from: "start", to: "end", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calendar" }, views: [ 'dayView', 'weekView', 'monthView' ] }); }); </script></head><body> <div id="scheduler"></div>
Get the contextMenuCreate property.
var contextMenuCreate = $('#jqxScheduler').jqxScheduler('contextMenuCreate');
|
|
changedAppointments
|
Array
|
[]
|
Gets an array with newly added, deleted or updated appointments. Each element in the Array is an Object which has:
- type - "Update", "Delete", "Add".
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Get the changedAppointments property.
var changedAppointments = $('#jqxScheduler').jqxScheduler('changedAppointments');
|
|
disabled
|
Boolean
|
false
|
Sets or gets whether the Scheduler is disabled.
Code example
Set the disabled property.
$("#jqxScheduler").jqxScheduler({ disabled: true });
Get the disabled property.
var disabled = $('#jqxScheduler').jqxScheduler('disabled');
|
|
date
|
jqxDate
|
new $.jqx.date('todayDate')
|
Sets or gets the Scheduler's Date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.
Code example
Set the date property.
$("#jqxScheduler").jqxScheduler({ date: new $.jqx.date('todayDate') });
Get the date property.
var date = $('#jqxScheduler').jqxScheduler('date');
|
|
dayNameFormat
|
string
|
'full'
|
Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.
Code example
Set the dayNameFormat property.
$("#jqxScheduler").jqxScheduler({ dayNameFormat: 'abbr') });
Get the dayNameFormat property.
var dayNameFormat = $('#jqxScheduler').jqxScheduler('dayNameFormat');
|
|
enableHover
|
Boolean
|
true
|
Sets or gets whether cells hover is enabled.
Code example
Set the enableHover property.
$("#jqxScheduler").jqxScheduler({ enableHover: false) });
Get the enableHover property.
var enableHover = $('#jqxScheduler').jqxScheduler('enableHover');
|
|
editDialog
|
Boolean
|
true
|
Sets or gets whether Edit Dialog is enabled.
Code example
Set the editDialog property.
$("#jqxScheduler").jqxScheduler({ editDialog: false) });
Get the editDialog property.
var editDialog = $('#jqxScheduler').jqxScheduler('editDialog');
|
|
editDialogDateTimeFormatString
|
String
|
"dd/MM/yyyy hh:mm tt"
|
Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is not allDay appointment.
Code example
Set the editDialogDateTimeFormatString property.
$("#jqxScheduler").jqxScheduler({ editDialogDateTimeFormatString: "dd/MM/yyyy hh:mm tt") });
Get the editDialogDateTimeFormatString property.
var editDialogDateTimeFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateTimeFormatString');
|
|
editDialogDateFormatString
|
String
|
"dd/MM/yyyy"
|
Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is allDay appointment.
Code example
Set the editDialogDateFormatString property.
$("#jqxScheduler").jqxScheduler({ editDialogDateFormatString: "dd/MM/yyyy") });
Get the editDialogDateFormatString property.
var editDialogDateFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateFormatString');
|
|
editDialogOpen
|
Function
|
null
|
Sets or gets a function called when the Scheduler's Edit Dialog is opened.
Code example
Set the editDialogOpen property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Fashion Expo", calendar: "East Coast Events", start: new Date(2016, 10, 15, 9, 0, 0), end: new Date(2016, 10, 18, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "Cloud Data Expo", calendar: "Middle West Events", start: new Date(2016, 10, 20, 10, 0, 0), end: new Date(2016, 10, 22, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Digital Media Conference", calendar: "West Coast Events", start: new Date(2016, 10, 23, 11, 0, 0), end: new Date(2016, 10, 28, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "Modern Software Development Conference", calendar: "West Coast Events", start: new Date(2016, 10, 10, 16, 0, 0), end: new Date(2016, 10, 12, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Marketing Future Expo", calendar: "Middle West Events", start: new Date(2016, 10, 5, 15, 0, 0), end: new Date(2016, 10, 6, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Future Computing", calendar: "East Coast Events", start: new Date(2016, 10, 13, 14, 0, 0), end: new Date(2016, 10, 20, 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); var printButton = null; $( "#scheduler").jqxScheduler({ date: new $.jqx.date(2016, 11, 23), width: 850, height: 600, source: adapter, view: 2, showLegend: true, // called when the dialog is created. editDialogCreate: function (dialog, fields, editAppointment) { // hide repeat option fields.repeatContainer.hide(); // hide status option fields.statusContainer.hide(); // hide timeZone option fields.timeZoneContainer.hide(); // hide color option fields.colorContainer.hide(); fields.subjectLabel.html( "Title"); fields.locationLabel.html( "Where"); fields.fromLabel.html( "Start"); fields.toLabel.html( "End"); fields.resourceLabel.html( "Calendar"); // add custom print button. printButton = $( "<button style='margin-left: 5px; float:right;'>Print</button>"); fields.buttons.append(printButton); printButton.jqxButton({ theme: this.theme }); printButton.click(function () { var appointment = editAppointment; if (!appointment) return; var appointmentContent = "<table class='printTable'>" + "<tr>" + "<td class='label'>Title</td>" + "<td>" + fields.subject.val() + "</td>" + "</tr>" + "<tr>" + "<td class='label'>Start</td>" + "<td>" + fields.from.val() + "</td>" + "</tr>" + "<tr>" + "<td class='label'>End</td>" + "<td>" + fields.to.val() + "</td>" + "</tr>" + "<tr>" + "<td class='label'>Where</td>" + "<td>" + fields.location.val() + "</td>" + "</tr>" + "<tr>" + "<td class='label'>Calendar</td>" + "<td>" + fields.resource.val() + "</td>" + "</tr>" + "</table>"; var newWindow = window.open( '', '', 'width=800, height=500'), document = newWindow.document.open(), pageContent = '<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="utf-8" />\n' + '<title>jQWidgets Scheduler</title>\n' + '<style>\n' + '.printTable {\n' + 'border-color: #aaa;\n' + '}\n' + '.printTable .label {\n' + 'font-weight: bold;\n' + '}\n' + '.printTable td{\n' + 'padding: 4px 3px;\n' + 'border: 1px solid #DDD;\n' + 'vertical-align: top;\n' + '}\n' + '</style>' + '</head>\n' + '<body>\n' + appointmentContent + '\n</body>\n</html>'; document.write(pageContent); document.close(); newWindow.print(); }); }, /** * called when the dialog is opened. Returning true as a result disables the built-in handler. * @param {Object} dialog - jqxWindow's jQuery object. * @param {Object} fields - Object with all widgets inside the dialog. * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection. */ editDialogOpen: function (dialog, fields, editAppointment) { if (!editAppointment && printButton) { printButton.jqxButton({ disabled: true }); } else if (editAppointment && printButton) { printButton.jqxButton({ disabled: false }); } }, /** * called when the dialog is closed. * @param {Object} dialog - jqxWindow's jQuery object. * @param {Object} fields - Object with all widgets inside the dialog. * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection. */ editDialogClose: function (dialog, fields, editAppointment) { }, /** * 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. * @param {Object} dialog - jqxWindow's jQuery object. * @param {Object} fields - Object with all widgets inside the dialog. * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection. * @param {jQuery.Event Object} the keyDown event. */ editDialogKeyDown: function (dialog, fields, editAppointment, event) { }, resources: { colorScheme: "scheme01", dataField: "calendar", source: new $.jqx.dataAdapter(source) |
