--- layout: default route: customization title: Customization variables: - name: $calendar-border value: .1rem solid $white-ter - name: $calendar-border-radius value: $radius-small - name: $calendar-header-background-color value: $primary - name: $calendar-days-background-color value: transparent - name: $calendar-header-days-color value: $grey-light - name: $calendar-date-color value: $text - name: $calendar-date-hover-background-color value: $white - name: $calendar-date-hover-border value: .1rem solid $primary - name: $calendar-today-background value: transparent - name: $calendar-today-border value: .1rem dotted $primary - name: $calendar-today-color value: $primary - name: $calendar-range-background-color value: $primary - name: $calendar-body-padding value: 0 - name: $calendar-header-padding value: .3rem 0 - name: $calendar-header-nav-padding value: .5em - name: $calendar-date-padding value: .1rem 0 --- Prerequisites

To customize the template you must have node, npm and Gulp installed in your computer.

You are now ready to customize the component.
Compilation

We have created a Gulp configuration file (guplfile.js) which integrates many task to automate the compilation.

We have also developed a Gulp plugin to automatically copy used dependencies from node_modules into the template and replace all include paths related to them.

Sass customization

The component provides SASS file which can be imported into your SASS project. To ease the customization the component use following variables that can be override:

{% include variables.html %}