Fullcalendar: CSS class for days w/ events over them

[arshaw]

Originally reported on Google Code with ID 74

Hi,

I want to change background color of some special days, look like the
current day of month.

How can I do it?

Thanks

Reported by phuctbui on 2009-08-05 14:06:02

Imported with 12 stars.

[arshaw]

You need to edit the css file. The css selector you need is: 

.full-calendar-month td.today

Reported by kyle.mcnally01 on 2009-08-05 17:49:56

[arshaw]

My bad, re-read you question. You can probably add an event to that day, then find
the parent td and change the css that way.

Reported by kyle.mcnally01 on 2009-08-05 17:51:31

[arshaw]

I need to change the color of events and background color of day like these.

1.
-Out of date events is red.
-Normal events is blue.
-Special events is green.
(I have modified your code to get this thing done)
2.
-Current day is yellow.
-All weekend day is red.
-Thursday is green.

I don't find any ways to get this thing done. How can I change the background color
depend on data like events?

Thanks and regards,

Reported by phuctbui on 2009-08-06 00:48:22

[arshaw]

How to retrieve events data in function render()?

Reported by phuctbui on 2009-08-06 03:05:43

[arshaw]

I finished my work by adding id into <td class day...> and using JQuery to change the
background color. Thanks for support.

Reported by phuctbui on 2009-08-06 05:32:41

[arshaw]

phuctbui or anyone else who wants hyper-customization for day css:

there is currently no way to style a day based on the events that occur on it. i didn't

think that a full-sized calendar really needed this. seems more suited to smaller 
calendars where days w/ events have different background colors. however, i'm not 
opposed to adding a CSS class to days w/ events on them. i will 'accept' this issue
b/c 
it sounds like something that would be great in an upcoming release.

there IS however, a way to style the current day, and any other day of the week:
td.today
td.sun, td.mon, td.tue, etc...

Reported by adamrshaw on 2009-08-30 20:29:30

• Status changed: Accepted

[arshaw]

phuctbui, for your 2nd question, about retrieving events that have been rendered, see

here:
http://code.google.com/p/fullcalendar/issues/detail?id=56

thanks,
adam

Reported by adamrshaw on 2009-08-30 20:31:20

[arshaw]

I see the inbuilt class name has changed to fc-sat and fc-sun ,

Should I be able to specify

td.fc-sun {
    background-color:#006699;
}
I've tried but it doesn't seem to have an effect, but my grasp of CSS is limited.
thanks

Reported by pwilsoncbr on 2009-09-23 04:36:36

[arshaw]

ah yes, because of the new way the css works w/ [optional] themes, i needed to 
declare the background differently.

you can still do it, but you need to add more precedence to the css statement. do 
something like the following:

.fc td.fc-sun {
  background: red;
}

Reported by adamrshaw on 2009-09-23 04:56:43

[arshaw]

I have a simple requirement to show holidays in separate cell background colors and
working days in separate cell background color?Please let me know if this is possible
with out event rendering on those days.

Reported by priti.solanki on 2010-03-10 00:13:50

[arshaw]

I tried following which worked
  ele=$('tr.fc-week1');
  ele.addClass('fc-availablecell');

This show the first week background colored changed. But when I tried following
   ele=$('td.fc-day8');
   ele.addClass('fc-availablecell');

If I check the class fc-availablecell is added in cell but the cell background color
doesn't change.
The class for day8 get modified as shown

<td class ="fc-mon fc-state-default fc-day8 fc-not-today fc-availablecell">

Any helps?? I think this way I can solve my problem.

Reported by priti.solanki on 2010-03-10 01:25:59

[arshaw]

Resolved !!!!!!!

Reported by priti.solanki on 2010-03-10 04:33:24

[arshaw]

Are there any workarounds for css on days with events until this is added?

Reported by troy.dahnert on 2010-03-11 17:42:22

[arshaw]

Issue 808 has been merged into this issue.

Reported by adamrshaw on 2010-07-06 04:51:01

[arshaw]

i've been trying to colorize all date that does not has any event on it (background)
without changing any single line of fullcalendar.js code. I've been using some original
callback and method from calendar.js.

I think you can change my code and add your own some special background color to your
event calendar. 

