jQuery Grid

Invoke the focus method of the jqxGrid. Author: http://jqwidgets.com

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="scheduler"></div>

JavaScript

var appointments = new Array();

var appointment1 = {
  id: "id1",
  description: "",
  location: "",
  subject: "Not editable",
  calendar: "Room 1",
  start: new Date(2015, 10, 23, 9, 0, 0),
  end: new Date(2015, 10, 23, 12, 0, 0)
}

var appointment2 = {
  id: "id2",
  description: "",
  location: "",
  subject: "recurrence = dialog",
  recurrencePattern: 'FREQ=WEEKLY;BYDAY=TU;UNTIL=20181002T210000Z',
  calendar: "Room 2",
  start: new Date(2015, 10, 24, 10, 0, 0),
  end: new Date(2015, 10, 24, 12, 0, 0)
}

var appointment3 = {
  id: "id3",
  description: "",
  location: "",
  subject: "recurrence = dialog",
  recurrencePattern: 'FREQ=WEEKLY;BYDAY=FR;UNTIL=20181002T210000Z',
  calendar: "Room 3",
  start: new Date(2015, 10, 27, 11, 0, 0),
  end: new Date(2015, 10, 27, 13, 0, 0)
}

appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);

// 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: 'recurrencePattern',
      type: 'string'
    },
    {
      name: 'calendar',
      type: 'string'
    },
    {
      name: 'start',
      type: 'date'
    },
    {
      name: 'end',
      type: 'date'
    }
  ],
  id: 'id',
  localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
  date: new $.jqx.date(2015, 11, 23),
  width: 850,
  height: 600,
  source: adapter,
  editDialog: false,
  ready: function() {
    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1')
  },
  resources: {
    colorScheme: "scheme02",
    dataField: "calendar",
    source: new $.jqx.dataAdapter(source)
  },
  appointmentDataFields: {
    from: "start",
    to: "end",
    id: "id",
    description: "description",
    recurrencePattern:...