Using different colors throughout your Web calendar

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

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 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);
      "[&ltdiv class=""+classstyle+"">]"
    + Group + gr + 
    DaySubject + "[</div>]";
     trainroom = "1";
      "[&ltdiv class="train1">]"+ Group 
    + gr + DaySubject 
    + "[</div>]";
     trainroom = "2";
      "[&ltdiv class="train2">]"+ Group 
    + gr + DaySubject 
    + "[</div>]";
     trainroom = "holiday";
      "[&ltdiv 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 &ltSTYLE> </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.
    &ltLINK 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.

Dig Deeper on Lotus Notes Domino Formula Language

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchDataCenter

SearchContentManagement

Close