Category / Section
How to customize the time format without locale option?
1 min read
This knowledge base article explains the way to customize the time format without locale option.
Step 1: Create a JS Scheduler with time scale template option by referring the below link.
Step 2: Define the majorSlotTemplate template alone with the corresponding function to display the 24hr time format as shown in the following code example.
<script id="majorSlotTemplate" type="text/x-template">
<div>${timeFormat(data.date)}</div>
</script>
window. timeFormat = function (date) {
var instance = new ej.base.Internationalization();
return instance.formatDate(date, { skeleton: 'Hm' });
};
Step 3: Define the timeScale as shown in the following code example.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
timeScale: {
enable: true,
majorSlotTemplate: '#majorSlotTemplate'
},
eventSettings: {
dataSource: [{
Id: 1,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
AirlineId: 1
}]
}
});
Step 4: Run the sample, and the Scheduler will render in 24hr format as shown below.
Figure 1: Schedule with 24hr format.
Please refer the example from the following GitHub link.
Example – Schedule with 24hr format