The worked calendar demo will be uploaded into http://indonesia.travel/en/event/calendar

Reported by LayChinHan on 2010-07-07 07:13:05

---

• _Attachment: custom color for day with events and without events.js_

[arshaw]

Hi LayChin,
    i have change the event baground color,u provide a some code but where i can add
this code please tell me............ 

Reported by victor.athoti on 2011-02-19 05:06:06

[arshaw]

I did this by supplying different sources for different event sources with an extra
field "className"

so 
'feed1' will have data with hardcoded data including 'className' "blue"
'feed2' will have data with hardcoded data including 'className' "yellow"
'feed3' will have data with hardcoded data including 'className' "green"

Doing this with googleCalendars can be impossible though. I am talking about xml,json..

and add the specific classes to the CSS file
There is even option color and background colors... you need to change your data a
bit. The features available work great.

Reported by p.studioz on 2011-04-13 13:30:38

[arshaw]

@victor
the code is the full implementation of the plugin usage. Just put it on your page footer
and adjust the container name

Reported by LayChinHan on 2011-05-02 06:30:29

[arshaw]

Very useful feature to have. 

Adam, any thoughts on when this feature might be available. 

Thanks

Reported by mdeedub1 on 2011-08-05 11:51:05

[arshaw]

very nice discussion here i improve my knowledge and learn some technique here which
i use in my site http://www.ubrushes.com

Reported by mohsinyousuf.25 on 2011-10-31 20:33:38

[arshaw]

Very dirty fix, but It works for me.

Add to events dictionary object css with class name for your event.

events: [

                    {

                        title: 'title',
                        start: new Date({{ |date:"Y, m, d"}}),
                        allDay: false,

                            url: '{% url journal_change object.pk %}',
                            css: 'journal',
                                        }
]

Reported by xpahos on 2012-01-03 12:41:44

---

• _Attachment: diff_

[arshaw]

Free Website Template.

http://www.gntemplates.com/

Reported by eventplanners70 on 2012-01-24 08:17:50

[arshaw]

HOW TO USE PHOTOSHOP GIVE ME FEW TIPS..........

Reported by samadiqbal.86 on 2012-02-10 17:17:02

[arshaw]

Hello, 

I have modified the code a little to fit my needs. 

around line 2294, I replaced it with this. 

bodyCells.each(function(i, _cell) {
            cell = $(_cell);
            date = indexDate(i);
            if (date.getMonth() == month) {
                cell.removeClass('fc-other-month');
            }else{
                cell.addClass('fc-other-month');
            }
            if (+date == +today) {
                cell.addClass(tm + '-state-highlight fc-today');
            }else{
                cell.removeClass(tm + '-state-highlight fc-today');
            }
            m = date.getMonth() + 1;
            cell.find('div.fc-day-number').text(date.getDate()).parent().parent().attr("date",date.getDate()+"/"+m+"/"+date.getFullYear());
            if (dowDirty) {
                setDayID(cell, date);
            }
        });

what it does is add a date attribute with the current date, so you can change the css
with jQuery. 

Cheers. 

Reported by makara.aktee.sok on 2012-03-19 18:40:41

[arshaw]

Hi priti...
Can u Please tel me how did u do to show holidays in separate cell background colors
and
working days in separate cell background color?
Please help me with the code n where to add it...
Thanking u...

Reported by NAYEEMNSHAIKH on 2013-01-16 17:16:51

[arshaw]

Reported by adamrshaw on 2013-08-14 01:20:26

• Labels added: Type-Feature
• Labels removed: Type-Defect, Priority-Medium

[arshaw]

Issue 1852 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:21:39

[mobyjames]

eventAfterRender: function(event,element) {
  var index = element.parent().index();
  element.closest('.fc-week').find('.fc-bg td').eq(index).css('background-color', 'white');
}

[arshaw]

Should also attach a CSS class for days that have no events.

[linyco]

we have multi-day events, came up with solution based on @mobyjames 's solution

eventAfterRender: function(event, element) {
    var index = element.parent().index();
    var colspan = element.parent().prop('colspan')

    n = 0
    while (n < colspan) {
      element.closest('.fc-week').find('.fc-bg td').eq(index + n).css('background-color', 'white');
      n++
    }
  }