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

1
2
3
.fc-today{
   background-color: blue;
}

Change Calendar Background Color

1
2
3
4
#calendar .fc-content{
	background-color: #FFFFFF;
	font-size: 80%;
}

Add Box Shadow to Events

1
2
3
#calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

Style Times and Days – Add border radius to headings

1
2
3
4
5
6
7
#calendar .fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}

5 thoughts on “Change Current Day Color – jQuery FullCalendar

  1. Peter Magsam

    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

    Reply
    1. Chris Owens Post author

      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

      Reply
  2. Ziggi

    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;
    }

    Reply

Leave a Reply