Custom Colors Using Administration Interface

I am thinking about implementing this. I did some tests with split day statuses and arrived at something like:

HTML to render:

<table class="cal">
  <caption>maart 2011 <a href="/availability-calendars/6/2011/03/edit?destination=node/6">bewerken</a></caption>
  <thead>
  .. days of week
  </thead>
<tbody>
<tr class="calweek even">
  <td class="calnote"></td>
  <td class="calavailable"><div>5<div></div></div></td>
  ... 6 more days
</tr>
.. more weeks

CSS:

/* whole day states, -pm states are IE6 fallback: IE6 does not display split states: show PM state as whole day state */
td.calavailable, td.calavailable-pm {
  background-color: #90EE90;
}
td.calnotavailable, td.calnotavailable-pm {
  background-color: #FFB6C1;
}
td.calnotavailableprov, td.calnotavailableprov-pm {
  background-color: #FFFFE0;
}

/* split day states */
.calweek td.calavailable-am div div {
  border-top-color:  #90EE90;
  border-left-color:  #90EE90;
}

.calweek td.calavailable-pm div div {
  border-bottom-color:  #90EE90;
  border-right-color:  #90EE90;
}
/* div to show split day as | */
/*
.calweek td div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 28px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  z-index: -1;
}
*/
/* div to show split day as - */
/*
.calweek td div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  z-index: -1;
}
*/

Rendering as above allows:
- not needing to combine all statuses => easier css generation
- slightly better IE6 handling (split day shown as pm state)
- choosing between / \ | - as day splitter

To decide:
What options to present in the interface
Day cells:
- width of the cell (pixels)
- height of a cell (pixels)
- border (pixels, color)
- background color for all states (color)
- how to render a split day: / \ | -
- foreground color of day numbers (color)

Other cells:
- width of a note cell
- font-style for headers, i.e name of day of the week (bold, normal, ...)

Row:
- ???

Table:
- border (pixels, color)

Other ideas?, please post them.

I think we should start with a fairly minimal set of the above settings and see how it works out. Adding more css styles later should bot be too difficult. Other implementation details:
- separate admin settings screen (containing the css style settings only not the other presentation settings like 'first letter only')
- start with basic color selection (that is text input of 6 hex chars) (though note that examples module presents a color picker: http://api.drupal.org/api/examples/field_example--field_example.module/7...)
- generation of css on saving
- inclusion of css (drupal_add_css()) as normal in hook_init.
- writing the css to the sites/defaults/files/css folder (should be writeable for the webserver uid, whereas sites/all/modules might (should?) not be writeable)
- for the moment ignoring the theme specific styles: leave as is.
- additional help of how to further style the calendar in your theme css?

It would be nice if everybody could post his/her remarks, completions, suggestions about these specs before I start working on it (next week probably).

I was too busy with the D7 version, so I did not recently update the D6 branches. With write access I can integrate these versions into a new branch and merge your changes.

Regarding the text color: It certainly depends on the color palette you choose for the states, but allowing to differ it per state, will get you into trouble using split states. You won't know which one to choose. So I'm a bit hesitant to offer this by default.

I will have a look at your proof of concept and come back to you.

Added a proof of concept: admin screen only with some fields.
- No validation.
- No generation.
- Not yet all CSS styles that we want to add.
- No fields for the colors for the states yet.
- No color picker, no color names.
- No upgrade, install, uninstall.

But the building blocks are there and it doesn't interfere with other functionality, so "safe" to commit.

This feature is complete and has been committed.

- Large part of CSS settings can now be set via an admin styling screen and will subsequently be generated.
- It is possible to do all styling yourself and not generate/include the css file
- A base CSS file remains for settings that are not part of the admin styling screen yet. (This will always be included, even if the generated CSS is not included, This might be changed in the future to allow for an all custom styling.)
- The feature has been tested on all default installation themes, as well as framework and fusion_starter.
- An upgrade path is available. As this upgrade changes all states of all days of all calendars please back-up your availability calendars tables before updating.
- After upgrading, the calendars will probably look a bit different. An update path that takes into account all current styling was not feasible. Try the admin styling screen to set your values (or resort to custom styling in your theme).

Notes:
- Not all possible CSS settings are part of the admin styling screen. You are welcome to add settings. The code is set up with this in mind and so should not be to hard.
- No color picker has been added yet. Feel free to do so, it will certainly be committed (after test and review of course). (I know that in D7 the examples module contains an example of adding a color picker to a field)

Please let us know:
- what settings you miss
- What themes may need some attention. Goal is that out of the box the calendar should look reasonably well and at least will show the colors. E.g. to overrule odd/even colorings of some themes, I added a span in each cell, even in the non split day situation.