Event window default fields name like Title, Location, etc.. can be customized and default value can be set to Subject field using default property which will be added if an appointment is created with empty subject.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '500px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: scheduleData,
fields: {
subject: { title: 'Event Name', name: 'Subject', default: 'Add Name' },
location: { title: 'Event Location', name: 'Location', default: 'USA' },
description: { title: 'Summary', name: 'Description' },
startTime: { title: 'From', name: 'StartTime' },
endTime: { title: 'To', name: 'EndTime' }
}
}
});
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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/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>
<style>
.e-textlabel {
font-weight: bold;
padding-right: 5px;
}
.custom-event-editor td {
padding: 5px;
}
.e-quick-popup-wrapper .e-cell-content {
padding: 0 10px 10px 10px;
}
.e-quick-popup-wrapper .e-cell-content div {
padding-bottom: 10px;
}
.e-quick-popup-wrapper .e-cell-content .e-field {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
height: 25px;
width: 100%;
}
.e-quick-popup-wrapper .e-event-content {
display: flex;
}
.e-quick-popup-wrapper .e-event-header {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-cell-footer .e-event-create,
.e-quick-popup-wrapper .e-event-footer .e-event-edit {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-event-footer .e-event-delete {
padding-left: 100px;
}
.e-quick-popup-wrapper .e-event-content .subject {
padding-top: 10px;
font-weight: 500;
font-size: 14px;
}
</style>
<script id="headerTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-header">
<div class="e-header-icon-wrapper">
<button class="e-close" title="Close"></button>
</div>
</div>
${else}
<div class="e-event-header">
<div class="e-header-icon-wrapper">
<button class="e-close" title="CLOSE"></button>
</div>
</div>
${/if}
</div>
</script>
<script id="contentTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-content">
<form class="e-schedule-form">
<div>
<input class="subject e-field" type="text" name="Subject" placeholder="Title">
</div>
<div>
<input class="location e-field" type="text" name="Location" placeholder="Location">
</div>
</form>
</div>
${else}
<div class="e-event-content">
<div class="e-subject-wrap">
${if (Subject)}
<div class="subject">${Subject}</div>${/if} ${if (City)}
<div class="location">${City}</div>${/if} ${if (Description)}
<div class="description">${Description}</div>${/if}
</div>
</div>
${/if}
</div>
</script>
<script id="footerTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-footer">
<button class="e-event-details" title="Additional Details">Additional Details</button>
<button class="e-event-create" title="Add">Add</button>
</div>
${else}
<div class="e-event-footer">
<button class="e-event-edit" title="Edit">Edit</button>
<button class="e-event-delete" title="Delete">Delete</button>
</div>
${/if}
</div>
</script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>