| Issue 748: | Easier overriding of default event color | |
| 2 people starred this issue and may be notified of changes. | Back to list |
The documentation for Event colors (http://arshaw.com/fullcalendar/docs/event_rendering/Colors) requires three selectors per custom class, as well as require an override of three properties. This becomes cumbersome with many custom classes, as well as limits ease of inheritance. Obviously a default styling is needed, but one solution is to split that style into a separate stylesheet, like fullcalendar.defaults.css, so that it can be overridden or excluded. This would be a great benefit to the Drupal implementation of fullcalendar. Since we discourage altering 3rd party files for easy updating, we can't remove them ourselves. I attempted to fix this here: https://github.com/arshaw/fullcalendar/pull/12 However I'm too inexperienced with makefiles to prevent it from being bundled together.
Dec 19, 2010
Any new users would likely either forget both, or include both. And upgrading users hopefully would figure out the change, especially if you put a big notice on http://arshaw.com/fullcalendar/download, similar to the one there now. The reasoning behind splitting the files is two-fold. First, I personally won't ever use defaults. If I want my event to have a blue background and no border, I'd rather do .myclass {background-color:blue;} than explicitly overriding multiple styles with a three-part selector for each class. Second, since I'm using this from within Drupal, I can programmatically include or exclude CSS. Loading only the required styles and not the defaults is trivial if the files are separate. As a workaround, the Drupal module currently adds the class .fc-event-default to each event, and an edited fullcalendar.css only assigns the defaults to .fc-event-default. However, this makes it difficult to upgrade to newer releases of your code. I'm glad to hear that 1.5 will improve on this. Is 1.5 coming soon? Or will there be a 1.4.10?
Dec 31, 2010
i really do think there will be a substantial portion of both existing or new users who will forget to include this extra stylesheet. either because they forget, don't realize they have to, or don't understand the concept behind a "defaults" stylesheet. there will inevitably be some confusion and support cost associated with this.
also, the browser has to load another CSS file, causing a slower-loading calendar for everyone using fullcalendar.
seems like you don't like having to write a 3-part css selector. (BTW, the css is like in order to make the "fake" rounded corners that work in the IEs). seems like your argument is more about *convenience* and having things done the "right way". for me, this just does not measure up to the potential support costs.
it is not that hard to erase the defaults by providing more precedent css. it may not feel nice, but there isn't much work involved.
i do agree that the css selector is a little messy, and not really backwards compatible if fullcalendar changes the way it does corners/borders/backgrounds. in 1.5, it will be more semantic, and backwards-compatibility-proof. here is what it will probably look like.
.my-event-class {
color: black; /* text color */
}
.my-event-class .fc-event-border {
border-color: red;
}
.my-event-class .fc-event-background {
background-color: blue;
}
i'm pretty sure there will be 1.4.10, fixing some minor bugs
Jan 1, 2011
(No comment was entered for this change.)
Status:
Done
|
|
| ► Sign in to add a comment |
i don't see how splitting these styles into a separate file makes things any cleaner. i'd be afraid that more naive users would forget to include this defaults file, and end up with events that have no colors. if you want to change what the defaults are, you could just override them somewhere after fullcalendar.css is imported. so do something like this: <link rel='stylesheet' type='text/css' href='fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='fullcalendar-custom.css' /> and at the top of fullcalendar-custom.css declare your new defaults: .fc-event, .fc-agenda .fc-event-time, .fc-event a { background-color: purple; /* background color */ border-color: purple; /* border color */ color: purple; /* text color */ } as for the pain of having to write long-winded css to achieve all of this, i agree w/ you. the 1.5 version of fullcalendar will have a better way of doing this.