Calendar theme
NbCalendarComponent
| Name | Theme Variable | Default Value | Description |
| calendar-width | 20.625rem | ||
| calendar-background-color | background-basic-color-1 | #ffffff | |
| calendar-border-color | border-basic-color-4 | #e4e9f2 | |
| calendar-border-style | solid | ||
| calendar-border-width | 0.0625rem | ||
| calendar-border-radius | border-radius | 0.25rem | |
| calendar-text-color | text-basic-color | #222b45 | |
| calendar-text-font-family | text-subtitle-font-family | Open Sans, sans-serif | |
| calendar-text-font-size | text-subtitle-font-size | 0.9375rem | |
| calendar-text-font-weight | text-subtitle-font-weight | 600 | |
| calendar-text-line-height | text-subtitle-line-height | 1.5rem | |
| calendar-picker-padding-top | 0.25rem | ||
| calendar-picker-padding-bottom | 0.625rem | ||
| calendar-picker-padding-start | 0.625rem | ||
| calendar-picker-padding-end | 0.625rem | ||
| calendar-navigation-text-color | text-basic-color | #222b45 | |
| calendar-navigation-text-font-family | text-button-font-family | Open Sans, sans-serif | |
| calendar-navigation-title-text-font-size | text-button-medium-font-size | 0.875rem | |
| calendar-navigation-title-text-font-weight | text-button-font-weight | 700 | |
| calendar-navigation-title-text-line-height | text-button-medium-line-height | 1rem | |
| calendar-navigation-padding | 0.625rem, 0.25rem | ||
| calendar-cell-inactive-text-color | text-hint-color | #8f9bb3 | |
| calendar-cell-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| calendar-cell-hover-background-color | background-basic-color-2 | #f7f9fc | |
| calendar-cell-hover-border-color | background-basic-color-2 | #f7f9fc | |
| calendar-cell-hover-text-color | text-basic-color | #222b45 | |
| calendar-cell-hover-text-font-size | calendar-text-font-size | 0.9375rem | |
| calendar-cell-hover-text-font-weight | calendar-text-font-weight | 600 | |
| calendar-cell-hover-text-line-height | calendar-text-line-height | 1.5rem | |
| calendar-cell-active-background-color | color-primary-active | #274bdb | |
| calendar-cell-active-border-color | color-primary-active-border | #274bdb | |
| calendar-cell-active-text-color | text-control-color | #ffffff | |
| calendar-cell-active-text-font-size | calendar-text-font-size | 0.9375rem | |
| calendar-cell-active-text-font-weight | calendar-text-font-weight | 600 | |
| calendar-cell-active-text-line-height | calendar-text-line-height | 1.5rem | |
| calendar-cell-today-background-color | color-primary-transparent-default | rgba(51, 102, 255, 0.08) | |
| calendar-cell-today-border-color | color-primary-transparent-default-border | #3366ff | |
| calendar-cell-today-text-color | text-basic-color | #222b45 | |
| calendar-cell-today-text-font-size | calendar-text-font-size | 0.9375rem | |
| calendar-cell-today-text-font-weight | calendar-text-font-weight | 600 | |
| calendar-cell-today-text-line-height | calendar-text-line-height | 1.5rem | |
| calendar-cell-today-hover-background-color | color-primary-transparent-hover | rgba(51, 102, 255, 0.16) | |
| calendar-cell-today-hover-border-color | color-primary-transparent-hover-border | #3366ff | |
| calendar-cell-today-active-background-color | color-primary-transparent-active | rgba(51, 102, 255, 0.24) | |
| calendar-cell-today-active-border-color | color-primary-transparent-active-border | #3366ff | |
| calendar-cell-today-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| calendar-cell-today-selected-background-color | color-control-transparent-default | rgba(255, 255, 255, 0.08) | |
| calendar-cell-today-selected-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-today-selected-text-color | text-control-color | #ffffff | |
| calendar-cell-today-selected-hover-background-color | color-control-transparent-hover | rgba(255, 255, 255, 0.16) | |
| calendar-cell-today-selected-hover-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-today-selected-active-background-color | color-control-transparent-active | rgba(255, 255, 255, 0.24) | |
| calendar-cell-today-selected-active-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-today-in-range-background-color | color-control-transparent-default | rgba(255, 255, 255, 0.08) | |
| calendar-cell-today-in-range-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-today-in-range-text-color | text-control-color | #ffffff | |
| calendar-cell-today-in-range-hover-background-color | color-control-transparent-hover | rgba(255, 255, 255, 0.16) | |
| calendar-cell-today-in-range-hover-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-today-in-range-active-background-color | color-control-transparent-active | rgba(255, 255, 255, 0.24) | |
| calendar-cell-today-in-range-active-border-color | rgba(0, 0, 0, 0) | ||
| calendar-cell-selected-background-color | color-primary-default | #3366ff | |
| calendar-cell-selected-border-color | color-primary-default-border | #3366ff | |
| calendar-cell-selected-text-color | text-control-color | #ffffff | |
| calendar-cell-selected-text-font-size | calendar-text-font-size | 0.9375rem | |
| calendar-cell-selected-text-font-weight | calendar-text-font-weight | 600 | |
| calendar-cell-selected-text-line-height | calendar-text-line-height | 1.5rem | |
| calendar-cell-selected-hover-background-color | color-primary-hover | #598bff | |
| calendar-cell-selected-hover-border-color | color-primary-hover-border | #598bff | |
| calendar-cell-selected-active-background-color | color-primary-active | #274bdb | |
| calendar-cell-selected-active-border-color | color-primary-active-border | #274bdb | |
| calendar-day-cell-width | 2.75rem | ||
| calendar-day-cell-height | 2.75rem | ||
| calendar-month-cell-width | 4.8125rem | ||
| calendar-month-cell-height | calendar-day-cell-height | 2.75rem | |
| calendar-year-cell-width | calendar-month-cell-width | 4.8125rem | |
| calendar-year-cell-height | calendar-month-cell-height | 2.75rem | |
| calendar-weekday-background | rgba(0, 0, 0, 0) | ||
| calendar-weekday-divider-color | divider-color | #edf1f7 | |
| calendar-weekday-divider-width | divider-width | 1px | |
| calendar-weekday-text-color | text-hint-color | #8f9bb3 | |
| calendar-weekday-text-font-size | text-subtitle-font-size | 0.9375rem | |
| calendar-weekday-text-font-weight | text-subtitle-font-weight | 600 | |
| calendar-weekday-text-line-height | text-subtitle-line-height | 1.5rem | |
| calendar-weekday-holiday-text-color | calendar-weekday-text-color | #8f9bb3 | |
| calendar-weekday-height | calendar-day-cell-height | 2.75rem | |
| calendar-weekday-width | calendar-day-cell-width | 2.75rem | |
| calendar-weeknumber-background | rgba(0, 0, 0, 0) | ||
| calendar-weeknumber-divider-color | divider-color | #edf1f7 | |
| calendar-weeknumber-divider-width | divider-width | 1px | |
| calendar-weeknumber-text-color | text-hint-color | #8f9bb3 | |
| calendar-weeknumber-text-font-size | text-subtitle-font-size | 0.9375rem | |
| calendar-weeknumber-text-font-weight | text-subtitle-font-weight | 600 | |
| calendar-weeknumber-text-line-height | text-subtitle-line-height | 1.5rem | |
| calendar-weeknumber-height | calendar-weekday-height | 2.75rem | |
| calendar-weeknumber-width | calendar-weekday-width | 2.75rem | |
| calendar-large-width | 22.375rem | ||
| calendar-day-cell-large-width | 3rem | ||
| calendar-day-cell-large-height | 3rem | ||
| calendar-weekday-large-height | calendar-day-cell-large-width | 3rem | |
| calendar-weekday-large-width | calendar-day-cell-large-height | 3rem | |
| calendar-weeknumber-large-height | calendar-weekday-large-height | 3rem | |
| calendar-weeknumber-large-width | calendar-weekday-large-width | 3rem | |
| calendar-month-cell-large-width | 5.25rem | ||
| calendar-month-cell-large-height | calendar-day-cell-large-height | 3rem | |
| calendar-year-cell-large-width | calendar-month-cell-large-width | 5.25rem | |
| calendar-year-cell-large-height | calendar-month-cell-large-height | 3rem |
Previous page
Calendar Range
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.