Change calendar event background color in SharePoint 2013

-
when you create any event in the SharePoint  calendar, the background color will appear in blue like below:



We can change this background color using CSS. Edit the calendar page and add a script editor web part. To add a script editor web part, edit the page then from the Ribbon click on INSERT -> Web Part -> then from the categories select Media and Content and then choose Script editor web part.

Add below CSS to Script editor web part -

<style type="text/css">
.ms-acal-item {
BORDER-BOTTOM: #ed0033; BORDER-LEFT: #ed0033; BACKGROUND-COLOR: #ed0033; BORDER-TOP: #ed0033; BORDER-RIGHT: #ed0033
}
.ms-acal-default-hover {
BORDER-BOTTOM: #ed0033; BORDER-LEFT: #ed0033; BACKGROUND-COLOR: #ed0033; BORDER-TOP: #ed0033; BORDER-RIGHT: #ed0033
}
.ms-acal-apanel-item {
BORDER-BOTTOM: #00485b; BORDER-LEFT: #ed0033; BACKGROUND-COLOR: #ed0033; BORDER-TOP: #ed0033; BORDER-RIGHT: #ed0033
}</style> 


Output -







Comments

Post a Comment

Popular posts from this blog

How to Customize exported excel's cell background color in Datatables

-
Image
Customize exported excel's cell background color in Datatables In this post i will walk you through how we can customize exported excel's cell background color in datatables. For this we need make changes in the buttons.html5.js file. you may refer below links for more info.  excelHtml5  and  how can i change the background color Follow below steps and make changes in buttons.html5.js file 1. Create your own fills.  '<fills count="11">'+ '<fill>'+ '<patternFill patternType="none" />'+ '</fill>'+ '<fill>'+ // Excel appears to use this as a dotted background regardless of values but '<patternFill patternType="none" />'+ // to be valid to the schema, use a patternFill '</fill>'+ '<fill>'+ '<patternFill patternType="solid">'+ '<fgColor rgb="FFD9D9D9" /...
Read more

Populate dropdown using jquery ajax in SharePoint

-
Image
How to Populate dropdown using jquery ajax in SharePoint Step 1: Create a page and add Script Editor Web Part to it. Step 2: Paste the below code to Script Editor Web Part. Code:               <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <script type="text/javascript"> var option; var Banks;  $(document).ready(function () {      Banks = $("#ddlbanks");  // html control      option = $("<option/>").attr("value",0).text("-Select-");      Banks.append(option);      populateBanks();   }); function populateBanks(){      $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Banks')/Items", type: 'GET', dataType: 'json', async: false, headers: {     "accept": "application/json;odata=verbose;charset=ut...
Read more

Clear DataTable on button click

-
Image
How to clear DataTable on button click In this post we will learn how we can clear a datatable on a jQuery event. By click on "btnReset" we have to call datatable's destroy method to completely clear a datatable. We may need to clear a datatable on an event. Please follow the below code to achieve the same. HTML - <table id="tblResourcesData" class="display" width="100%" cellspacing="0">           <thead>               <tr>                   <th>Title</th>                   <th>Region</th>                 <th>Country</th>                <th>Email</th>             </tr>           </thead>  </table...
Read more