Gnosis Knowledge Base


Support
Knowledgebase Articles
   Knowledge Base Search
Product Support Resources


Article : Designing the Gnosis Calendar

Summary: This is a technical article for Web Design Professionals.  It describes the stylization options for design customization of the Gnosis online Event Calendar.
Applies to: Gnosis Web Portal - All Versions
Details:

Designing the Gnosis Calendar

This is a technical article for Web Design Professionals. It describes the stylization options for design customization of the Gnosis online Event Calendar Control.  The calendar may be styled to match the existing site using a variety of styling options.  All of these are listed below with some accompanying explanation.

Modifying The Calendar Control File

The actual calendar control that contains the HTML markup code for the calendar is located on your Gnosis Portal Web site at Connect4\Plugins\EventMgmt\Controls\EventCalendar.ascx  If you wish to modify this file, you should copy it to \Site\Controls\EventCalendar.ascx and modify the copy there as the original file periodically gets overwritten with updates to the Gnosis portal. 

Finally, once the file has been copied, you will need to modify a line in the site's web.config file - located in the top(root) directory of the site - to tell the system that it should obtain the HTML for the calendar control from the new location.  Modify the green text in the following line of code in the web.config file to redirect it to use the new copy of the calendar control HTML:

<add src="~/Connect4/Plugins/EventMgmt/Controls/EventCalendar.ascx" tagName="EventCalendar" tagPrefix="gnosis" />

Once modified, the line should read:

<add src="~/Connect4/Site/Controls/EventCalendar.ascx" tagName="EventCalendar" tagPrefix="gnosis" />

Please Note:  Modifying the web.config file briefly stops the website and logs off any users currently using the Gnosis system.  You should always check with a Gnosis administrator on staff before modifying this file.

Once this step is complete, you are ready to modify the calendar control file and any style definitions in the style sheet meeded to specify a new design.
 

Calendar Styling Modes

The calendar may be styles using two approaches.  The first is "Properties Mode" and involves the setting of properties in the actual calendar tag in order to style the calendar components. The second approach adds a "CSS Styling Mode" and involves a combination of using the first approach with standard CSS Styling using externally defined CSS Styles.

To turn on the CSS styling option, add the following attribute to the "EventCalendar", "VolunteerEventCalendar" or "EventCalendarControl" tag:  UseCustomStyles="true"
 

Properties Mode

Style Properties

The following Style Names represent the nine styles that can be modified to control the look-and-feel of a calendar:

  • DayHeaderStyle
  • DayStyle
  • NextPrevStyle
  • OtherMonthDayStyle
  • SelectedDayStyle
  • SelectorStyle
  • TitleStyle
  • TodayDayStyle
  • WeekendDayStyle

Each of these nine styles have the following sub-properties available to be set (described in the "Appearance Properties" section below):

  • BackColor
  • BorderColor
  • BorderWidth
  • CssClass
  • Font
  • Bold
  • Italic
  • Names
  • Overline
  • Size
  • Strikeout
  • Underline
  • ForeColor
  • Height
  • HorizontalAlign
  • VerticalAlign
  • Width
  • Wrap

Appearance Properties

  • BackColor—can be set to any decimal or hexadecimal color code. It controls the color of the area beginning just beneath the month and year to the bottom of the control.
  • BorderColor—accepts the same values as BackColor. It controls the color of the border around the entire control.
  • BorderStyle—can be set to one of the following values: NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, or Outset.
  • BorderWidth—width of the border around the calendar control, generally measured in pixels (e.g., “5px”)
  • CssClass—when set to the name of a class in a linked CSS file, it applies the attributes of the class to the entire Calendar control. It can serve as a shortcut that sets multiple properties all at once.
  • DayNameFormat—can be set to one of the following values:
  • Full—displays the full name of the day above the days of each month
  • Short—displays the 3-letter abbreviation of each day above the days of each month
  • FirstLetter—displays the first letter of each day above the days of each month
  • FirstTwoLetters—displays the 2-letter abbreviation of each day about the days of each month
  • FirstDayOfWeek—can be set to any of the days of the week. This determines which day appears first in the calendar. By default, the first day is Sunday
  • Font-Bold—accepts True or False; determines whether the text in the control appears bold
  • Font-Italic—accepts True or False; determines whether the text in the control appears bold
  • Font-Names—accepts a comma-delimited list of fonts to display the text of the control in
  • Font-Overline– accepts True or False; determines whether the text in the control appears with a line over it
  • Font-Size—size of the text used within the control, generally measured in points (e.g., “12pt”)
  • Font-Strikeout– accepts True or False; determines whether the text in the control appears with a line through it
  • Font-Underline– accepts True or False; determines whether the text in the control appears with a line under it
  • ForeColor—accepts the same values as BackColor. It controls the color of the text within the control.
  • NextMonthText—text for the “next month” button of the control. By default, the value is > (“>”)
  • NextPrevFormat—format for month navigation buttons.
  • CustomText–the format of the month navigation buttons will match the values of NextMonthText and PrevMonthText.
  • ShortMonth–the 3-letter abbreviation of the previous month and next month will appear as month navigation buttons
  • FullMonth—the full name of the previous month and next month will appear as month navigation buttons
  • PrevMonthText—text for the “previous month” button of the control. By default, the value is < (“< ”)
  • ShowDayHeader—accepts True or False; determines whether the days of the week appear in the control
  • ShowGridLines—accepts True or False; determines whether the calendar elements are displayed in a grid
  • ShowNextPrevMonth—accepts True or False; determines whether the month navigation buttons display in the control. This will normally be True.
  • ShowTitle—accepts True or False; determines whether the month, year, and month navigation buttons display in the control. This will normally be True.
  • TitleFormat—accepts Month or MonthYear; determines whether just the month, or the month and year display in the calendar title

Layout Properties

The Layout category contains just four properties: CellPadding, CellSpacing, Height, & Width.

  • Height, Width—sets dimensions of the calendar control. An alternative to setting these properties individually is to set height and width in a CSS class and set the value of the appearance property CssClass to that class name.
  • CellPadding—sets the amount of space between the edge of the table cell and its contents
  • CellSpacing—sets the amount of space between table cells in the control

CSS Styling Mode

CSS Styles

The following CSS Styles are available to stylize the calendar.  They are listed here with one of the default color schemes implemented - "Canary".

<style type=text/css>
.EVIAlreadyReg {
    border-style: dotted;
    border-color: #050505;
    border-width: 1px;
    color: #fa6d0f;
}
.calDayStyle {
    border-color: #000066;
    width: 14%;
    vertical-align: top;
    text-align: left;
    font-size: 7.5pt;
    font-weight: normal;
    height: 40px;
    color: #050005;
    line-height: 1.4em;
    padding-left:3px;
}
.calOtherMonthDayStyle {
    color: #999999;
    border-color: #000066;
    font-size: Smaller;
    height: 40px;
    width: 14%;
}
.calSelectedDayStyle {
}
 
.calSelectorStyle {
}
 
.calTodayDayStyle {
    background-color: #CCCCCC;
    border-color: #000066;
    font-size: Smaller;
    height: 40px;
    width: 14%;
}
.calNextPrevStyle {
    font-size: 12pt;
    font-weight: bold;
    width: 15%;
    color: #0808f7;
    height: 20px;
}
.calDayHeaderStyle {
    background-color: #faef23;
    border-width: 1px;
    border-style: solid;
    font-size: 8pt;
    font-weight: bold;
    height: 20px;
}
.calTitleStyle {
    background-color: #fff9d4;
    border-color: Black;
    border-width: 1px;
    border-style: solid;
    font-size: 18pt;
    color: DarkBlue;
    height: 100%;
    font-weight: bold;
}
.calNextPrevStylea {
    color: DarkBlue;
    font-size: 15pt;
}
.calElemOverEven {
    background-color: #f5fa6c;
    cursor: hand;
}
.calElemOverOdd {
    background-color: #f5fa6c;
    cursor: hand;
}
.calElemOutEven {
    background-color: #ffffff;
}
.calElemOutOdd {
    background-color: #f5f7e4;
}
.calElemEvenIneligible {
}
.calElemOutEvenIneligible {
    color: #aba373;
    background-color: #ffffff;
}
.calElemOutOddIneligible {
    color: #aba373;
    background-color: #f5f7e4;
}
#ckEviSel {
    margin-right: 5px;
    margin-left: 1px;
}
.calElemEFMBelowMin {
    border-color: #eb1a24;
    border-style: solid;
    border-left-width: 4px;
    border-bottom-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    margin-left: -2px;
    margin-right: -2px;
}
.calElemEFMBelowMax {
    border-color: goldenrod;
    border-style: solid;
    border-left-width: 4px;
    border-bottom-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    margin-left: -2px;
    margin-right: -2px;
}
 
.calElemEFMFull {
    border-color: green;
    border-style: solid;
    border-left-width: 4px;
    border-bottom-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    margin-left: -2px;
    margin-right: -2px;
}
</style>






See also: Reproduced from Scott's Blog
Additional references on design with the Calendar Control are at w3Schools.com

© Copyright 2009-2011, Connect4 — All Rights Reserved.
Gnosis & Gnosis for Nonprofits are Trademarks of Connect4,
a business unit of The Dharma Group, LLC — California, USA.

A Gnosis for Non-Profits web site