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

Customizing SharePoint list and implementing Quick search using jQuery

-
Image
How to Customize SharePoint list and implementing Quick search using jQuery 1. Create a SharePoint list and create a view for it. 2. Now choose the created view and go to modify view, under Style choose Shaded as shown below.  3. Edit the list and add script editor web part to it and paste the below code. Code:- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <style> .ms-addnew {   display: none; } input[type=button] {     background-color: #4CAF50;     border: none;     color: white;     padding: 16px 32px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function(){   $("input.search").change(function() { debugger;      var txt = $("input....
Read more

Enable and Disable Client side People Picker using jQuery

-
Image
How to enable and disable Client side People Picker using jQuery By using below methods you can easily enable or disable Client side People Picker:- function disablePP() { $(".sp-peoplepicker-delImage").find("span").css("display","none"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', true); $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").addClass("sp-peoplepicker-topLevelDisabled"); } function enablePP() { $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").removeClass("sp-peoplepicker-topLevelDisabled"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', false); $(".sp-peoplepicker-delImage").find("span").removeAttr('style'); } ...
Read more

How to generate PDF using jsPDF and html2canvas library

-
Image
Generate PDF using jsPDF and html2canvas library In this post we will implement how we can generate PDF file of a web page using jsPDF and html2canvas library. These libraries allow us to generate PDF of web pages having html including icons, images, text, css etc. Below is the complete implementation for the same. Follow below steps to perform this -  1. Include jsPDF and html2canvas libraries in your html page - <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <div class="canvas_div_pdf"> <!--Add HTML content you want to convert to PDF--> </div> 2. Call the below function in your JS -     function getPDF(){         var HTML_Width = $(".canvas_div_pdf").width();         var HTML_Height = $(".canvas_di...
Read more