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

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

Posted

January 1, 2013

Guides, jQuery, Web Design, Web Development

Chris Owens

Tags:

CSS, FullCalendar, guide, jQuery, jQuery UI

Comments

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

Peter Magsam

January 26, 2014

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

Reply
1. Chris Owens
  
  January 26, 2014
  
  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
  
  Reply
Shahidkarimi

February 17, 2014

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

LikeLike

Reply
1. Chris Owens
  
  February 17, 2014
  
  lol, probably not at the right blog then I don’t think Shahidkarimi
  
  LikeLike
  
  Reply
Ziggi

March 25, 2015

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

Reply

Change Current Day Color – jQuery FullCalendar

Current Day Background Color

Change Calendar Background Color

Add Box Shadow to Events

Style Times and Days – Add border radius to headings

Like this:

Comments

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

Leave a Reply Cancel reply

Change Current Day Color – jQuery FullCalendar

Current Day Background Color

Change Calendar Background Color

Add Box Shadow to Events

Style Times and Days – Add border radius to headings

Share this:

Like this:

Comments

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

Leave a Reply Cancel reply