react-monthly-events-calendar/dist/components/calendar/index.js

Simple month view calendar that shows events on it

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _dateFns = require("date-fns");

var _dateFns2 = _interopRequireDefault(_dateFns);

var _event = require("../event");

var _event2 = _interopRequireDefault(_event);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(function () {
  var enterModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).enterModule;
  enterModule && enterModule(module);
})();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

var Calendar = function (_React$Component) {
  _inherits(Calendar, _React$Component);

  function Calendar() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Calendar);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      currentMonth: null,
      selectedDate: null
    }, _this.renderHeader = function () {
      var dateFormat = "MMMM YYYY";

      return _react2.default.createElement(
        "div",
        { className: "header row flex-middle" },
        _react2.default.createElement(
          "div",
          { className: "col col-start" },
          _react2.default.createElement(
            "div",
            { className: "icon", onClick: _this.prevMonth },
            "chevron_left"
          )
        ),
        _react2.default.createElement(
          "div",
          { className: "col col-center" },
          _react2.default.createElement(
            "span",
            null,
            _dateFns2.default.format(_this.state.currentMonth, dateFormat)
          )
        ),
        _react2.default.createElement(
          "div",
          { className: "col col-end" },
          _react2.default.createElement(
            "div",
            { className: "icon", onClick: _this.nextMonth },
            "chevron_right"
          )
        )
      );
    }, _this.renderDays = function () {
      var dateFormat = "dddd";
      var days = [];

      var startDate = _dateFns2.default.startOfWeek(_this.state.currentMonth);

      for (var i = 0; i < 7; i++) {
        days.push(_react2.default.createElement(
          "div",
          { className: "col col-center", key: i },
          _dateFns2.default.format(_dateFns2.default.addDays(startDate, i), dateFormat)
        ));
      }

      return _react2.default.createElement(
        "div",
        { className: "days row" },
        days
      );
    }, _this.renderCells = function (filteredEvents) {
      var _this$state = _this.state,
          currentMonth = _this$state.currentMonth,
          selectedDate = _this$state.selectedDate;

      var monthStart = _dateFns2.default.startOfMonth(currentMonth); // Gets month's first day
      var monthEnd = _dateFns2.default.endOfMonth(monthStart); // Gets month's last day
      var startDate = _dateFns2.default.startOfWeek(monthStart); // Gets the month's first week's first day
      var endDate = _dateFns2.default.endOfWeek(monthEnd); // Gets the month's first week's last day

      var dateFormat = "D";
      var rows = [];

      var days = [];
      var day = startDate;
      var formattedDate = "";

      while (day <= endDate) {
        var _loop = function _loop(i) {
          formattedDate = _dateFns2.default.format(day, dateFormat);
          var cloneDay = day;
          var cellAdditionalClass = !_dateFns2.default.isSameMonth(day, monthStart) ? "disabled" : _dateFns2.default.isSameDay(day, selectedDate) ? "selected" : "";

          var eventComponents = _this.props.events.map(function (e, i) {
            return _dateFns2.default.isEqual(_dateFns2.default.format(cloneDay, 'DDMMYYYY'), _dateFns2.default.format(e.date, 'DDMMYYYY')) ? _react2.default.createElement(_event2.default, {
              key: i,
              title: e.title,
              date: e.date,
              onClick: e.onClick,
              className: e.className,
              style: e.style
            }) : null;
          });

          days.push(_react2.default.createElement(
            "div",
            { className: "col cell-wrapper", key: day },
            _react2.default.createElement(
              "div",
              {
                className: "cell " + cellAdditionalClass,
                onClick: function onClick() {
                  return _this.onDateClick(_dateFns2.default.parse(cloneDay));
                }
              },
              _react2.default.createElement(
                "span",
                { className: "number" },
                formattedDate
              ),
              _react2.default.createElement(
                "span",
                { className: "bg" },
                formattedDate
              ),
              _react2.default.createElement(
                "div",
                { className: "events" },
                eventComponents
              )
            )
          ));
          day = _dateFns2.default.addDays(day, 1);
        };

        for (var i = 0; i < 7; i++) {
          _loop(i);
        }
        rows.push(_react2.default.createElement(
          "div",
          { className: "row", key: day },
          days
        ));
        days = [];
      }

      return _react2.default.createElement(
        "div",
        { className: "calendar-body" },
        rows
      );
    }, _this.onDateClick = function (day) {
      _this.setState({
        selectedDate: day
      });
    }, _this.nextMonth = function () {
      _this.setState({
        currentMonth: _dateFns2.default.addMonths(_this.state.currentMonth, 1)
      });
    }, _this.prevMonth = function () {
      _this.setState({
        currentMonth: _dateFns2.default.subMonths(_this.state.currentMonth, 1)
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Calendar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // On mount, if the initialSelectedDate prop is provided and yields a propper Date instance,
      // set that to the state as the selectedDate and currentMonth.
      var initialSelectedDate = this.props.initialSelectedDate;

      var isItNotThere = !initialSelectedDate;
      var newSelectedDate = new Date(initialSelectedDate);

      var dateForState = isItNotThere || newSelectedDate == 'Invalid Date' ? new Date() : newSelectedDate;

      this.setState({
        selectedDate: dateForState,
        currentMonth: dateForState
      });
    }
  }, {
    key: "render",
    value: function render() {
      var currentMonth = this.state.currentMonth;

      // logic to filter the rendered events to this month +/- 7 days worth of events

      var currentMonthMinus7 = _dateFns2.default.subDays(_dateFns2.default.startOfMonth(currentMonth), 7);
      var currentMonthPlus7 = _dateFns2.default.addDays(_dateFns2.default.endOfMonth(currentMonth), 7);
      var filteredEvents = this.props.events.filter(function (event) {
        return new Date(event.date) >= currentMonthMinus7 && new Date(event.date) <= currentMonthPlus7;
      });

      return _react2.default.createElement(
        "div",
        { className: "calendar" },
        this.renderHeader(),
        this.renderDays(),
        this.renderCells(filteredEvents)
      );
    }
  }, {
    key: "__reactstandin__regenerateByEval",
    // @ts-ignore
    value: function __reactstandin__regenerateByEval(key, code) {
      // @ts-ignore
      this[key] = eval(code);
    }
  }]);

  return Calendar;
}(_react2.default.Component);

;

Calendar.defaultProps = {
  events: []
};

var _default = Calendar;
exports.default = _default;
;

(function () {
  var reactHotLoader = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).default;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(Calendar, "Calendar", "src/components/calendar/index.js");
  reactHotLoader.register(_default, "default", "src/components/calendar/index.js");
})();

;

(function () {
  var leaveModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).leaveModule;
  leaveModule && leaveModule(module);
})();