React

by rew222

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.0.0-alpha0/date_fns.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-infinite-calendar.min.js"></script>
<script>

/*!
 * react-infinite-calendar v2.3.1 - https://github.com/clauderic/react-infinite-calendar
 * MIT Licensed
 */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.InfiniteCalendar=t(require("react"),require("react-dom")):e.InfiniteCalendar=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=87)}([function(e,t,n){function r(e,t){if(c(e))return new Date(e.getTime());if("string"!=typeof e)return new Date(e);t=t||{};var n=t.additionalDigits;null==n&&(n=d);var r=o(e),u=a(r.date,n),f=u.year,h=u.restDateString,y=i(h,f);if(y){var m,_=y.getTime(),v=0;return r.time&&(v=s(r.time)),r.timezone?m=l(r.timezone):(m=new Date(_+v).getTimezoneOffset(),m=new Date(_+v+m*p).getTimezoneOffset()),new Date(_+v+m*p)}return new Date(e)}function o(e){var t,n={},r=e.split(h);if(y.test(r[0])?(n.date=null,t=r[0]):(n.date=r[0],t=r[1]),t){var o=x.exec(t);o?(n.time=t.replace(o[1],""),n.timezone=o[1]):n.time=t}return n}function a(e,t){var n,r=_[t],o=g[t];if(n=v.exec(e)||o.exec(e)){var a=n[1];return{year:parseInt(a,10),restDateString:e.slice(a.length)}}if(n=m.exec(e)||r.exec(e)){var...

CSS

.Cal__Day__root {
  display: inline-block;
  box-sizing: border-box;
  width: 14.28571%;
  list-style: none;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none; }
  .Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted, .Cal__Day__root.Cal__Day__enabled:active, .Cal__Day__root.Cal__Day__enabled:hover {
    position: relative;
    z-index: 1; }
    .Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before, .Cal__Day__root.Cal__Day__enabled:active:before, .Cal__Day__root.Cal__Day__enabled:hover:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 52px;
      height: 52px;
      margin-top: -26px;
      margin-left: -26px;
      border-radius: 50%;
      background-color: #EFEFEF;
      z-index: -1; }
  .Cal__Day__root.Cal__Day__enabled:hover:before {
    opacity: 0.5; }
  .Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before, .Cal__Day__root.Cal__Day__enabled:active:before {
    opacity: 1; }
  .Cal__Day__root:first-child {
    position: relative; }
  .Cal__Day__root.Cal__Day__today {
    position: relative;
    z-index: 2; }
    .Cal__Day__root.Cal__Day__today > span {
      color: #3d3d3d; }
    .Cal__Day__root.Cal__Day__today.Cal__Day__disabled > span {
      color: #AAA; }
    .Cal__Day__root.Cal__Day__today:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 52px;
      height: 52px;
      margin-top: -26px;
      margin-left: -26px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px;
      z-index: -1; }
    .Cal__Day__root.Cal__Day__today.Cal__Day__disabled:before {
      box-shadow: inset 0 0 0 1px #BBB; }
  .Cal__Day__root.Cal__Day__selected {
    position: relative; }
    .Cal__Day__root.Cal__Day__selected > .Cal__Day__month, .Cal__Day__root.Cal__Day__selected > .Cal__Day__year {
      display: none; }
    .Cal__Day__root.Cal__Day__selected:before {
      display: none; }
   ...

React

import React from 'react';
import {render} from 'react-dom';
import InfiniteCalendar, {
  Calendar,
  withRange,
} from 'react-infinite-calendar';

const CalendarWithRange = withRange(Calendar);

render(
  <InfiniteCalendar
    Component={CalendarWithRange}
    selected={{
      start: new Date(2019, 1, 10),
      end: new Date(2019, 1, 18),
    }}
    locale={{
      headerFormat: 'MMM Do',
    }}
  />,
  document.querySelector('#root')
);