Set default value for event fields in EJ2 JavaScript Schedule control

27 Apr 202312 minutes to read

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.

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: '550px',
    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' },
            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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet"> 
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-schedule/styles/material.css" rel="stylesheet">
    
    
    <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>
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>