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

in

, , ,

by

Comments

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

  1. Peter Magsam Avatar

    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

    Like

    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: 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

      Like

  2. Shahidkarimi Avatar

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

    Like

    1. Chris Owens Avatar
      Chris Owens

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

      Like

  3. Ziggi Avatar
    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;
    }

    Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 WordPress.com

%d bloggers like this: