My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 74: CSS class for days w/ events over them
12 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by phuctbui, Aug 5, 2009
Hi,

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

How can I do it?

Thanks
Aug 5, 2009
#1 kyle.mcn...@gmail.com
You need to edit the css file. The css selector you need is: 

.full-calendar-month td.today
Aug 5, 2009
#2 kyle.mcn...@gmail.com
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.
Aug 5, 2009
#3 phuctbui
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,





Aug 5, 2009
#4 phuctbui
How to retrieve events data in function render()?
Aug 5, 2009
#5 phuctbui
I finished my work by adding id into <td class day...> and using JQuery to change the
background color. Thanks for support.



Aug 30, 2009
Project Member #6 adamrs...@gmail.com
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...
Status: Accepted
Aug 30, 2009
Project Member #7 adamrs...@gmail.com
phuctbui, for your 2nd question, about retrieving events that have been rendered, see 
here:
https://code.google.com/p/fullcalendar/issues/detail?id=56

thanks,
adam
Summary: CSS class for days w/ events over them
Sep 22, 2009
#8 pwilson...@gmail.com
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
Sep 22, 2009
Project Member #9 adamrs...@gmail.com
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;
}
Mar 9, 2010
#10 priti.so...@gmail.com
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.
Mar 9, 2010
#12 priti.so...@gmail.com
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.

Mar 9, 2010
#13 priti.so...@gmail.com
Resolved !!!!!!!
Mar 11, 2010
#14 troy.dah...@gmail.com
Are there any workarounds for css on days with events until this is added?
Jul 5, 2010
Project Member #15 adamrs...@gmail.com
 Issue 538  has been merged into this issue.
Jul 7, 2010
#16 LayChin...@gmail.com
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
custom color for day with events and without events.js
3.7 KB   View   Download
Feb 18, 2011
#17 victor.a...@gmail.com
Hi LayChin,
    i have change the event baground color,u provide a some code but where i can add this code please tell me............ 
Apr 13, 2011
#19 p.stud...@gmail.com
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.

May 1, 2011
#20 LayChin...@gmail.com
@victor
the code is the full implementation of the plugin usage. Just put it on your page footer and adjust the container name
Aug 5, 2011
#21 mdeed...@gmail.com
Very useful feature to have. 

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

Thanks
Oct 31, 2011
#24 mohsinyo...@gmail.com
very nice discussion here i improve my knowledge and learn some technique here which i use in my site http://www.ubrushes.com
Jan 3, 2012
#26 xpa...@gmail.com
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',
                                        }
]
diff
869 bytes   View   Download
Jan 24, 2012
#27 eventpla...@gmail.com
Free Website Template.

http://www.gntemplates.com/
Feb 10, 2012
#29 samadiqb...@gmail.com
HOW TO USE PHOTOSHOP GIVE ME FEW TIPS..........
Mar 19, 2012
#30 makara.a...@gmail.com
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. 
Jan 16, 2013
#34 NAYEEMNS...@gmail.com
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...

Aug 13, 2013
Project Member #35 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: -Type-Defect -Priority-Medium Type-Feature
Aug 18, 2013
Project Member #36 adamrs...@gmail.com
 Issue 1585  has been merged into this issue.
Aug 21, 2015
Project Member #37 adamrs...@gmail.com
Discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/345

This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event.

Happy coding,
Adam
Status: ExportedToGithub
Sign in to add a comment

Powered by Google Project Hosting