JavaScript Grid

Set the groupcolumnrenderer property of the jqxGrid. Author: http://jqwidgets.com

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: "George brings projector for presentations.",
   location: "",
   subject: "Quarterly Project Review Meeting",
   calendar: "Room 1",
   start: new Date(2019, 10, 27, 9, 1, 0),
   end: new Date(2019, 10, 27, 9, 7, 0)
 }
 var appointment2 = {
   id: "id2",
   description: "",
   location: "",
   subject: "IT Group Mtg.",
   calendar: "Room 2",
   start: new Date(2019, 10, 27, 15, 2, 0),
   end: new Date(2019, 10, 27, 15, 8, 0)
 }

 var appointment3 = {
   id: "id3",
   description: "George brings projector for presentations.",
   location: "",
   subject: "Quarterly Project Review Meeting",
   calendar: "Room 1",
   start: new Date(2019, 10, 27, 11, 8, 0),
   end: new Date(2019, 10, 27, 11, 16, 0)
 }
 var appointment4 = {
   id: "id4",
   description: "",
   location: "",
   subject: "IT Group Mtg.",
   calendar: "Room 2",
   start: new Date(2019, 10, 27, 17, 7, 0),
   end: new Date(2019, 10, 27, 17, 19, 0)
 }

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

 appointments.push(appointment3);
 appointments.push(appointment4);

 // prepare the data
 var source = {
   dataType: "array",
   dataFields: [{
       name: 'id',
       type: 'string'
     },
     {
       name: 'description',
       type: 'string'
     },
     {
       name: 'location',
       type: 'string'
     },
     {
       name: 'subject',
       type: 'string'
     },
     {
       name: 'calendar',
       type: 'string'
     },
     {
       name: 'start',
       type: 'date'
     },
     {
       name: 'end',
       type: 'date'
     }
   ],
   id: 'id',
   localData: appointments
 };
 var adapter = new $.jqx.dataAdapter(source);
 $("#scheduler").jqxScheduler({
   date: new $.jqx.date(2019, 11, 25),
   width: 600,
   height: 600,
   source: adapter,
   view: 'dayView',
   showLegend: true,
   ready: function() {
     $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
   },
  ...