JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Show entire time in responsive mode when start hour is set in JavaScript Schedule control

31 Mar 2023 / 1 minute 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.

Source
Preview
index.ts
index.html
Copied to clipboard
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");
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" /> 
    <link href="//cdn.syncfusion.com/ej2/21.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>

</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>
Previous
Next