How to protect parts of my code from TinyMCE modification when switching from text to visual mode?

I’ve got the following problem. When I switch from ‘text’ to ‘visual’ mode – TinyMCE is automatically messing around in the code doing unwanted things which breaks my styling – not so good ;/.

Is there a way to protect parts from being modified by the text editor automatically? Some kind of [dont_touch_my_code] shortcode or something like that?

This is my code before:

[eo_events numberposts="6" showpastevents="false" event_category=""]
<div class="cal_bubble" style="background-color:%cat_color%;">
  <div class="main">
    <span class="month">%start{M}%</span><span class="year">%start{Y}%</span>
   <p>
     <span class="day">%start{d}%</span>
   </p>
  </div>
    <div class="side">
      <div class="inner"><div class="top"></div> 
     <div class="bottom"></div> 
    </div>
  </div>   
</div>
  <div class="cal_bubbletext">
 <div>
  <h4><a href="%event_url%"> %event_title% </a></h4>%event_excerpt%
  %start{H:i}% - %end{H:i}% Uhr  %event_venue% 
 </div>  
</div>
[/eo_events]

And this is the code after switching to visual mode and back.

[eo_events numberposts="6" showpastevents="false" event_category=""]
<div class="cal_bubble" style="background-color: %cat_color%;">
<div class="main"><span class="month">%start{M}%</span><span class="year">%start{Y}%</span><span class="day">%start{d}%</span>

</div>
<div class="side"></div>
</div>
<div class="cal_bubbletext">
<div>
<h4><a href="%event_url%"> %event_title% </a></h4>
%event_excerpt%
%start{H:i}% - %end{H:i}% Uhr %event_venue%

</div>
</div>
[/eo_events]