Customizing the Fullcalendar button

Question

Customizing the Fullcalendar button

Asked 6 years, 9 months ago

Viewed 901 times

0

I’m trying to customize the fullcalendar button, but I’m not getting it. I’m using Bootstrap. The fullcalendar CSS code, put after the Bootstrap CSS and before the tag. See the code below:

CSS

.fc-right button{
      text-transform: uppercase;
      border-radius: 2px;
      font-size: 13px;
      font-weight: 600;
      transition: box-shadow linear 0.4s;
      background-color: #2196F3;
      border-color: #2196F3;
      margin-top: 10px;
}

HTML

<div class="col-xl-4 col-lg-4 grid-item">
   <div class="card" style="background-color: #F9EAAF">
      <div class="panel panel-default">
         <div class="panel-heading bg-default txt-white">
           <i class="fa fa-calendar fa-lg"></i> Calendário de Eventos
         </div>
   <div class="panel-body">
       <div id='calendario'></div>
   </div>
   <div class="panel-footer" align="center">
     <button class="btn btn-default">Ver todos os eventos</button>
    </div>
  </div>
 </div>
</div>

Jquery

$(document).ready(function() {
     $('#calendario').fullCalendar({
          height: 250,
          contentHeight: 273,
          editable: false,
          eventLimit: false,
          events: 'eventos.php',
          eventColor: '#dd6777',

          eventClick:  function(event, jsEvent, view) {
          $('#modalTitle').html("<i class=\"fa fa-hand-o-right\" aria-hidden=\"true\"></i> " + event.title);
          $('#modalBody').html(event.description);
          $('#eventUrl').attr('href',event.url);
          $('#fullCalModal').modal();
      }
      });
});

He gets that way:

And when I mouse:

How do I get it to take the formatting I put up?

1

What are you using? Post your HTML.

– Jorge.M

2018/02/06 at 20:11
Take a look here.

– Jorge.M

2018/02/06 at 20:15
1

A good one would be to put your code in Jsfiddle, not to know if Voce is using, if it is a Hover or if it is a proper attribute of this fullcalendar. Or else put it right here, to run.

– Alex

2018/02/06 at 20:15
Hi Jorge. You’re right. I put the excerpts that refer to the calendar, since the HTML is too big. I’m using Bootstrap.

– user24136

2018/02/06 at 20:17
Hello Marcelo. I will try to isolate the code and put in Jsfiddle.

– user24136

2018/02/06 at 20:19
You want him to change his appearance by hovering over?

– LeAndrade

2018/02/06 at 20:21
Hello Leandro, I want to implement the CSS I put in the post, but I’m not getting it. And if possible, change also when passing the mouse.

– user24136

2018/02/06 at 20:30
It would be nice if you put the whole Hml here, because I’m not seeing the class Fc-right button that you are applying the Css.

– LeAndrade

2018/02/06 at 20:33

Show 3 more comments

1 answer

Browser other questions tagged css fullcalendar

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

by user24136 · Answer 1 · 2018-02-06T21:16:09+00:00

I managed to fix it. I opened the CSS of Fullcalendar itself and changed these lines:

.fc button {
    text-transform: uppercase;
      border-radius: 2px;
      font-size: 13px;
      font-weight: 600;
      transition: box-shadow linear 0.4s;
      background-color: #2196F3;
      border-color: #2196F3;
      margin-top: 10px;
    cursor: pointer;
}


.fc .fc-button-group > * { /* extra precedence b/c buttons have margin set to zero */
    float: left;
    /*margin: 0 0 0 -1px;*/
}

.fc-state-default {
/*
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
*/
}