This was a simple requirement where the ask was to change the Days' name from Full (Sunday, Monday,...) to Sun, Mon Etc. OOTB- there is no option to achieve this.
And here comes the power of jquery where we can target specific Table heading (Calendar is made as HTML Table). Look at the following HTML:
So we will be using Jquery to target all the highlighted section as follows and Get First 3 Characters and replace the text of the target cell.
$("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
});
The above code can be used anywhere such as document.ready etc.
I added Content Editor Webpart and added following and Job was done:
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script language="javascript">
<script language="javascript">
$(document).ready(function() {
$("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
$("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
$(document).ready(function() {
$("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
$("table.ms-acal-month > tbody > tr > th.ms-acal-month-top").each(function(){
// get the first 3 chars from day name
$cell = $(this).text().substring(0,3);
$(this).text($cell);
});
});
});
});
});
</script>
});
</script>
No comments:
Post a Comment