Customization

Setting variables

To customize the calendar import the default Sass variables, set your variables and then import the rest of the styles.
Check all the available variables below

//  Import the default variables
@import "~v-calendar-scheduler/scss/variables";

//  Set your variables
$v-cal-event-bg: salmon; //  Event background color
$v-cal-event-border-radius: 10px; //  Events border radius (all 4 corners)

//  Import the rest
@import "~v-calendar-scheduler/scss/main";

Result:

Before	After

Available variables

Basic

Variable	Description	Default
`$v-cal-font-color`	Sets the text color for the `Title`, month days, and week and day times.	`#4D4F5C`
`$v-cal-title-font-size`	Sets the `Title` font size.	`18px`
`$v-cal-body-bg`	Sets the background color for the calendar body (Including the buttons at the top.	`$white`
`$v-cal-body-shadow`	Sets the box shadow for the calendar body (Including the buttons at the top.	`0 2px 6px rgba(0,0,0,.04)`
`$v-cal-content-border-color`	Sets the border of the calendar main section. Applies to all views.	`#EAF0F4`

Calendar head

Variable	Description	Default
`$v-cal-days-head-bg`	Sets the background of the calendar head, where the days are shown.	`#F5F6FA`
`$v-cal-days-head-border-color`	Sets the border color of the calendar head, bottom border only.	`#EAF0F4`
`$v-cal-days-head-color`	Sets the text color of the calendar head (days names).	`#A3A6B4`
`$v-cal-days-head-font-size`	Sets the font size of the calendar head (days names).	`.75rem`
`$v-cal-days-head-font-weight`	Sets the font weight of the calendar head (days names).	`bold`

Days - All views

Variable	Description	Default
`$v-cal-day-bg`	Sets the background color for the days.	`$white`
`$v-cal-day-border-color`	Sets the border color for the days (`month`) and the time blocks (`week`, `day`).	`#EAF0F4`
`$v-cal-day-diff-month-color`	Sets the background color for the days that belong to a month different from the active one.	`rgba(67, 66, 93, .3)`
`$v-cal-day-today-bg`	Sets the background color `today`.	`#F5F6FA`
`$v-cal-day-disabled-bg`	Sets the background color for disabled days when using `min-date` or `max-date`. Learn more.	`#f0f0f0`
`$v-cal-day-disabled-color`	Sets the text color for disabled days when using `min-date` or `max-date`. Learn more.	`#b0b0b0`

Days - Month view only

Variable	Description	Default
`$v-cal-day-number-font-size`	Sets the font size for the dates.	`.75rem`
`$v-cal-day-number-padding`	Sets the padding for the dates. (Just the numbers)	`10px`
`$v-cal-day-month-height`	Minimum height for the days.	`140px`
`$v-cal-day-month-hover-bg`	Day background color on `hover`.	`#fcfcfc`

Times - Week and day views only

Variable	Description	Default
`$v-cal-time-block-bg`	'Time block' background color.	`transparent`
`$v-cal-time-block-hover-bg`	'Time block' background color on `hover`.	`#fcfcfc`

Times column - Week and day views only

Variable	Description	Default
`$v-cal-times-bg`	Times column background color.	`$white`
`$v-cal-times-font-size`	Times column font size.	`.8125rem`
`$v-cal-times-border-color`	Times column border color.	`#EAF0F4`

Events

Variable	Description	Default
`$v-cal-event-bg`	Event background color.	`#3B86FF`
`$v-cal-event-color`	Event text color.	`$white`
`$v-cal-event-border-radius`	Events border radius (all 4 corners).	`4px`

Time Marker

Variable	Description	Default
`$v-cal-time-marker-color`	Time marker color (`week` and `day` views).	`#3B86FF`

Buttons

Variable	Description	Default
`$v-cal-button-bg`	Buttons background color.	`$white`
`$v-cal-button-shadow`	Buttons shadow.	`0 2px 3px rgba(0,0,0,.05)`
`$v-cal-button-padding`	Buttons padding.	`8px 18px`
`$v-cal-button-border-color`	Buttons border color.	`#D7DAE2`
`$v-cal-button-border-radius`	Buttons border radius.	`4px`
`$v-cal-button-active-bg`	Button `is-active` background color.	`$white`
`$v-cal-button-active-color`	Button `is-active` text color.	`#3B86FF`
`$v-cal-button-hover-bg`	Button `hover` background color.	`#fcfcfc`
`$v-cal-button-hover-color`	Button `hover` text color.	`#3B86FF`
`$v-cal-button-disabled-bg`	Button `:disabled` background color.	`#f0f0f0`
`$v-cal-button-disabled-color`	Button `:disabled` text color.	`#d0d0d0`
`$v-cal-button-disabled-cursor`	Button `:disabled` cursor.	`not-allowed`

Dialog

Variable	Description	Default
`$v-cal-dialog-bg`	Dialog background (overlay).	`rgba(0,0,0,.3)`
`$v-cal-dialog-card-bg`	Dialog card background color.	`$white`
`$v-cal-dialog-card-max-width`	Dialog card maximum width.	`500px`
`$v-cal-dialog-shadow`	Dialog card shadow.	`0 0 6px rgba(0,0,0,.4)`
`$v-cal-dialog-header-padding`	Dialog header padding.	`20px`
`$v-cal-dialog-header-border-color`	Dialog header border-color (bottom only).	`#EAF0F4`
`$v-cal-dialog-title-font-size`	Dialog title font size.	`13px`
`$v-cal-dialog-close-width`	Dialog close button width.	`18px`
`$v-cal-dialog-close-color`	Dialog close button color.	`#BCBCCB`
`$v-cal-dialog-body-padding`	Dialog body padding.	`20px`
`$v-cal-field-border-radius`	Dialog field border radius.	`4px`
`$v-cal-field-padding`	Dialog field padding.	`10px 12px`
`$v-cal-field-idle-border-color`	Dialog idle field border color.	`#E8E9EC`
`$v-cal-field-hover-border-color`	Dialog `:hover` field border color.	`#808495`
`$v-cal-field-active-border-color`	Dialog `:active`, `:focus` field border color.	`#3B86FF`
`$v-cal-dialog-footer-padding`	Dialog footer padding.	`20px`
`$v-cal-dialog-footer-border-color`	Dialog footer border color (top only).	`#EAF0F4`

# Customization

# Setting variables

# Result:

# Available variables

# Basic

# Calendar head

# Days - All views

# Days - Month view only

# Times - Week and day views only

# Times column - Week and day views only

# Events

# Time Marker

# Buttons

# Dialog

Customization

Setting variables

Result:

Available variables

Basic

Calendar head

Days - All views

Days - Month view only

Times - Week and day views only

Times column - Week and day views only

Events

Time Marker

Buttons

Dialog