CODEWITHSUNDEEP
javascriptjquerycssfullcalendar
user1834809
user1834809

Reputation: 1311

how to build custom theme for fullcalender jquery?

I would like to build custom theme for http://arshaw.com/fullcalendar/, Is there any documentation to replace existing class and override with new classes. I dont want to use jquery UI theme.

how to move forward to build theme for fullcalender?

Upvotes: 2

Views: 5423

Answers (1)

Romain Braun
Romain Braun

Reputation: 3684

There isn't any theme builder for this.

Although you can freely make your own CSS and make it look the way you want.

I use fullcalendar myself, and this is an example of what you could manage to get :

http://cl.ly/image/2i3R170w080i

This is one part of the CSS. You can edit anything you want in fullcalendar.css and overwrite their definitions.

#calendar .icon-ok-sign {
    position: absolute;
    margin-left: 38px;
    margin-top: -42px;
}

#calendar .fc-header-left{
    height: 30px;
    border-right: solid 2px #DC9E0F;
    text-align:center;
    width: 50px;
    line-height: 30px;
}

#calendar .fc-header-center{
    height: 30px;
    line-height: 30px;
}

.rightArrow, .leftArrow {
    height:30px;
}

.leftArrow img, .rightArrow img{
    height:15px;
}

#calendar .fc-header-right{
    height: 30px;
    border-left: solid 2px #DC9E0F;
    text-align:center;
    width: 50px;
    line-height: 30px;
}

#calendar .fc-header-title h2 {
    line-height: 20px;
}

#calendar .fc-today {
    color:#FBB616;
}

#calendar .fc-today.selected {
    color:#FFF;
}

#calendar .selected {
    background-color: #FBB616;
}

Upvotes: 2

Related Questions