title: vue-fullcalendar - css class and new line break not working
body: <p>does anyone here uses the <em>vue-fullcalendar</em> component that was made by Wanderxx?</p>
  
  <p>I'm having a problem on two things:</p>
  
  <p>(1) css class not applied <strong>[SOLVED]</strong></p>
  
  <p>I populated each eventData object with this computed function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  eventsArr: function(){
          let newArr = [];
          let arrEvents = this.transactions;
          for (let x in arrEvents){
            let eventData = new Object();
            if(arrEvents[x].Status == "Reserved"){
              let title = arrEvents[x].Product_name + " \n " + arrEvents[x].userData.Account_name;
              eventData.title = title;
              eventData.start = arrEvents[x].dateValid;
              eventData.end = arrEvents[x].dateValid;
              eventData.cssClass = 'RTW';
              newArr.push(eventData);
            }
            else if(arrEvents[x].Status == "Accepted"){
              let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
              eventData.title = title;
              eventData.start = arrEvents[x].dateFinish;
              eventData.end = arrEvents[x].datefinish;
              eventData.cssClass = 'mto';
              newArr.push(eventData);
            }
          }
          return newArr;
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>as you can see in the prop <code>cssClass</code> is the class <code>mto</code> which is declared in the css section like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mto{
    color: white;
    background-color: orange;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the event should appear in a white font and an orange background. But it was not applied and the style remains the same as default (same case with the <code>RTW</code> cssClass). when I inspect the page the <code>mto</code> class is present in the tag so I don't know where did I go wrong.</p>
  
  <p>(2) <strong>new line break not working</strong></p>
  
  <p>one of the prop is <code>title</code> and before storing it, I made a variable first and store it like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
  eventData.title = title;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My goal was to display the title as a two-liner. But it doesn't work and it still looke like this:</p>
  
  <p><a href="https://i.stack.imgur.com/U3KwM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U3KwM.png" alt="enter image description here"></a></p>
  
  <p>I don't want it to look like that and I want the full name to be displayed. How do I make it a two-liner?</p>