|
appointmentOpacity
|
number
|
0.7
|
Sets or gets the appointmentOpacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,appointmentOpacity:0.7, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentsMinHeight
|
number
|
18
|
Sets or gets the appointmentsMinHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,appointmentsMinHeight:30, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
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.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentTooltips
|
boolean
|
true
|
Sets or gets the appointmentTooltips property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,appointmentTooltips:false, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
columnsHeight
|
number
|
30
|
Sets or gets the columnsHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,columnsHeight:40, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenu
|
boolean
|
true
|
Sets or gets the contextMenu property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,contextMenu:false, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuOpen
|
function
|
null
|
Sets or gets the contextMenuOpen property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, contextMenuOpen:"contextMenuOpen", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuClose
|
function
|
null
|
Sets or gets the contextMenuClose property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, contextMenuClose:"contextMenuClose", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuItemClick
|
function
|
null
|
Sets or gets the contextMenuItemClick property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, contextMenuItemClick:"contextMenuItemClick", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuCreate
|
function
|
null
|
Sets or gets the contextMenuCreate property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, contextMenuCreate:"contextMenuCreate", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
changedAppointments
|
array
|
[]
|
Sets or gets the changedAppointments property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, changedAppointments:"changedAppointments", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,disabled:true, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
date
|
jqxdate
|
new $.jqx.date('todayDate')
|
Sets or gets the date property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
dayNameFormat
|
string
|
'full'
|
Sets or gets the dayNameFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, dayNameFormat:"abbr", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
enableHover
|
boolean
|
true
|
Sets or gets the enableHover property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,enableHover:false, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialog
|
boolean
|
true
|
Sets or gets the editDialog property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,editDialog:false, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogDateTimeFormatString
|
string
|
"dd/MM/yyyy hh:mm tt"
|
Sets or gets the editDialogDateTimeFormatString property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogDateTimeFormatString:"dd-MM-yyyy HH:mm", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogDateFormatString
|
string
|
"dd/MM/yyyy"
|
Sets or gets the editDialogDateFormatString property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogDateFormatString:"dd/MM/yyyy", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogOpen
|
function
|
null
|
Sets or gets the editDialogOpen property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogOpen:"editDialogOpen", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogCreate
|
function
|
null
|
Sets or gets the editDialogCreate property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogCreate:"editDialogCreate", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogKeyDown
|
function
|
null
|
Sets or gets the editDialogKeyDown property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogKeyDown:"editDialogKeyDown", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogClose
|
function
|
null
|
Sets or gets the editDialogClose property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, editDialogClose:"editDialogClose", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
exportSettings
|
object
|
{ serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}
|
Sets or gets the exportSettings property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, exportSettings:"exportSettings", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
height
|
number
|
600
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
legendPosition
|
string
|
"bottom"
|
Sets or gets the legendPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, legendPosition:"top", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
legendHeight
|
number
|
34
|
Sets or gets the legendHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,legendHeight:40, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
localization
|
object
|
|
Sets or gets the localization property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, localization:"localization", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
min
|
jqxdate
|
new $.jqx.date(0)
|
Sets or gets the min property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, min:"new $.jqx.date(2015, 1, 1)", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
max
|
jqxdate
|
new $.jqx.date(9999, 12, 31),
|
Sets or gets the max property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, max:"new $.jqx.date(2015, 1, 1)", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
ready
|
function
|
null
|
Sets or gets the ready property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, ready:"ready", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
renderAppointment
|
function
|
null
|
Sets or gets the renderAppointment property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, renderAppointment:"renderAppointment", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
rendering
|
function
|
null
|
Sets or gets the rendering property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, rendering:"rendering", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
rendered
|
function
|
null
|
Sets or gets the rendered property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, rendered:"rendered", theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,rtl:true, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
resources
|
object
|
null
|
Sets or gets the resources property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
rowsHeight
|
number
|
27
|
Sets or gets the rowsHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,rowsHeight:40, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
showToolbar
|
boolean
|
true
|
Sets or gets the showToolbar property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,showToolbar:false, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
showLegend
|
boolean
|
false
|
Sets or gets the showLegend property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:false, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
scrollBarSize
|
number
|
15
|
Sets or gets the scrollBarSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views,scrollBarSize:20, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
source
|
object
|
null
|
Sets or gets the source property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
statuses
|
object
|
{
free: "white",
tentative: "tentative",
busy: "transparent",
outOfOffice: "#800080"
}
|
Sets or gets the statuses property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light", statuses:"statuses" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
touchRowsHeight
|
number
|
37
|
Sets or gets the touchRowsHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light",touchRowsHeight:40 } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
touchAppointmentsMinHeight
|
number
|
27
|
Sets or gets the touchAppointmentsMinHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light",touchAppointmentsMinHeight:40 } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
touchScrollBarSize
|
number
|
18
|
Sets or gets the touchScrollBarSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light",touchScrollBarSize:20 } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
timeZone
|
string
|
''
|
Sets or gets the timeZone property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light", timeZone:"UTC" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
touchDayNameFormat
|
string
|
'abbr'
|
Sets or gets the touchDayNameFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light", touchDayNameFormat:"abbr" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
toolBarRangeFormat
|
string
|
'dd MMMM yyyy'
|
Sets or gets the toolBarRangeFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light", toolBarRangeFormat:"dd MM yyyy" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
toolBarRangeFormatAbbr
|
string
|
'dd MM yyyy'
|
Sets or gets the toolBarRangeFormatAbbr property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light", toolBarRangeFormatAbbr:"dd MM yy" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
toolbarHeight
|
number
|
54
|
Sets or gets the toolbarHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light",toolbarHeight:60 } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
views
|
array
|
['dayView', 'weekView', 'monthView']
|
Sets or gets the views property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
view
|
string
|
|
Sets or gets the view property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "timelineWeekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
width
|
number
|
800
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:600,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
|
|
appointmentChange
|
Event
|
|
Code examples
Bind to the appointmentChange event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("appointmentChange", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentClick
|
Event
|
|
Code examples
Bind to the appointmentClick event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("appointmentClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentDoubleClick
|
Event
|
|
Code examples
Bind to the appointmentDoubleClick event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("appointmentDoubleClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentDelete
|
Event
|
|
Code examples
Bind to the appointmentDelete event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("appointmentDelete", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
appointmentAdd
|
Event
|
|
Code examples
Bind to the appointmentAdd event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("appointmentAdd", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
bindingComplete
|
Event
|
|
Code examples
Bind to the bindingComplete event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("bindingComplete", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
cellClick
|
Event
|
|
Code examples
Bind to the cellClick event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("cellClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
cellDoubleClick
|
Event
|
|
Code examples
Bind to the cellDoubleClick event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("cellDoubleClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuOpen
|
Event
|
|
Code examples
Bind to the contextMenuOpen event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("contextMenuOpen", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuClose
|
Event
|
|
Code examples
Bind to the contextMenuClose event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("contextMenuClose", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuItemClick
|
Event
|
|
Code examples
Bind to the contextMenuItemClick event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("contextMenuItemClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
contextMenuCreate
|
Event
|
|
Code examples
Bind to the contextMenuCreate event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("contextMenuCreate", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
dateChange
|
Event
|
|
Code examples
Bind to the dateChange event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("dateChange", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editRecurrenceDialogOpen
|
Event
|
|
Code examples
Bind to the editRecurrenceDialogOpen event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("editRecurrenceDialogOpen", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editRecurrenceDialogClose
|
Event
|
|
Code examples
Bind to the editRecurrenceDialogClose event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("editRecurrenceDialogClose", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogCreate
|
Event
|
|
Code examples
Bind to the editDialogCreate event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("editDialogCreate", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogOpen
|
Event
|
|
Code examples
Bind to the editDialogOpen event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("editDialogOpen", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
editDialogClose
|
Event
|
|
Code examples
Bind to the editDialogClose event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("editDialogClose", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
viewChange
|
Event
|
|
Code examples
Bind to the viewChange event of jqxScheduler.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { date:date,width:850,height:600, source:adapter, view: "weekView",showLegend:true, resources:resources, appointmentDataFields:appointmentDataFields, views:views, theme:"light" } window.onload = function() { document.querySelector( "jqx-scheduler").addEventListener("viewChange", function(event) { // Your code here. }); }; </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
|
|
addAppointment
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").addAppointment(1,Item1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
beginAppointmentsUpdate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").beginAppointmentsUpdate(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
clearAppointmentsSelection
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").clearAppointmentsSelection(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
clearSelection
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").clearSelection(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
closeMenu
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").closeMenu(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
closeDialog
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").closeDialog(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
deleteAppointment
|
Method
|
|
| Parameter |
Type |
Description |
| appointmenId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").deleteAppointment(1,Item1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").destroy(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
endAppointmentsUpdate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").endAppointmentsUpdate(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
ensureAppointmentVisible
|
Method
|
|
| Parameter |
Type |
Description |
| id |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").ensureAppointmentVisible(1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
ensureVisible
|
Method
|
|
| Parameter |
Type |
Description |
| item |
object |
|
| resourceId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").ensureVisible(1,Item1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
exportData
|
Method
|
|
| Parameter |
Type |
Description |
| format |
string |
|
Return Value
Object(optional)
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").exportData(xls); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
focus
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").focus(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
getAppointmentProperty
|
Method
|
|
| Parameter |
Type |
Description |
| appointmentId |
string |
|
| name |
string |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").getAppointmentProperty(1,Item1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
getSelection
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-scheduler").getSelection(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
getAppointments
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").getAppointments(1,Item1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
getDataAppointments
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-scheduler").getDataAppointments(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
hideAppointmentsByResource
|
Method
|
|
| Parameter |
Type |
Description |
| resourcesId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").hideAppointmentsByResource(1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
openMenu
|
Method
|
|
| Parameter |
Type |
Description |
| left |
number |
|
| top |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").openMenu(10,20); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
openDialog
|
Method
|
|
| Parameter |
Type |
Description |
| left |
number |
|
| top |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").openDialog(10,20); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
selectAppointment
|
Method
|
|
| Parameter |
Type |
Description |
| appointmentId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").selectAppointment(1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
setAppointmentProperty
|
Method
|
|
| Parameter |
Type |
Description |
| appointmentId |
string |
|
| name |
string |
|
| value |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").setAppointmentProperty(1,status,busy); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
selectCell
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date |
|
| allday |
boolean |
|
| resourceId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").selectCell(1,false,1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
showAppointmentsByResource
|
Method
|
|
| Parameter |
Type |
Description |
| resourceId |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").showAppointmentsByResource(1); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
scrollWidth
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-scheduler").scrollWidth(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
scrollHeight
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-scheduler").scrollHeight(); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
scrollLeft
|
Method
|
|
| Parameter |
Type |
Description |
| left |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").scrollLeft(10); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
|
scrollTop
|
Method
|
|
| Parameter |
Type |
Description |
| top |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Scheduler Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script> var appointments = new Array(); var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2016, 10, 24, 10, 0, 0), end: new Date(2016, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2016, 10, 27, 11, 0, 0), end: new Date(2016, 10, 27, 13, 0, 0) } var appointment4 = { id: "id4", description: "", location: "", subject: "New Projects Planning", calendar: "Room 2", start: new Date(2016, 10, 23, 16, 0, 0), end: new Date(2016, 10, 23, 18, 0, 0) } var appointment5 = { id: "id5", description: "", location: "", subject: "Interview with James", calendar: "Room 1", start: new Date(2016, 10, 25, 15, 0, 0), end: new Date(2016, 10, 25, 17, 0, 0) } var appointment6 = { id: "id6", description: "", location: "", subject: "Interview with Nancy", calendar: "Room 4", start: new Date(2016, 10, 26, 14, 0, 0), end: new Date(2016, 10, 26, 16, 0, 0) } appointments.push(appointment1); appointments.push(appointment2); appointments.push(appointment3); appointments.push(appointment4); appointments.push(appointment5); appointments.push(appointment6); // prepare the data var source = { dataType: "array", dataFields: [ { name: 'id', type: 'string' }, { name: 'description', type: 'string' }, { name: 'location', type: 'string' }, { name: 'subject', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date' }, { name: 'end', type: 'date' } ], id: 'id', localData: appointments }; var date = new jqx.date(2016, 11, 23); var adapter = new jqx.dataAdapter(source); var resourcesSource = new jqx.dataAdapter(source); var resources = { colorScheme: "scheme05", dataField: "calendar", source: resourcesSource }; var appointmentDataFields = { from: "start", to: "end", id: "id", description: "description", location: "location", subject: "subject", resourceId: "calendar" }; var views = [ 'dayView', 'weekView', 'monthView' ]; JQXElements.settings[ "schedulerSettings"] = { } window.onload = function() { document.querySelector( "jqx-scheduler").scrollTop(10); } </script></head><body> <jqx-scheduler settings="schedulerSettings"></jqx-scheduler>
|
