Calendar.jsx

import React from "react";
import dateFns from "date-fns";

class Calendar extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            currentMonth: new Date(),
            selectedDate: new Date()
        };

        this.prevMonth.bind(this);
        this.nextMonth.bind(this);
    }

    renderHeader() {
        const dateFormat = "MMMM";
        const prevMonthLabel = dateFns.subMonths(this.state.currentMonth, 1);
        const nextvMonthLabel = dateFns.addMonths(this.state.currentMonth, 1);

        return (
            <div className="events-calenrad__months row no-gutters justify-content-between align-items-center">
                <div className="col-auto">
                    <div className="events-calenrad__months_prev" onClick={this.prevMonth}>{prevMonthLabel}</div>
                </div>
                <div className="col-auto">
                    <div className="events-calenrad__months_current">{dateFns.format(this.state.currentMonth, dateFormat)}</div>
                </div>
                <div className="col-auto">
                    <div className="events-calenrad__months_next" onClick={this.nextMonth}>{nextvMonthLabel}</div>
                </div>
            </div>
        )
    }

    renderDays() {
        const dateFormat = "dddd";
        const days = [];

        let startDate = dateFns.startOfWeek(this.state.currentMonth);

        for (let i = 0; i < 7; i++) {
            days.push(
                <li key={i}>
                    <span className="d-lg-inline-block d-none">{dateFns.format(dateFns.addDays(startDate, i), dateFormat)}</span>
                    <span className="d-lg-none">Su</span>
                </li>
            );
        }

        return  <ul className="events-calenrad__days clearfix">{days}</ul>
    }

    onDateClick(day) {
        this.setState({
            selectedDate: day
        });
    };

    nextMonth(){
        this.setState({
            currentMonth: dateFns.addMonths(this.state.currentMonth, 1)
        });
    }

    prevMonth(){
        this.setState({
            currentMonth: dateFns.subMonths(this.state.currentMonth, 1)
        });
    }

    render () {
        return(
            <div>
                {this.renderDays()}
                {this.renderHeader()}
            </div>
        )
    }
}

export default Calendar;

gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');

gulp.task("default", function(){
    return browserify({
        extensions: ['.js', '.jsx'],
        entries: './app/index.js',
    })
        .transform(babelify.configure({
            presets: ["es2015", "react"]
        }))
        .bundle()
        .pipe(source('app.min.js'))
        .pipe(gulp.dest('./static/js'));
});


/**
 * Build an output file. Babelify is used to transform 'jsx' code to JavaScript code. 
 **/
gulp.task("build", function(){
    var options = {
        entries: "./app/index.js",   // Entry point
        extensions: [".js", ".jsx"],            // consider files with these extensions as modules 
        debug: argv.production ? false : true,  // add resource map at the end of the file or not
        paths: ["./app/"]           // This allows relative imports in require, with './scripts/' as root
    };

    return browserify(options)
        .transform(babelify.configure({
            presets: ["es2015", "react"]
        }))
        .bundle()
        .pipe(source("app.min.js"))
        .pipe(gulpif(argv.production, buffer()))    // Stream files
        .pipe(gulpif(argv.production, uglify()))
        .pipe(gulp.dest("./static/js"));
});

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Calendar from './components/Calendar';

ReactDOM.render(<Calendar/>, document.getElementById('app'));

package.json

{
  "name": "bikepacking-calendar",
  "version": "1.0.0",
  "description": "- [ ] Search Capability using Filters - [ ] Search Capability using Keywords - [ ] Add pagination on event list - [x] Upcoming event widget on event list - [ ] Event template for different types",
  "main": "app/index.js",
  "scripts": {
    "start": "gulp build --production && hugo && hugo server --disableFastRender",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "repository": {
    "type": "git",
    "url": "git@git.excellenceontime.ca:bikepacking-calendar/hugo.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "date-fns": "^1.29.0",
    "react-scripts": "^1.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "gulp-if": "^1.2.5",
    "gulp-uglify": "^1.4.2",
    "vinyl-buffer": "^1.0.0",
    "yargs": "^3.29.0",
    "babelify": "^8.0.0",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-react": "^3.1.0",
    "gulp-util": "^3.0.8",
    "hugo-bin": "^0.29.0",
    "vinyl-source-stream": "^2.0.0"
  }
}