How to customize the calendar list programmatically in sharepoint 2013?

Question

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?

Answer 1

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">
  .ms-formtable
  {display:none;}
</style>

<script type="text/javascript">
    $(document).ready(function() {
        //loop through all the spans in the custom layout        
        $("span.hillbillyForm").each(function()
        {
            //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){
                    $(this).contents().appendTo(elem);
                }
            });
        });
    });
</script>

2. 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.

Answer 2

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.