priyanjitdey94/fc-calendar

Light weight calendar component

fc-calendar

A lightweight calendar component for FusionCharts.

Installation

Steps to use fc-calendar

1. Clone the repository.

   git clone https://github.com/fusioncharts/fc-calendar.git
   cd fc-calendar
   

2. Checkout to master branch

   git checkout master
   

3. Install dependencies

   npm install
   

4. Create a build

   npm run build
   

5. Use the build files from dist folder.

Usage

fc-calendar can be imported directly from the build files and then can be instantiated.

import Calendar from 'dist/fc-calendar';

var calendar = new Calendar({
    // configurations. see next section
});

Configurations

fc-calendar takes different configurations to allow users to modify/customize the calendar to their needs.

1. selectedDate: An object containing year, month and day depicting the current date. Months are 1-indexed.

   selectedDate: {
       day: 18,
       month: 1,
       year: 2019
   }
   

2. rangeStart: Denotes a starting date. All the dates before this date will be disabled.

   rangeStart: {
       day: 1,
       month: 1,
       year: 2017
   }
   

3. rangeEnd: Denotes a ending date. All the dates after this date will be disabled.

   rangeEnd: {
       day: 31,
       month: 12,
       year: 2020
   }
   

4. weekLabel: An array containing 7 strings which are shown as days of week.

   // show only initial character
   weekLabel: ['S', 'M', 'T', 'W', 'T', 'F', 'S',]
   
   // show first three characters
   weekLabel: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
   

5. events: Users have the option to listen to date change, month change and year change. The events property takes an object containing some or all of the following property.
   • onDateChange
   • onMonthChange
   • onYearChange

   events: {
       onDateChange: function (date) {
           // do something. date in parameter is the new date
       },
       onMonthChange: function (date) {
           // do something.
       },
       onYearChange: function (date) {
           // do something.
       },
   }
   

6. container: The parent container in which the calendar will be appended in DOM. It takes HTML div element only.

   container: <div></div>
   

7. posX: The x-coordinate of the top-left corner of calendar inside the container div.
8. posY: The y-coordinate of the top-left corner of calendar inside the container div.

License

MIT

Copyright (c) 2016 FusionCharts Technologies <support@fusioncharts.com>.