Fullcalendar with Twitter Bootstrap?

后端 未结 3 844
梦谈多话
梦谈多话 2021-01-31 10:03

The Fullcalendar widget is awesome. I\'m using it in a Twitter Bootstrap project, and it looks just about perfect out of the box.

One thing that sticks out, though, is t

3条回答
  •  执笔经年
    2021-01-31 10:15

    This are the default css for Fullcalendar Buttons

    /* Buttons
    ------------------------------------------------------------------------*/
    .fc-button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        }
    
    .fc-state-default { /* non-theme */
        border-style: solid;
        border-width: 1px 0;
        }
    
    .fc-button-inner {
        position: relative;
        float: left;
        overflow: hidden;
        }
    
    .fc-state-default .fc-button-inner { /* non-theme */
        border-style: solid;
        border-width: 0 1px;
        }
    
    .fc-button-content {
        position: relative;
        float: left;
        height: 1.9em;
        line-height: 1.9em;
        padding: 0 .6em;
        white-space: nowrap;
        }
    
    /* icon (for jquery ui) */
    
    .fc-button-content .fc-icon-wrap {
        position: relative;
        float: left;
        top: 50%;
        }
    
    .fc-button-content .ui-icon {
        position: relative;
        float: left;
        margin-top: -50%;
        *margin-top: 0;
        *top: -50%;
        }
    
    /* gloss effect */
    
    .fc-state-default .fc-button-effect {
        position: absolute;
        top: 50%;
        left: 0;
        }
    
    .fc-state-default .fc-button-effect span {
        position: absolute;
        top: -100px;
        left: 0;
        width: 500px;
        height: 100px;
        border-width: 100px 0 0 1px;
        border-style: solid;
        border-color: #fff;
        background: #444;
        opacity: .09;
        filter: alpha(opacity=9);
        }
    
    /* button states (determines colors)  */
    
    .fc-state-default,
    .fc-state-default .fc-button-inner {
        border-style: solid;
        border-color: #ccc #bbb #aaa;
        background: #F3F3F3;
        color: rgb(162, 48, 48);
        }
    
    .fc-state-hover,
    .fc-state-hover .fc-button-inner {
        border-color: #999;
        }
    
    .fc-state-down,
    .fc-state-down .fc-button-inner {
        border-color: #555;
        background: #777;
        }
    
    .fc-state-active,
    .fc-state-active .fc-button-inner {
        border-color: #555;
        background: #777;
        color: #fff;
        }
    
    .fc-state-disabled,
    .fc-state-disabled .fc-button-inner {
        color: rgb(122, 69, 69);
        border-color: #ffffd;
        }
    
    .fc-state-disabled {
        cursor: default;
        }
    
    .fc-state-disabled .fc-button-effect {
        display: none;
        }
    

    So just try to add this to your CSS and change them as you like

提交回复
热议问题