date-fns#startOfMonth TypeScript Examples

test('Previous goes back 1 month', () => {
  let spy = jest.fn();
  render(
    <MonthlyCalendarWithDateChange
      events={[]}
      onCurrentMonthChange={spy}
      //April
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
    />
  );

  fireEvent.click(screen.getByText('Previous'));
  screen.getByText('March');
  expect(spy.mock.calls[0][0].toISOString()).toContain('2021-03-01');
});

test('Renders weekdays in english', () => {
  render(
    <MonthlyCalendarTest
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  //check that the month nav date is in chinese
  screen.getAllByText('Monday');
  screen.getAllByText('Tuesday');
  screen.getAllByText('Wednesday');
  screen.getAllByText('Thursday');
  screen.getAllByText('Friday');
  screen.getAllByText('Saturday');
  screen.getAllByText('Sunday');
});

test('Renders event with locale', () => {
  render(
    <MonthlyCalendarTest
      locale={zhCN}
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  //check that the month nav date is in chinese
  screen.getByText('四月');

  //check the html inside the event day
  let eventDay = screen.getByLabelText('Events for day 4').textContent;
  expect(eventDay).toContain('Call bob');

  let eventItem = screen.getAllByText('Call bob');
  expect(eventItem.length).toEqual(1);
});

test('Hides event when the month changes', () => {
  render(
    <MonthlyCalendarWithDateChange
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
    />
  );

  //check the html inside the event day
  let eventDay = screen.getByLabelText('Events for day 4').textContent;
  expect(eventDay).toContain('Call bob');

  let eventItem = screen.getAllByText('Call bob');
  expect(eventItem.length).toEqual(1);

  fireEvent.click(screen.getByText('Next'));

  expect(screen.queryByText('Call bob')).toEqual(null);
});

test('Renders event on correct day', () => {
  render(
    <MonthlyCalendarTest
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  //check the html inside the event day
  let eventDay = screen.getByLabelText('Events for day 4').textContent;
  expect(eventDay).toContain('Call bob');

  let eventItem = screen.getAllByText('Call bob');
  expect(eventItem.length).toEqual(1);
});

AsyncEvents: Story = args => {
  let [currentMonth, setCurrentMonth] = useState<Date>(
    startOfMonth(new Date())
  );
  let myEvents = useEventsByMonth(currentMonth);

  return (
    <MonthlyCalendar
      currentMonth={currentMonth}
      onCurrentMonthChange={setCurrentMonth}
    >
      <MonthlyNav />
      <MonthlyBody
        omitDays={args.hideWeekend ? [0, 6] : undefined}
        events={myEvents}
      >
        <MonthlyDay<EventType>
          renderDay={data =>
            data.map((item, index) => (
              <DefaultMonthlyEventItem
                key={index}
                title={item.title}
                date={format(item.date, 'k:mm')}
              />
            ))
          }
        />
      </MonthlyBody>
    </MonthlyCalendar>
  );
}

useEventsByMonth = (currentMonth: Date) => {
  let [eventsForMonth, setEvents] = useState<EventType[]>([]);

  useEffect(() => {
    const getEvents = async () => {
      await new Promise(resolve => setTimeout(resolve, 2000));
      let nextEventItems =
        //use firstMonth array if its the current month
        currentMonth.toISOString() == startOfMonth(new Date()).toISOString()
          ? events.firstMonth
          : events.secondMonth;

      setEvents(nextEventItems);
    };
    getEvents();
  }, [currentMonth]);

  return eventsForMonth;
}

MyMonthlyCalendar: Story = args => {
  let [currentMonth, setCurrentMonth] = useState<Date>(
    startOfMonth(new Date())
  );
  let eventItems =
    //use firstMonth array if its the current month
    currentMonth.toISOString() == startOfMonth(new Date()).toISOString()
      ? events.firstMonth
      : events.secondMonth;

  return (
    <MonthlyCalendar
      currentMonth={currentMonth}
      onCurrentMonthChange={setCurrentMonth}
    >
      <MonthlyNav />
      <MonthlyBody
        omitDays={args.hideWeekend ? [0, 6] : undefined}
        events={eventItems}
      >
        <MonthlyDay<EventType>
          renderDay={data =>
            data.map((item, index) => (
              <DefaultMonthlyEventItem
                key={index}
                title={item.title}
                date={format(item.date, 'k:mm')}
              />
            ))
          }
        />
      </MonthlyBody>
    </MonthlyCalendar>
  );
}

BasicMonthlyCalendar: Story = args => {
  let [currentMonth, setCurrentMonth] = useState<Date>(
    startOfMonth(new Date())
  );

  return (
    <MonthlyCalendar
      currentMonth={currentMonth}
      onCurrentMonthChange={setCurrentMonth}
    >
      <MonthlyNav />
      <MonthlyBody
        omitDays={args.hideWeekend ? [0, 6] : undefined}
        events={[
          { title: 'Call John', date: subHours(new Date(), 2) },
          { title: 'Call John', date: subHours(new Date(), 1) },
          { title: 'Meeting with Bob', date: new Date() },
        ]}
      >
        <MonthlyDay<EventType>
          renderDay={data =>
            data.map((item, index) => (
              <DefaultMonthlyEventItem
                key={index}
                title={item.title}
                date={format(item.date, 'k:mm')}
              />
            ))
          }
        />
      </MonthlyBody>
    </MonthlyCalendar>
  );
}

MonthlyCalendar = ({
  locale,
  currentMonth,
  onCurrentMonthChange,
  children,
}: Props) => {
  let monthStart = startOfMonth(currentMonth);
  let days = eachDayOfInterval({
    start: monthStart,
    end: endOfMonth(monthStart),
  });

  return (
    <MonthlyCalendarContext.Provider
      value={{
        days,
        locale,
        onCurrentMonthChange,
        currentMonth: monthStart,
      }}
    >
      {children}
    </MonthlyCalendarContext.Provider>
  );
}

MyMonthlyCalendar = () => {
  let [currentMonth, setCurrentMonth] = useState<Date>(
    startOfMonth(new Date())
  );
  let eventItems = events[currentMonth.toISOString()];

  return (
    <MonthlyCalendar
      currentMonth={currentMonth}
      onCurrentMonthChange={date => setCurrentMonth(date)}
    >
      <MonthlyNav />
      <MonthlyBody
        events={eventItems}
        renderDay={data =>
          data.map((item, index) => (
            <DefaultMonthlyEventItem
              key={index}
              title={item.title}
              date={format(item.date, 'k:mm')}
            />
          ))
        }
      />
    </MonthlyCalendar>
  );
}

test('Renders weekdays in spanish', () => {
  render(
    <MonthlyCalendarTest
      locale={es}
      events={[{ title: 'Call bob', date: new Date(2021, 3, 4) }]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  //check that the month nav date is in chinese
  screen.getAllByText('domingo');
  screen.getAllByText('lunes');
  screen.getAllByText('martes');
  screen.getAllByText('miércoles');
  screen.getAllByText('jueves');
  screen.getAllByText('viernes');
  screen.getAllByText('sábado');
});

test('Next goes forward 1 month', () => {
  let spy = jest.fn();
  render(
    <MonthlyCalendarWithDateChange
      events={[]}
      onCurrentMonthChange={spy}
      //April
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
    />
  );

  fireEvent.click(screen.getByText('Next'));
  screen.getByText('May');

  expect(spy.mock.calls[0][0].toISOString()).toContain('2021-05-01');
});

static reduceByAddingEmptyMonth(
        splitList: GraphSplit[],
        fromDate: Date,
        toDate: Date,
        key: string,
    ): GraphSplit[] {
        const result: GraphSplit[] = [];
        const startOfMonthFromDate = startOfMonth(fromDate);
        const toDateStartOfMonth = startOfMonth(toDate);
        let currentDate = toDateStartOfMonth;
        let index = 0;
        const ids = CashAccountUtils.extractKey(key);
        while (currentDate >= startOfMonthFromDate) {
            const currentSplit = splitList[index];
            if (currentSplit && isSameMonth(currentSplit.transactionDate, currentDate)) {
                result.push(currentSplit);
                index++;
            } else {
                result.push({
                    accountId: ids.accountId,
                    currencyId: ids.currencyId,
                    amount: 0,
                    transactionDate: currentDate,
                    originalCurrencyId: ids.currencyId,
                    originalAmount: 0,
                });
            }
            currentDate = subMonths(currentDate, 1);
        }
        return result;
    }

static reduceByMonth(
        splitList: GraphSplit[],
        useOriginalCurrency: boolean = false,
    ): GraphSplit[] {
        const amountField = useOriginalCurrency ? 'originalAmount' : 'amount';
        return splitList.reduce((list: GraphSplit[], s: GraphSplit) => {
            s.transactionDate = startOfMonth(s.transactionDate);
            if (
                list.length === 0 ||
                !isSameMonth(list[list.length - 1].transactionDate, s.transactionDate)
            ) {
                list.push(s);
            } else {
                list[list.length - 1][amountField] += s[amountField];
            }
            return list;
        }, []);
    }

test('If on the previous year, it shows the year with month', () => {
  render(
    <MonthlyCalendarWithDateChange
      events={[]}
      //April
      currentMonth={startOfMonth(new Date(2021, 2, 1))}
    />
  );

  fireEvent.click(screen.getByText('Previous'));
  fireEvent.click(screen.getByText('Previous'));
  fireEvent.click(screen.getByText('Previous'));
  screen.getByText('December 2020');
});

async computeSplitSumOfTheMonthNew(
        graphSplitList: GraphSplit[],
        transactionDate: Date,
        wipBudgetSheet: GraphSplitExtended | null,
    ): Promise<InOutSplitMap> {
        const transactionDateFrom: Date = startOfMonth(transactionDate);
        const transactionDateTo: Date = endOfMonth(transactionDate);
        if (!wipBudgetSheet) {
            return { inMap: new Map(), outMap: new Map() };
        }
        // Filter
        const grahSplitListFiltered = graphSplitList.filter(
            (item) =>
                item.transactionDate >= transactionDateFrom &&
                item.transactionDate <= transactionDateTo &&
                item.accountId === wipBudgetSheet.accountId,
        );

        // Calculate leaf sum
        const graphSplitMap = GraphUtils.reduceToInOutMapOfOneCurrency(grahSplitListFiltered);
        return graphSplitMap;
    }

async computeSplitSumOfTheMonth(
        graphSplitList: GraphSplit[],
        transactionDate: Date,
        cashCurrency: CashCurrency,
        cashAccountTree: CashAccount[],
    ): Promise<Map<number, GraphSplit>> {
        const transactionDateFrom: Date = startOfMonth(transactionDate);
        const transactionDateTo: Date = endOfMonth(transactionDate);
        // Filter
        const grahSplitListFiltered = graphSplitList.filter(
            (item) =>
                item.transactionDate >= transactionDateFrom &&
                item.transactionDate <= transactionDateTo,
        );

        // Calculate leaf sum
        const graphSplitMap = GraphUtils.reduceToMapOfOneCurrency(grahSplitListFiltered);

        // Calculate branch sum
        this.sumTree(cashAccountTree, cashCurrency, graphSplitMap);

        return graphSplitMap;
    }

export function getDaysNeededForLastMonth(date: Date, locale: Locale) {
  const firstDayOfWeek = startOfWeek(date, { locale });

  const startDate = startOfMonth(date);
  // getDay return the value of the weekday from 0 to 6
  // i.e. startDate is a Wednesday -> getDay(startDate) = 3
  // i.e. firstDayOfWeek is a Sunday -> getDay(firstDayOfWeek) = 0 (depends on locale)
  // + 7 and the modulo to ensure the result is positive value is between 0 and 6 (javascript % can return negative value)
  return (getDay(startDate) - getDay(firstDayOfWeek) + 7) % 7;
}

test('If on the next year, it shows the year with month', () => {
  render(
    <MonthlyCalendarWithDateChange
      events={[]}
      //April
      currentMonth={startOfMonth(new Date(2021, 11, 1))}
    />
  );

  fireEvent.click(screen.getByText('Next'));
  screen.getByText('January 2022');
});

test('Renders all 7 days', () => {
  render(
    <MonthlyCalendarTest
      events={[]}
      currentMonth={startOfMonth(new Date(2021, 3, 1))}
      onCurrentMonthChange={() => true}
    />
  );

  let totalDays = screen.getAllByLabelText('Day of Week');

  expect(totalDays.length).toEqual(7);
});

describe('March 2021', () => {
  test('Omits sunday', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        omitDays={[0]}
        currentMonth={startOfMonth(new Date(2021, 2, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalDays = screen.getAllByLabelText('Day of Week');
    expect(totalDays.length).toEqual(6);

    //check that the header is gone
    let sunday = screen.queryByText('Sunday');
    expect(sunday).toEqual(null);

    //ensure the days that fall on sunday are also gone
    expect(screen.queryByText('7')).toEqual(null);
    expect(screen.queryByText('14')).toEqual(null);
    expect(screen.queryByText('21')).toEqual(null);
    expect(screen.queryByText('28')).toEqual(null);
  });
});

describe('March 2021', () => {
  test('renders 1 empty day', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        currentMonth={startOfMonth(new Date(2021, 2, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalPadded = screen.getAllByLabelText('Empty Day');

    expect(totalPadded.length).toEqual(1);
  });
  test('renders 0 empty days if I omit sunday', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        omitDays={[0]}
        currentMonth={startOfMonth(new Date(2021, 2, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalPadded = screen.queryAllByLabelText('Empty Day');

    expect(totalPadded.length).toEqual(0);
  });
});

describe('April 2021', () => {
  test('renders 4 empty days', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        currentMonth={startOfMonth(new Date(2021, 3, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalPadded = screen.getAllByLabelText('Empty Day');

    expect(totalPadded.length).toEqual(4);
  });
  test('renders 3 empty days if I omit sunday', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        omitDays={[0]}
        currentMonth={startOfMonth(new Date(2021, 3, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalPadded = screen.queryAllByLabelText('Empty Day');

    expect(totalPadded.length).toEqual(3);
  });
  test('renders 2 empty days if I omit sunday and monday', () => {
    render(
      <MonthlyCalendarTest
        events={[]}
        omitDays={[0, 1]}
        currentMonth={startOfMonth(new Date(2021, 3, 1))}
        onCurrentMonthChange={() => true}
      />
    );

    let totalPadded = screen.queryAllByLabelText('Empty Day');

    expect(totalPadded.length).toEqual(2);
  });
});

startOfMonth(): GanttDate {
        return new GanttDate(startOfMonth(this.value));
    }

parseDate = (dt?: string, rounded?: "start" | "end"): ParsedDate => {
  if (dt && isDate(dt)) {
    return parseISO(dt);
  } else if (dt && isDateLike(dt)) {
    const parts = getDateParts(dt);

    if (parts) {
      const { part, op, diff } = parts;
      const diffNum = parseInt(`${op}${diff}`, 10);
      let date = startOfMinute(new Date());

      switch (part) {
        case DateParts.NOW:
          return date;
        case DateParts.DECADE:
          if (rounded) {
            date = (rounded === "start" ? startOfDecade : endOfDecade)(date);
          }
          return addYears(date, diffNum * 10);
        case DateParts.YEAR:
          if (rounded) {
            date = (rounded === "start" ? startOfYear : endOfYear)(date);
          }
          return addYears(date, diffNum);
        case DateParts.QUARTER:
          if (rounded) {
            date = (rounded === "start" ? startOfQuarter : endOfQuarter)(date);
          }
          return addQuarters(date, diffNum);
        case DateParts.MONTH:
          if (rounded) {
            date = (rounded === "start" ? startOfMonth : endOfMonth)(date);
          }
          return addMonths(date, diffNum);
        case DateParts.WEEK:
          if (rounded) {
            date = (rounded === "start" ? startOfWeek : endOfWeek)(date);
          }
          return addWeeks(date, diffNum);
        case DateParts.DAY:
          if (rounded) {
            date = (rounded === "start" ? startOfDay : endOfDay)(date);
          }
          return addDays(date, diffNum);
        case DateParts.HOUR:
          if (rounded) {
            date = (rounded === "start" ? startOfHour : endOfHour)(date);
          }
          return addHours(date, diffNum);
        case DateParts.MINUTE:
          if (rounded) {
            date = (rounded === "start" ? startOfMinute : endOfMinute)(date);
          }
          return addMinutes(date, diffNum);
      }
    }
  }
  return undefined;
}

handleKeyDownCell(e: React.KeyboardEvent, date: Date, modifers): void {
    const { locale, dir } = this.props;
    const { currentMonth } = this.state;
    if (e.key !== Keys.ESC) {
      cancelEvent(e);
    }

    const direction = dir === 'ltr' ? 1 : -1;
    const MAX_STEP_TO_CHECK = 7;
    let nextCell;
    switch (e.key) {
    case Keys.TAB:
      if (this.dayPicker) {
        if (e.shiftKey) {
          this.dayPicker
            .querySelector('.tk-daypicker-header--nextYear')
            .focus();
        } else {
          this.dayPicker.querySelector('.tk-daypicker-today').focus();
        }
      }
      break;
    case Keys.SPACE:
    case Keys.SPACEBAR:
    case Keys.ENTER:
      // eslint-disable-next-line no-case-declarations
      const { onDayClick } = this.props;
      onDayClick(date, modifers);
      break;
    case Keys.PAGE_UP:
      if (e.shiftKey) {
        this.monthNavigation(date, addYears(currentMonth, -1));
      } else {
        this.monthNavigation(date, addMonths(currentMonth, -1));
      }
      break;
    case Keys.PAGE_DOWN:
      if (e.shiftKey) {
        this.monthNavigation(date, addYears(currentMonth, 1));
      } else {
        this.monthNavigation(date, addMonths(currentMonth, 1));
      }
      break;
    case Keys.HOME:
      // eslint-disable-next-line no-case-declarations
      const firstDayOfWeek = startOfWeek(date, { locale });
      nextCell =
          firstDayOfWeek.getDate() <= date.getDate()
            ? firstDayOfWeek
            : startOfMonth(date);
      this.focusOnlyEnabledCell(nextCell, 'next', MAX_STEP_TO_CHECK);
      break;
    case Keys.END:
      // eslint-disable-next-line no-case-declarations
      const lastDayOfWeek = endOfWeek(date, { locale });
      nextCell =
          date.getDate() <= lastDayOfWeek.getDate()
            ? lastDayOfWeek
            : lastDayOfMonth(date);
      this.focusOnlyEnabledCell(nextCell, 'previous', MAX_STEP_TO_CHECK);
      break;
    case Keys.ARROW_LEFT:
      this.arrowNavigation(date, addDays(date, -1 * direction));
      break;
    case Keys.ARROW_UP:
      this.arrowNavigation(date, addDays(date, -7));
      break;
    case Keys.ARROW_RIGHT:
      this.arrowNavigation(date, addDays(date, 1 * direction));
      break;
    case Keys.ARROW_DOWN:
      this.arrowNavigation(date, addDays(date, 7));
      break;
    default:
      break;
    }
  }

focusOnlyEnabledCell(
    date: Date,
    action: 'next' | 'previous',
    maxStepCheck: number,
    needToChangeMonth = true
  ) {
    const { locale } = this.props;
    const index = date.getDate();
    if (index) {
      if (this.dayPicker) {
        const enabledCell = this.getEnabledCell(index, action, maxStepCheck);
        if (enabledCell) {
          enabledCell.focus();
        } else {
          if (needToChangeMonth) {
            // when called through arrow navigation
            // when changing month, focus the first available date, if exists
            const step = action === 'next' ? 1 : -1;
            const nextMonth = addMonths(date, step);
            this.setState({ currentMonth: nextMonth }, () => {
              // we need to use the callback to be sure the date picker is re-rendered with the new month
              const index = action === 'next' ? 1 : endOfMonth(nextMonth).getDate();
              const enabledCell = this.getEnabledCell(index, action, maxStepCheck);
              if (enabledCell) {
                enabledCell.focus();
              } else {
                // if all cell are disabled, focus the first day of month
                this.focusCell(
                  getBoundedDay(startOfMonth(nextMonth), nextMonth, locale)
                );
              }
            });
          } else {
            // when called through ARROWS navigation
            this.focusCell(getBoundedDay(startOfMonth(date), date, locale));
          }
        }
      }
    }
  }

Aside: FC = () => (
    <Card>
        <CardContent>
            <FilterLiveSearch />
            <span id="persisted-queries">
                <SavedQueriesList />
            </span>
            <FilterList
                label="resources.customers.filters.last_visited"
                icon={<AccessTimeIcon />}
            >
                <FilterListItem
                    label="resources.customers.filters.today"
                    value={{
                        last_seen_gte: endOfYesterday().toISOString(),
                        last_seen_lte: undefined,
                    }}
                />
                <FilterListItem
                    label="resources.customers.filters.this_week"
                    value={{
                        last_seen_gte: startOfWeek(new Date()).toISOString(),
                        last_seen_lte: undefined,
                    }}
                />
                <FilterListItem
                    label="resources.customers.filters.last_week"
                    value={{
                        last_seen_gte: subWeeks(
                            startOfWeek(new Date()),
                            1
                        ).toISOString(),
                        last_seen_lte: startOfWeek(new Date()).toISOString(),
                    }}
                />
                <FilterListItem
                    label="resources.customers.filters.this_month"
                    value={{
                        last_seen_gte: startOfMonth(new Date()).toISOString(),
                        last_seen_lte: undefined,
                    }}
                />
                <FilterListItem
                    label="resources.customers.filters.last_month"
                    value={{
                        last_seen_gte: subMonths(
                            startOfMonth(new Date()),
                            1
                        ).toISOString(),
                        last_seen_lte: startOfMonth(new Date()).toISOString(),
                    }}
                />
                <FilterListItem
                    label="resources.customers.filters.earlier"
                    value={{
                        last_seen_gte: undefined,
                        last_seen_lte: subMonths(
                            startOfMonth(new Date()),
                            1
                        ).toISOString(),
                    }}
                />
            </FilterList>

            <FilterList
                label="resources.customers.filters.has_ordered"
                icon={<MonetizationOnIcon />}
            >
                <FilterListItem
                    label="ra.boolean.true"
                    value={{
                        nb_commands_gte: 1,
                        nb_commands_lte: undefined,
                    }}
                />
                <FilterListItem
                    label="ra.boolean.false"
                    value={{
                        nb_commands_gte: undefined,
                        nb_commands_lte: 0,
                    }}
                />
            </FilterList>

            <FilterList
                label="resources.customers.filters.has_newsletter"
                icon={<MailIcon />}
            >
                <FilterListItem
                    label="ra.boolean.true"
                    value={{ has_newsletter: true }}
                />
                <FilterListItem
                    label="ra.boolean.false"
                    value={{ has_newsletter: false }}
                />
            </FilterList>

            <FilterList
                label="resources.customers.filters.group"
                icon={<LocalOfferIcon />}
            >
                {segments.map(segment => (
                    <FilterListItem
                        label={segment.name}
                        key={segment.id}
                        value={{ groups: segment.id }}
                    />
                ))}
            </FilterList>
        </CardContent>
    </Card>
)