Search results

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

22 Oct 2021 / 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.js
index.html
Copied to clipboard
window.majorSlotTemplate = function (date) {
    var instance = new ej.base.Internationalization();
    return instance.formatDate(date, { skeleton: 'hm' });
};
window.minorSlotTemplate = function (date) {
    var instance = new ej.base.Internationalization();
    return instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
};
var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'WorkWeek'],
    timeScale: {
        enable: true,
        interval: 60,
        slotCount: 6,
        majorSlotTemplate: '#majorSlotTemplate',
        minorSlotTemplate: '#minorSlotTemplate'
    },
    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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet"> 
    <link href="//cdn.syncfusion.com/ej2/ej2-schedule/styles/material.css" rel="stylesheet">
    
    

<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><script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>


<body>
    
    <div id="container">
        <div id="Schedule"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>