I need to Customize the Calendar list, So I planned to develop it Custom web part for changing the look and feel, functionality, etc, So please suggest me some idea to customize add event page look and feel?enter image description here

  • 1
    This is too broad and unfortunately can't be closed now. You need to hone it down to a specific question that can be answered. If your looking for design ideas, a simple google image search will get you tons. – Eric Alexander Dec 22 '16 at 13:31

If your motive is to just customize the look & feel , then see this blog. It is a very effective and easy way to do it.

Below are the major steps extracted from the blog:

  1. Design a html file with new UI you want for the form.

Things to be done while designing the html form:

Follow the class and data-displayName convention as mentioned in the blog strictly if you are planning to use the JavaScript code used in the blog.

eg: For Title field , you need to put a placeholder like below:

Title : span>

Use below code to replace above placeholder with the actual UI control for the field.

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

<style type="text/css">

<script type="text/javascript">
    $(document).ready(function() {
        //loop through all the spans in the custom layout        
            //get the display name from the custom layout
            displayName = $(this).attr("data-displayName");

            displayName  = displayName.replace(/&(?!amp;)/g,'&amp;');
            elem = $(this);
            //find the corresponding field from the default form and move it
            //into the custom layout
            $("table.ms-formtable td").each(function(){
                if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
  1. Edit the new form and edit form for events list and add a new content editor webpart and refer this html file.

Now when the javascript is run , it would replace the placeholder span for Title field with the actual control for Title field generated by SharePoint.


Event forms (New, Display, Edit) cannot be edited in InfoPath, so if you don’t want to do a lot of custom coding you will be limited. Out of the box you can re-order columns, hide columns, and customize the event forms themselves by adding web parts such as the Content Editor to include instructions and other pertinent information to users while they are completing or editing the form.

To reorder columns and hide columns you will need to access the calendar’s settings. To customize the default event forms (New, Display, Edit), in the ribbon, on the calendar tab, in the Customize List group, click Form Web Parts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.