| Issue 74: | CSS class for days w/ events over them | |
| 12 people starred this issue and may be notified of changes. | Back to list |
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
Aug 5, 2009
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
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
How to retrieve events data in function render()?
Aug 5, 2009
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
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
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
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
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
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
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
Resolved !!!!!!!
Mar 11, 2010
Are there any workarounds for css on days with events until this is added?
Jul 5, 2010
Issue 538 has been merged into this issue.
Jul 7, 2010
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
Feb 18, 2011
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
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
@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
Very useful feature to have. Adam, any thoughts on when this feature might be available. Thanks
Oct 31, 2011
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
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',
}
]
Jan 24, 2012
Free Website Template. http://www.gntemplates.com/
Feb 10, 2012
HOW TO USE PHOTOSHOP GIVE ME FEW TIPS..........
Mar 19, 2012
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
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
(No comment was entered for this change.)
Labels:
-Type-Defect -Priority-Medium Type-Feature
Aug 18, 2013
Issue 1585 has been merged into this issue.
Aug 21, 2015
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 |