# Customization

Prerequisites

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

- ###### node and npm

  Installation guide of node can be found here. As npm comes bundled with node, separate installation of npm is not needed.
  If you have installed them, just checkout to the root folder and run the following command.

      npm install

  You can see that a folder `node_modules` is generated in your root folder with all dependencies files!

- ###### Gulp

  To start customization you will need to install Gulp for task automation.
  Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information.

  You need to first install Gulp-cli in your machine using the below command.

      npm install -g gulp-cli

###### 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.

- ###### gulp build:styles

  Compile Sass sources and save them into the dist directory and the demo src directory.

- ###### gulp build:scripts

  Transpile ES6 Javscript sources and save them into the dist directory and the demo src directory.

- ###### gulp build

  Run both of previous commands

- ###### gulp demo

  Run a complete clean and build then compile demo sie with jekyll then launch a local server with watch capability (demo site is now auto updated when you modify source code).

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:

Name | Default value
--- | ---
Name | Default value
`$calendar-border` | `.1rem solid $white-ter`
`$calendar-border-radius` | `$radius-small`
`$calendar-header-background-color` | `$primary`
`$calendar-days-background-color` | `transparent`
`$calendar-header-days-color` | `$grey-light`
`$calendar-date-color` | `$text`
`$calendar-date-hover-background-color` | `$white`
`$calendar-date-hover-border` | `.1rem solid $primary`
`$calendar-today-background` | `transparent`
`$calendar-today-border` | `.1rem dotted $primary`
`$calendar-today-color` | `$primary`
`$calendar-range-background-color` | `$primary`
`$calendar-body-padding` | `0`
`$calendar-header-padding` | `.3rem 0`
`$calendar-header-nav-padding` | `.5em`
`$calendar-date-padding` | `.1rem 0`