Change Current Day Color – jQuery FullCalendar

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

   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;



, , ,



5 responses to “Change Current Day Color – jQuery FullCalendar”

  1. Peter Magsam Avatar


    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

    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



    1. Chris Owens Avatar
      Chris Owens

      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:

      Probably worth checking that out, there’s a bit of sample code there. Let me know how you go.



  2. Shahidkarimi Avatar

    C# is a bullshit for web development. The only great language for web development is PHP.


    1. Chris Owens Avatar
      Chris Owens

      lol, probably not at the right blog then I don’t think Shahidkarimi


  3. Ziggi Avatar

    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;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at

%d bloggers like this: