8. Customizing Styles

NlsCalendar style is defined in separated stylesheet (css) file. Almost any part of the calendar is customizable. Below are list of selector and its description.

NlsCalendar

ScreenshotSelectorDescription
- .nlscal NlsCalendar style.
.nlscalshield A protection layer/shield to disable functions of calendar. Use with AJAX function only.

ScreenshotSelectorDescription
Header style .nlscalheader Specifies style of calendar header including area of navigation bar (month/year/today buttons).
.nlscaltitle Specifies style of calendar title.
.nlscaltopseldate Specifies style of selected date (top left).
.nlscalnav Specifies style of navigation bar.
.nlscalnavbtn,
.nlscalnavbtn_over,
.nlscalnavbtn_dis
Specifies style of navigation button (year, month, today). Suffix _over means style when mouse hover the button, and _dis for disable.

ScreenshotSelectorDescription
Day of week style .nlscalday Specifies style of day of week.
Date cell style .nlscaldate Specifies style of normal date cell
.nlscaldate_disabled Specifies style of disabled date cell
.nlscaldate_over Specifies style of hover date cell
.nlscaldate_sel Specifies style of selected date cell
special day style .nlscaldate_special Specifies style of special date cell
.nlscaldate_special_disabled Specifies style of disabled special date cell
disabled date style .nlscaldate_weekend Specifies style of weekend date cell
.nlscaldate_weekend_disabled Specifies style of disabled weekend date cell

ScreenshotSelectorDescription
Date content style .nlscaldate_normal Specifies style of date content. Use this to specify alignment, font-size etc.
.nlscaldate_event Specifies style of date with special event.
.nlscaldate_today Specifies style of current date (today).
a.nlscaldate_event_link Specifies style of date with special event (type:link). You can use css hierarchy selector to specify link style for selected special event link, disabled special event link:
  • .nlscaldate_sel a.nlscaldate_event_link{}
  • .nlscaldate_disabled a.nlscaldate_event_link{}
  • .nlscaldate_weekend_disabled a.nlscaldate_event_link{}

ScreenshotSelectorDescription
calendar footer style .nlscalfooter Specifies style of calendar footer. Calendar footer contains Close and Select button and status bar.
.nlscalstatus Specifies style of calendar status bar.
.nlscalsysbtn Specifies style of Close and Select button.
.nlscalsysbtn_over Specifies Close and Select button hover style.

ScreenshotSelectorDescription
time selector style .nlscaltime Specifies style of time selector panel.
.nlscalud Specifies style of hour/minute updown button.
.nlscalud_over Specifies hour/minute updown button hover style.
.nlscaltime_inp Specifies style hour/minute input box.

ScreenshotSelectorDescription
month selector style

year selector style
.nlsmydd_norm Specifies style of month/year in month/year dropdown.
.nlsmydd_over Specifies style of hover month/year in month/year dropdown.
.nlsmydd_sel Specifies style of selected month/year in month/year drop down.
go to year style .nlsydd_inp Specifies style of 'Go to year' input box.
.nlsydd_btn Specifies style of 'Go' button.
.nlsmydd_go Specifies style of "Go to year" text.