Contextual Header

Each view template is prefaced a prominent navigational element that contains the following elements:

1. Links to previous and next date ranges
2. Links to jump to a specified date range
3. Links to move to a broader view template (i.e. from a month view to a year view)
4. Current date range displayed by the view template

This navigation element, known as the contextual header, is written with flexibility in mind. Functional elements #1 and #2 are enclosed in a <div> with the class sun-dateMenu. Functional element #3 is enclosed in a list <ul> with the class sun-viewMenu.

H-1: sun-dateMenu

Within sun-dateMenu, as seen in diagram H-1, there is:

1. A previous date range link (sun-prev)
2. A group of elements (sun-dateSelect) to jump to a specified date range, consisting of a series of drop down boxes, a "go to this date range" submit link (sun-go), and possibly a label for the group of elements (sun-selectName).
3. A next date range link (sun-next)

H-2: sun-viewMenu

Each list item in the list sun-viewMenu (as seen below in H-2) contains a navigational link to a broader view template. These links appear if the appropriate criteria variable is set to true, and have an appropriate id, as according to the following list.

The current date range (functional element #4) is displayed in h1 with the class sun-header. Note: the miniMonth view does not have such a header element.

Below you will find samples of the contextual header for each of the view templates. From here you can see how each varies, in terms of what text is contained by sun-selectName, or how many select boxes are contained by sun-dateSelect.

Samples

HS-1: Year View's Contextual Header

HS-2: Month View's Contextual Header

HS-3: Week View's Contextual Header

HS-4: Day View's Contextual Header

HS-5: MiniMonth View's Contextual Header

Below you will find an excerpt from the stylesheet used by Sundial for its view templates' contextual headers.

h1.sun-header {
  clear: both;

  background: #FEEB78 
       url("images/viewType/swooshBackground.gif") 
       no-repeat right center; 
  border: 1px solid black;
  border-top: 0;

  margin-top: 0;
  padding: 14px 20px; 
}


div.sun-contextHeader {
   background:  url("images/viewType/background.gif") 
		  repeat-x;
   /* IE Mac 5 seems to include the border in the background position */
   background-position: 0 1;  
   height: 28px;
   border: 1px solid black;
   padding: 0;

}

/* Date Menu and the Select box */

span.sun-dateSelect {
  background: url("images/viewType/lightBackground.gif") repeat-x;
  height: 24px;  /* = 28px - 4px padding top */

  padding: 4px 1.5em 0 1.5em;
  margin: 0 4px 0;
}

span.sun-dateSelect span.sun-selectName { 
  margin-top: 4px;
}

div.sun-dateMenu,
div.sun-dateMenu span,
span.sun-dateSelect select {
   margin: 0 2px;
   float: left;
   display: block;
}

div.sun-dateMenu *.sun-prev,
div.sun-dateMenu *.sun-next { 
   margin-top: 4px;  
}


*.sun-go a,
*.sun-next a,
*.sun-prev a { 
  display: block;

  background-repeat: no-repeat;
  overflow: hidden;

  padding-top: 19px;   
  height: 0px;
} 

/* double up because IE Mac 5 needs width defined in floats */
*.sun-go,
*.sun-go a {
  background-image: url("images/viewType/go.gif");
  width: 33px;
}

*.sun-next,
*.sun-next a {
  background-image: url("images/viewType/arrowRight.gif");
  width: 25px;
}

*.sun-prev,
*.sun-prev a {
  background-image: url("images/viewType/arrowLeft.gif");
  width: 25px;
}

/* View Menu */

ul.sun-viewMenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.sun-viewMenu li {
  float: right;
  width: 90px;
}

ul.sun-viewMenu a {
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;

  padding: 28px 0 0 0;
  height: 0px;
}

a.sun-viewYear {
  background-image: url("images/viewType/year.gif");
}

a.sun-viewList {
  background-image: url("images/viewType/list.gif");
}

a.sun-viewWeek {
  background-image: url("images/viewType/week.gif");
}

a.sun-viewMonth {
  background-image: url("images/viewType/month.gif");
}