Color Sharepoint Calendar "Javascript" "Jquery"

Asked

Viewed 150 times

0

I have this code below for a calendar in Sharepoint 2013 That when user choose silver car in calendar field stay in silver color and when black stay in black color.

It only works on the IE browser, Firefox and Chrome does not work, anyone has any idea what it might be?

    <script src="/sites/SiteAssets/jquery-2.1.4.min.js"></script> 
<style>

.black{
    background-color: #383838;
}

.silver{
    background-color: #C8C8C8;
}
</style><script type="text/javascript">

    $(function(){
        $('.ms-acal-item').each(function(){
            $(':contains("Preto")',this).addClass('black');
            $(':contains("Prata")',this).addClass('silver');
        });
    });
</script>
  • by way of doubt tries to change $(':contains("Preto")',this).addClass('black'); for $(":contains('Preto')",this).addClass('black'); -> Change selector single quotes to double quotes

1 answer

0

Tiago, it’s very simple what you’re trying to do, so I figured just switch between CSS classes correct? Below is a code that does exactly the same thing and I believe it will not cause compatibility problems, just you reference the click of the "cars" as well as this referenced the ID of the Switch button.

$("#alternar").click(function() {
  if ($(".ms-acal-item").hasClass('black')) {
    $(".ms-acal-item").removeClass('black');
    $(".ms-acal-item").addClass('silver');
  } else {
    $(".ms-acal-item").removeClass('silver');
    $(".ms-acal-item").addClass('black');
  }
});
.black {
  background-color: #383838;
}

.silver {
  background-color: #C8C8C8;
}

.ms-acal-item {
  width: 100px;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ms-acal-item'>
</div>

<button id='alternar'>
  Alternar Classe
</button>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.