skedify-calendar/lib/es/components/Calendar/defaultRenderers.js

Skedify Calendar React component

import React from 'react';
import { format, isSameMonth, isSameYear, getMinutes, getSeconds, isSameDay } from 'date-fns';

import { LocaleContext } from './LocaleContext';
import { Stack } from './Stack';

export var DEFAULT_RENDER_HEADER = function DEFAULT_RENDER_HEADER(_ref) {
  var start = _ref.start,
      end = _ref.end;
  return React.createElement(
    LocaleContext.Consumer,
    null,
    function (locale) {
      return React.createElement(
        'div',
        { className: 'SkedifyCalendar__Header' },
        isSameDay(start, end) ? format(start, 'dd LLLL yyyy') : React.createElement(
          React.Fragment,
          null,
          format(start, isSameYear(start, end) ? isSameMonth(start, end) ? 'dd' : 'dd LLLL' : 'dd LLLL yyyy', { locale: locale }),
          ' - ',
          format(end, 'dd LLLL yyyy', { locale: locale })
        )
      );
    }
  );
};

export var DEFAULT_RENDER_DAY_HEADER = function DEFAULT_RENDER_DAY_HEADER(date) {
  return React.createElement(
    LocaleContext.Consumer,
    null,
    function (locale) {
      return React.createElement(
        'div',
        { className: 'SkedifyCalendar__WeekHeader__Days__Day' },
        format(date, 'iiii dd/LL', { locale: locale })
      );
    }
  );
};

export var DEFAULT_RENDER_EVENT = function DEFAULT_RENDER_EVENT(event) {
  return React.createElement(
    LocaleContext.Consumer,
    null,
    function (locale) {
      return React.createElement(
        'div',
        { className: 'SkedifyCalendar__Event' },
        format(event.start, 'HH:mm', { locale: locale }),
        ' - ',
        format(event.end, 'HH:mm', { locale: locale })
      );
    }
  );
};

export var DEFAULT_RENDER_PLACEHOLDER = DEFAULT_RENDER_EVENT;

export var DEFAULT_RENDER_GUTTER_ITEM = function DEFAULT_RENDER_GUTTER_ITEM(_ref2) {
  var time = _ref2.time,
      sizeOfOneSlot = _ref2.sizeOfOneSlot,
      slotIndex = _ref2.slotIndex;

  var isRoundHour = (getMinutes(time) * 60 + getSeconds(time)) % (60 * 60) === 0;

  return React.createElement(
    LocaleContext.Consumer,
    null,
    function (locale) {
      return React.createElement(
        Stack,
        {
          className: 'SkedifyCalendar__Gutter__Slot__Contents',
          style: {
            lineHeight: sizeOfOneSlot + 'px',
            marginTop: -(sizeOfOneSlot / 2)
          }
        },
        slotIndex === 0 ? null : isRoundHour ? format(time, 'HH:mm', {
          locale: locale
        }) : null
      );
    }
  );
};