How To Create A Calendar In Sharepoint Office 365

In TechNet Forum, we see lots of customers want to customize the SharePoint Calendar. In this article we gather most popular asked calendar customization questions and show you how to use JavaScript to make this happen. Please let us know if you have any other customization ideas.

How to change calendar web part weekday name?

Some customers need their calendar to show short name as the month's name, such as Monday->Mon, Tuesday->Tue and so on.

We can use the SharePoint Designer, add some JavaScript code in the Calendar page.

Open the SharePoint Designer.
Click the Lists&Libraries, select the Calendar.
Add the JavaScript code below in the Calendar.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> function updateCalendarWeekday() {    // calendar weekday    $(".ms-acal-month-top").each(function () {    	  var weekday= $(this).find("span").text();    	  weekday=weekday.substr(0, 3);    	  $(this).find("span").text(weekday);    }); }  _spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');  // hook into the existing SharePoint calendar load function function calendarEventLinkIntercept() {    var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;    SP.UI.ApplicationPages.CalendarNotify.$4b = function () {       OldCalendarNotify4a();       updateCalendarWeekday();    } } </script>

4. Save the page, refresh the SharePoint Calendar page, then the weekday name would change to the short name

How to display weekday number in monthly Calendar view?

It is important for companies to work with week number. Although you can turn on showing week numbers in the Date Navigator under Regional Settings, there will be no week numbers showing in the monthly view of the calendar. In this sample, we will display the weekday number as the image below.

In this sample, we would use the content edit web part to display the weekday number in monthly Calendar view.

Site Actions->Edit Page->Add a Web Part->Media and Content->Content Editor
Insert the code below, then stop Editing.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript">  Date.prototype.getWeek = function() {         var onejan = new Date(this.getFullYear(),0,1);         return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7); } function updateCampaignCalendar() {     // calendar rows    $('TH[evtid="week"]').each(function () {       // add week numbers       var firstDay = new Date($(this).attr('date'));       if (firstDay.toString() != "NaN" && firstDay.toString() != "Invalid Date") {          var week = firstDay.getWeek(firstDay.getDay());          //$(this).children("DIV").attr("innerHTML", week);          $(this).children("DIV").append(week);       }    }); }  _spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');  // hook into the existing SharePoint calendar load function function calendarEventLinkIntercept() {     var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4a;    SP.UI.ApplicationPages.CalendarNotify.$4a = function () {       OldCalendarNotify4a();       updateCampaignCalendar();    } } </script>

3. Now the Calendar would display the weekday number in the Calendar.

How to show more information in the calendar view?

Month view only has one field to use while Week and Day view can have a sub heading. To show more information than just one-two columns, there is no out of the box method to achieve it, but we can use the calculate column or workflow to achieve it.

Method 1 : Calculate Column

We can use the Calculate column to display more than one filed in the Month view.

You can use the following steps to create a new Calculate column in the calendar, or you can also refer to Mat Agrest blog, he write a great article about how to use the Calculate Column.

In the Ribbon, click the Calendar under the Calendar Tools->Create Column->type a name in the Column name->change the Type to Calculated (calculation based on other columns)

In the Formula section put something like the following:

=[Title]&"__"&[Category]&"__"&[Location]

The formula above is basically grabbing the Title, Category, and Location columns and displaying that, and there is a underline between " ", it is for good-looking.

Now go back to the calendar view->Modify View->in the Calendar Columns section, select the created Calculate column in the Moth View Title.

Method 2 : Workflow

In this section, we will use the workflow to display more than one field as the Calculate column.

Some people want to display the attachment in the Calendar view, but there is no out of the box way to achieve it. As a workaround, we can use the workflow to achieve it.

Create a column in the Calendar, and name the column (such as name the column Attach), then select the Single Line of Text.

2. Open the site in SharePoint Designer 2010, select Workflow->List Workflow->select the Calendar->name the workflow.

3. Use an action to set the value for the Attach column as below.

We should make some changes for the action as following image, then start the workflow automatically when an item is create or changed.

4. Modify the view, click Modify View > Calendar Columns section > change Month View Title: Attach.

Now, add events to the Calendar, the workflow will be start automatically. If the event has attachment, the Attachments is equal to True; else, it is equal to False.

Extension: Display the Attachments Icon in the Calendar view.

However, someone may don't like use the True or False to replace of the attachment, they want to use the attachment icon like the attachment in outlook. In this way, we should use the JavaScript to achieve it. The steps similar as the above, but we should use the Content Edit web part to contain the JavaScript at last.

Create a column in the Calendar, and name the column (such as we can also name the column Attach), then select the Single Line of Text.

2. Open the site in SharePoint Designer 2010, select Workflow->List Workflow->select the Calendar->name the workflow.

3. Use an action to set the value for the Attach column as below ( I have added a "_" between the"%Current Item:Title%" and "%Current Item:Attachments%" ).

4. Modify the view, click Modify View > Calendar Columns section > change Month View Title: Attach.

5. Insert a Content Edit web part into the Calendar.

Click Site Actions->Edit Page->Add a Web Part->Categories->Media and Content->Content Editor->Add.

Click the Content Editor web part, click HTML in the ribbon, select Edit HTML Source.

Now, we should insert the JavaScript code below in the HTML Source., click Stop Editing the page.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script> $(document).ready(function(){  setTimeout(function(){ $(".ms-acal-title").each(function(){  var str = $(this).text();     var attachvalue = str.substring(str.lastIndexOf('_'));     var titlevalue = str.substring(0,str.lastIndexOf('_'));     var hrf = $($(this).html()).attr("href");     var hrf1 = "_layouts/images/attachhd.gif"; var html1;     if(attachvalue.replace(' ','')=='_True'){      html1= "<a href='"+hrf+"' >"+titlevalue+"</a><img src='"+hrf1+"'></img>"     }     else{     html1 = "<a href='"+hrf+"' >"+titlevalue+"</a>"     }  $(this).html(html1);   }); },100); }); </script>

Then the Calendar view would display the attachments icon as below.

How to display multiple lines in Calendar view?

Someone may don't want display the multiple columns values in one line, they wanted to display the multiply columns in multiple lines, how can we achieve it?

In this section, I would use the workflow and JavaScript to display multiple lines in Calendar view, for example, display three lines in the Calendar view.

Create a multiple line of text column name Break line.

Note: we should choose the Plain text type, not the Rich text or Enhanced rich text.

2. Modify the view.

Click Modify View > Calendar Columns section > change Month View Title: Break line.

3. Create a workflow and use the action: Set Field in Current Item, start the workflow automatically when an item is created or changed

4. Use JavaScript to convert the <br/> as html, so that the <br/> becomes a html line break.

In the Calendar list, we should insert the Content Editor web part to contain the JavaScript.

Click Site Actions->Edit Page->Add a Web Part->Categories->Media and Content->Content Editor->Add.

Click the Content Editor web part, click HTML in the ribbon, select Edit HTML Source.

5. Insert the JavaScript code below in the HTML Source., click Stop Editing the page.

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script><script type="text/javascript"> function updateCalendarWeekday() {     $('.ms-acal-title').each(function(){     var str = $(this).html();     str = str.replace(/&lt;/g, "<");     str = str.replace(/&gt;/g, ">");     $(this).html(str); }); }  _spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');  // hook into the existing SharePoint calendar load function function calendarEventLinkIntercept() {    var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4a;    SP.UI.ApplicationPages.CalendarNotify.$4a = function () {       OldCalendarNotify4a();       updateCalendarWeekday();    } }</script><style> .ms-acal-item {                 HEIGHT: 60px !important } .ms-acal-summary-itemrow {                 HEIGHT: 85px !important }</style>

Now, we can add events to the Calendar, the workflow will be start automatically, then Calendar view would display 3 separate lines.

Note:

1. You should change the below code

          var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4a;     SP.UI.ApplicationPages.CalendarNotify.$4a = function

var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;     SP.UI.ApplicationPages.CalendarNotify.$4b = function

if the SharePoint server had installed the SP1 or later.

2. You should modify the style in the last of the code if more than three lines.

References

Supported Namespaces JavaScript Client Object model SharePoint Server 2010 & 2013

http://blogs.msdn.com/b/calvarro/archive/2013/01/26/supported-namespaces-javascript-client-object-model-sharepoint-server-2010-amp-2013.aspx

A Simple Guide to Show More Information on a Calendar Event

http://blog.incworx.com/blog/sharepoint-administrators-blog/a-simple-guide-to-show-more-information-on-a-calendar-event

Week numbers in calendar view – revisited for SharePoint 2010

http://blog.scoreman.net/2011/04/week-numbers-in-calendar-view-revisited-for-sharepoint-2010/

How To Create A Calendar In Sharepoint Office 365

Source: https://social.technet.microsoft.com/Forums/en-US/7a30e07b-6704-4579-88a1-c67f21ab5ab7/forum-faq-calendar-customization-in-sharepoint?forum=sharepointgeneral

Posted by: ruddmyris1978.blogspot.com