| Name | Type | Default |
|---|
|
appointmentOpacity
|
Number
|
0.7
|
Sets or gets the appointmentOpacity property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} appointmentOpacity={0.7} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentsMinHeight
|
Number
|
18
|
Sets or gets the appointmentsMinHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} appointmentsMinHeight={30} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
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 appointmentDataFields property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} appointmentDataFields={appointmentDataFields} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentTooltips
|
Boolean
|
true
|
Sets or gets the appointmentTooltips property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} appointmentTooltips={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
columnsHeight
|
Number
|
30
|
Sets or gets the columnsHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} columnsHeight={40} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenu
|
Boolean
|
true
|
Sets or gets the contextMenu property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} contextMenu={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuOpen
|
Function
|
null
|
Sets or gets the contextMenuOpen property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} contextMenuOpen={contextMenuOpen} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuClose
|
Function
|
null
|
Sets or gets the contextMenuClose property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} contextMenuClose={contextMenuClose} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuItemClick
|
Function
|
null
|
Sets or gets the contextMenuItemClick property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} contextMenuItemClick={contextMenuItemClick} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuCreate
|
Function
|
null
|
Sets or gets the contextMenuCreate property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} contextMenuCreate={contextMenuCreate} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
changedAppointments
|
Array
|
[]
|
Sets or gets the changedAppointments property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} changedAppointments={changedAppointments} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} disabled={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
date
|
jqxDate
|
new $.jqx.date('todayDate')
|
Sets or gets the date property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dayNameFormat
|
String
|
'full'
|
Sets or gets the dayNameFormat property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} dayNameFormat={ 'abbr'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} enableHover={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialog
|
Boolean
|
true
|
Sets or gets the editDialog property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialog={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogDateTimeFormatString
|
String
|
"dd/MM/yyyy hh:mm tt"
|
Sets or gets the editDialogDateTimeFormatString property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogDateTimeFormatString={ 'dd-MM-yyyy HH:mm'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogDateFormatString
|
String
|
"dd/MM/yyyy"
|
Sets or gets the editDialogDateFormatString property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogDateFormatString={ 'dd/MM/yyyy'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogOpen
|
Function
|
null
|
Sets or gets the editDialogOpen property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogOpen={editDialogOpen} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogCreate
|
Function
|
null
|
Sets or gets the editDialogCreate property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogCreate={editDialogCreate} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogKeyDown
|
Function
|
null
|
Sets or gets the editDialogKeyDown property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogKeyDown={editDialogKeyDown} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogClose
|
Function
|
null
|
Sets or gets the editDialogClose property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} editDialogClose={editDialogClose} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
exportSettings
|
Object
|
{ serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}
|
Sets or gets the exportSettings property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} exportSettings={exportSettings} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
600
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} height={600} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
legendPosition
|
String
|
"bottom"
|
Sets or gets the legendPosition property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} legendPosition={ 'top'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
legendHeight
|
Number
|
34
|
Sets or gets the legendHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} legendHeight={40} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
localization
|
Object
|
|
Sets or gets the localization property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} localization={localization} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
min
|
jqxDate
|
new $.jqx.date(0)
|
Sets or gets the min property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} min={new $.jqx.date(2015, 1, 1)} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
max
|
jqxDate
|
new $.jqx.date(9999, 12, 31),
|
Sets or gets the max property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} max={new $.jqx.date(2015, 1, 1)} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
ready
|
Function
|
null
|
Sets or gets the ready property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} ready={ready} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
renderAppointment
|
Function
|
null
|
Sets or gets the renderAppointment property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} renderAppointment={renderAppointment} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rendering
|
Function
|
null
|
Sets or gets the rendering property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} rendering={rendering} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rendered
|
Function
|
null
|
Sets or gets the rendered property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} rendered={rendered} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} rtl={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
resources
|
Object
|
null
|
Sets or gets the resources property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} resources={resources} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rowsHeight
|
Number
|
27
|
Sets or gets the rowsHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} rowsHeight={40} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showToolbar
|
Boolean
|
true
|
Sets or gets the showToolbar property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} showToolbar={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showLegend
|
Boolean
|
false
|
Sets or gets the showLegend property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} showLegend={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollBarSize
|
Number
|
15
|
Sets or gets the scrollBarSize property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} scrollBarSize={20} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
source
|
Object
|
null
|
Sets or gets the source property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
statuses
|
Object
|
{
free: "white",
tentative: "tentative",
busy: "transparent",
outOfOffice: "#800080"
}
|
Sets or gets the statuses property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} statuses={statuses} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
touchRowsHeight
|
Number
|
37
|
Sets or gets the touchRowsHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} touchRowsHeight={40} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} theme={ 'energyblue'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
touchAppointmentsMinHeight
|
Number
|
27
|
Sets or gets the touchAppointmentsMinHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} touchAppointmentsMinHeight={40} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
touchScrollBarSize
|
Number
|
18
|
Sets or gets the touchScrollBarSize property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} touchScrollBarSize={20} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
timeZone
|
String
|
''
|
Sets or gets the timeZone property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} timeZone={ 'UTC'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
touchDayNameFormat
|
String
|
'abbr'
|
Sets or gets the touchDayNameFormat property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} touchDayNameFormat={ 'abbr'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolBarRangeFormat
|
String
|
'dd MMMM yyyy'
|
Sets or gets the toolBarRangeFormat property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} toolBarRangeFormat={ 'dd MM yyyy'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolBarRangeFormatAbbr
|
String
|
'dd MM yyyy'
|
Sets or gets the toolBarRangeFormatAbbr property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} toolBarRangeFormatAbbr={ 'dd MM yy'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolbarHeight
|
Number
|
54
|
Sets or gets the toolbarHeight property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} toolbarHeight={60} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
views
|
Array
|
['dayView', 'weekView', 'monthView']
|
Sets or gets the views property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} views={views} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
view
|
String
|
|
Sets or gets the view property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} view={ 'timelineWeekView'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
width
|
Number
|
800
|
Sets or gets the width property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} width={600} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
appointmentChange
|
Event
|
|
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.
Code example
Bind to the appointmentChange event by type: jqxScheduler.
Code examples
Bind to the appointmentChange event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('appointmentChange', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentClick
|
Event
|
|
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.
Code example
Bind to the appointmentClick event by type: jqxScheduler.
Code examples
Bind to the appointmentClick event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('appointmentClick', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentDoubleClick
|
Event
|
|
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.
Code example
Bind to the appointmentDoubleClick event by type: jqxScheduler.
Code examples
Bind to the appointmentDoubleClick event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('appointmentDoubleClick', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentDelete
|
Event
|
|
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.
Code example
Bind to the appointmentDelete event by type: jqxScheduler.
Code examples
Bind to the appointmentDelete event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('appointmentDelete', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
appointmentAdd
|
Event
|
|
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.
Code example
Bind to the appointmentAdd event by type: jqxScheduler.
Code examples
Bind to the appointmentAdd event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('appointmentAdd', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
bindingComplete
|
Event
|
|
This event is triggered when the binding is completed.
Code example
Bind to the bindingComplete event by type: jqxScheduler.
Code examples
Bind to the bindingComplete event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('bindingComplete', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
cellClick
|
Event
|
|
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.
Code example
Bind to the cellClick event by type: jqxScheduler.
Code examples
Bind to the cellClick event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('cellClick', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
cellDoubleClick
|
Event
|
|
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.
Code example
Bind to the cellDoubleClick event by type: jqxScheduler.
Code examples
Bind to the cellDoubleClick event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('cellDoubleClick', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuOpen
|
Event
|
|
This event is triggered when the context menu is opened. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuOpen event by type: jqxScheduler.
Code examples
Bind to the contextMenuOpen event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('contextMenuOpen', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuClose
|
Event
|
|
This event is triggered when the context menu is closed. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuClose event by type: jqxScheduler.
Code examples
Bind to the contextMenuClose event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('contextMenuClose', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuItemClick
|
Event
|
|
This event is triggered when the context menu item is clicked. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- item - the clicked menu item.
Code example
Bind to the contextMenuItemClick event by type: jqxScheduler.
Code examples
Bind to the contextMenuItemClick event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('contextMenuItemClick', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
contextMenuCreate
|
Event
|
|
This event is triggered when the context menu item is created. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuCreate event by type: jqxScheduler.
Code examples
Bind to the contextMenuCreate event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('contextMenuCreate', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dateChange
|
Event
|
|
This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.
Code example
Bind to the dateChange event by type: jqxScheduler.
Code examples
Bind to the dateChange event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('dateChange', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editRecurrenceDialogOpen
|
Event
|
|
This event is triggered when the recurrence dialog is opened. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.
Code examples
Bind to the editRecurrenceDialogOpen event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('editRecurrenceDialogOpen', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editRecurrenceDialogClose
|
Event
|
|
This event is triggered when the recurrence dialog is closed. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the editRecurrenceDialogClose event by type: jqxScheduler.
Code examples
Bind to the editRecurrenceDialogClose event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('editRecurrenceDialogClose', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogCreate
|
Event
|
|
This event is triggered when the edit dialog is created. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogCreate event by type: jqxScheduler.
Code examples
Bind to the editDialogCreate event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('editDialogCreate', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogOpen
|
Event
|
|
This event is triggered when the edit dialog is opened. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogOpen event by type: jqxScheduler.
Code examples
Bind to the editDialogOpen event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('editDialogOpen', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editDialogClose
|
Event
|
|
This event is triggered when the edit dialog is closed. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogClose event by type: jqxScheduler.
Code examples
Bind to the editDialogClose event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('editDialogClose', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
viewChange
|
Event
|
|
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.
Code example
Bind to the viewChange event by type: jqxScheduler.
Code examples
Bind to the viewChange event of jqxScheduler.
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.on('viewChange', (event) => { // Do Something... }); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
addAppointment
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.addAppointment(1,Item1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
beginAppointmentsUpdate
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.beginAppointmentsUpdate(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
clearAppointmentsSelection
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.clearAppointmentsSelection(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
clearSelection
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.clearSelection(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
closeMenu
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.closeMenu(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
closeDialog
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.closeDialog(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
deleteAppointment
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.deleteAppointment(1,Item1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.destroy(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
endAppointmentsUpdate
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.endAppointmentsUpdate(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
ensureAppointmentVisible
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.ensureAppointmentVisible(1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
ensureVisible
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.ensureVisible(1,Item1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
exportData
|
Object(optional)
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.exportData(xls); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
focus
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.focus(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getAppointmentProperty
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.getAppointmentProperty(1,Item1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getSelection
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.getSelection(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getAppointments
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.getAppointments(1,Item1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getDataAppointments
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.getDataAppointments(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hideAppointmentsByResource
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.hideAppointmentsByResource(1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
openMenu
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.openMenu(10,20); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
openDialog
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.openDialog(10,20); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectAppointment
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.selectAppointment(1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
setAppointmentProperty
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.setAppointmentProperty(1,status,busy); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectCell
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.selectCell(1,false,1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showAppointmentsByResource
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.showAppointmentsByResource(1); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollWidth
|
Number
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.scrollWidth(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollHeight
|
Number
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myScheduler.scrollHeight(); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollLeft
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.scrollLeft(10); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollTop
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js'; class App extends React.Component { componentDidMount() { this.refs.myScheduler.scrollTop(10); } render() { let 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: 'sampledata/appointments.txt' }; let dataAdapter = new jqx.dataAdapter(source); let appointmentDataFields = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; let views = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; let date = new jqx.date(2016, 11, 23); return ( <JqxScheduler ref= 'myScheduler' width={850} height={600} source={dataAdapter} view={ 'weekView'} views={views} appointmentDataFields={appointmentDataFields} date={date} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
