Show entire time in responsive mode in EJ2 TypeScript Schedule control

27 Apr 20233 minutes to read

9 AM is visible since it has enough space in responsive mode, but if you set 08:45 AM as start hour of scheduler then the time slots will not show full time in the time slot of responsive scheduler, for which we can use majorSlotTemplate to set proper time slots in scheduler.

import { Schedule, Day, Week, WorkWeek } from "@syncfusion/ej2-schedule";
import { Internationalization } from "@syncfusion/ej2-base";
import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, WorkWeek);
let instance: Internationalization = new Internationalization();
(window as TemplateFunction).majorSlotTemplate = (date: Date) => {
  return instance.formatDate(date, { skeleton: "hm" });
};
interface TemplateFunction extends Window {
  majorSlotTemplate?: Function;
}
let scheduleObj: Schedule = new Schedule({
  width: "100%",
  height: "550px",
  selectedDate: new Date(2018, 1, 15),
  startHour: "08:45",
  views: ["Day", "Week", "WorkWeek"],
  timeScale: {
    majorSlotTemplate: "#majorSlotTemplate"
  },
  eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo("#Schedule");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" /> 
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-schedule/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<script id="majorSlotTemplate" type="text/x-template">
    <div>${majorSlotTemplate(data.date)}</div>
</script>
<script id="minorSlotTemplate" type="text/x-template">
    <div style="text-align: right; margin-right: 15px">${minorSlotTemplate(data.date)}</div>
</script>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="Schedule"></div>
    </div>
</body>

</html>