SID-01410: Changing background color based on date

Status:	Answered	TWiki version:		Perl version:
Category:	CategoryJavaScript	Server OS:		Last update:	13 years ago

I have a twiki table project page that has due dates that correspond with each project. I would like to change either the background color or color of the text of the date when the project goes over due.

it would be even better if I could do the following: 30+ days with in due date text and/or background is green 7 days with in a due date text and /or background is yellow overdue project due date text and/or background is red

Any help is much appreciated!

-- LauraHenry - 2012-02-21

Discussion and Answer

What format are those dates? ISO date? How are they stored? In TWikiForms?

Here are some hints:

• Assuming you use TWikiForms, show a FormattedSearch report that pulls the dates, such as $formfield(Due Date)
• Enclose the date in CSS to change the background color, such as <div style="background-color:#123456">$formfield(Due Date)</div>
• Use the SpreadSheetPlugin do calculate desired hex color based on the date value, e.g. replace the #123456 in above example with a %CALC{...}%.
• Functions you likely need:
  • SpreadSheetPlugin - to convert a date string into a serial number (for comparison)
  • SpreadSheetPlugin - to calculate the difference between dates
  • SpreadSheetPlugin - to conditionally output text
  • SpreadSheetPlugin - to AND conditions

-- PeterThoeny - 2012-02-23

Above hints are for a server side solution using TML (TWiki Markup Language), HTML and CSS. It is likely possible to do that browser side using JavaScript only.

-- PeterThoeny - 2012-02-23

Closing this question after more than 30 days of inactivity. Feel free to reopen if needed. Consider engaging one of the TWiki consultants if you need timely help. We invite you to get involved with the community, it is more likely you get community support if you support the open source project!

-- PeterThoeny - 2012-07-01

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.