Hey everyone,
Just a quick post on how to change a few of the styles in FullCalendar. All you need to do is add these after the default styles are loaded:
Current Day Background Color
.fc-today{
background-color: blue;
}
Change Calendar Background Color
#calendar .fc-content{
background-color: #FFFFFF;
font-size: 80%;
}
Add Box Shadow to Events
#calendar .fc-event{
box-shadow: 2px 2px 2px #706868;
}
Style Times and Days – Add border radius to headings
#calendar .fc-agenda-axis, #calendar .fc-widget-header{
background-color: #C2E6FF;
border-color: #AED0EA;
font-weight: normal;
padding: 3px;
border-radius: 3px;
}
What I Broke - Programming and Web Development 
hello,
i tested Change Calendar Background Color but it does not work, So I triied this fot the month it works
.fc-grid td {
background: #fefff9;
border-width: 1px 0 0 1px;
}
and this for the week (slot)
.fc-agenda-slots td {
border-width: 1px 0 0;
background: #fefff9 !important;
}
The borders an the color of the day is lost.
Di you have any solution. It lokks to me that it is not possible to change the background of the slots.
You can see my calender. We us it with primefaces
http://osretail.de/osRetail/
This is an OpenSource application for all kind of retailers
you need no password, Go in the menue to GroupWare and call Kalender.
Thank you for your help
Regards form Bavaria
Peter
LikeLike
Hey Peter,
You can set this via javascript or css.
Taking a look at your site, it looks like you can override the default by adding a background property to .emp2 .fcevent, eg:
.emp2 .fc-event {
background: green;
}
You might run into issues doing it via css though if you’re overriding it with JavaScript. One of the properties of the event objects is actually the color so it will get applied afterwards. I’ve previously done a quick demo here on how to do it with JavaScript: http://www.whatibroke.com/?p=581
Probably worth checking that out, there’s a bit of sample code there. Let me know how you go.
Cheers,
Chris
LikeLike
C# is a bullshit for web development. The only great language for web development is PHP.
LikeLike
lol, probably not at the right blog then I don’t think Shahidkarimi
LikeLike
If you want to get nice, consistent result you must use styles like here:
.fc-today.ui-state-highlight {
background: none !important;
background-image: none !important;
background-color: wheat !important;
border: 1px solid #A6C9E2 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #363636 !important;
}
.fc-today.fc-day-number {
background: none !important;
border-bottom: none !important;
}
td {
position: static !important;
}
LikeLike