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