Using different colors throughout your Web calendar

You can change the color of any row or column in a Web view or entry in a Web calendar, based on the information in your document and the CSS styles you create.

1. Pick the field you want to use and determine the color of the entry or column.
2. Decide which of the following options to use for your application:
   A: Add a field to the form(s) used by docs to calculate a CSS class name based on the value of the field you picked in step 1.
   B: In the view column formula use an if statement to select a CSS class based on the value of the field you selected in step 1.
   C: Do both.
3. Modify your view to implement pass through HTML for one or more columns referencing a CSS class you will define. The reference to the CSS class to use will be:
   A: Based on the class name value in another field.
   B: Hardcoding a class name selection with an if statement.
   C: Both.
4. Create a new (or modify your existing) style sheet either as a page or resource in your Domino database.
5. Create classes in your style sheet for each different color you want to use, and name them so they align with what you are triggering on in step 1.
6. Use a view template and reference your style sheet in the HTML head section of your view template.

Example: In a calendar view, I want to distinguish scheduled classes based on the training room they are in.

Steps for example:

1. On my existing form, I decided to use the trainroom field for determining the color I

1. would assign to the entry.
2. Using option A, I added a field to this form called "classstyle" with an if statement to translate the trainroom field into a CSS class that I will define in a style sheet.
   "classstyle" computed text Formula is:

   @If ( trainroom = "1";
     "train1";
    trainroom = "2";
     "train2";
    "holiday"
   )
   
   

   Note: You should also create a quick agent to update all pre-existing documents to calculate the classstyle value.

3. Using option B. I would modify my calendar view's entry display column's formula to use an if statement to select which CSS style to apply - in effect hardcoding it into the view itself.
4. Implement your choice in the view's column. In this case, I chose option C (A & B combined), to implement my entry colors.
   The first @if test implements option A, the next three @if tests implement option B. Finally, the default for the @if is to not use any CSS classes.

   gr := @If( group = ""; ""; " - ");
   @If (  @IsAvailable(classstyle);
     "[<div class=""+classstyle+"">]"
   + Group + gr + 
   DaySubject + "[</div>]";
    trainroom = "1";
     "[<div class="train1">]"+ Group 
   + gr + DaySubject 
   + "[</div>]";
    trainroom = "2";
     "[<div class="train2">]"+ Group 
   + gr + DaySubject 
   + "[</div>]";
    trainroom = "holiday";
     "[<div class="holiday">]"+ Group 
   + gr + DaySubject 
   + "[</div>]";
    Group + gr + DaySubject
   )
   
   

5. I modified my existing style sheet to add these classes. Notice I did not tie them to DIV or SPAN explicitly, since I could re-use them and add DIV or SPAN specific requirements in those tags:

   /* Here are the definitions that 
   are being used for the different
    calendar entries */
   
   .train1 {
    BACKGROUND-COLOR: white; 
   }
   .train2 {
    BACKGROUND-COLOR: #add8e6; 
   }
   .holiday {
    FONT-WEIGHT: bold; 
    COLOR: white; 
    BACKGROUND-COLOR: red
   }
   
   /* I am listing how div and span 
   are defined separately to demonstrate 
   why I 
   did not use DIV.train1, etc instead 
   in my definitions above. In my case, I 
   added a legend to my template 
   using the same classes but used a 
   span tag vice 
   div to fit my legend one line */
   
   DIV {
     display: block;
     font-family: sans-serif;
   }
   SPAN {
     font-size: x-small;
     font-family: sans-serif;
   }
   
   

   TIP: If you use a style sheet editor, remove the <STYLE> </STYLE> tags from the top and bottom of the style sheet you store in your Domino database.

6. In the HTML head for my view template I linked to my stylesheet.
   <LINK HREF="kendo-calendar-v2.css" REL="stylesheet" TYPE= "text/css" >

Extending this method

This method can be applied to regular view columns in the same manner -- enabling you to have more than just alternating colors in a view. You could also use the same method to use different styles for each column to achieve a kaleidoscope of colors in your views.

Summary

CSS style sheets allow you to fix many of the formatting issues that a default Domino Web view imposes, simply by defining styles for TD, A and BODY elements. You can also customize your Web views, so that you can call attention to specific items based on their values by using CSS classes.

Do you have comments on this tip? Let us know.

This tip was submitted to the SearchDomino.com tip exchange by member Linda Ruiz. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.