anonymous No title
No License JavaScript
2019年07月15日
Copy
import { DateTime } from 'luxon';
import { Container, Table } from 'react-bootstrap';
import { useState } from 'react';

interface Props {
  year?: number;
  month?: number;
};

export default function Calendar(props: Props) {
  let { year, month } = props;
  if (!year) year = DateTime.local().year;
  if (!month) month = DateTime.local().month;

  const firstDayOfThisMonth = DateTime.local(year, month, 1, 0, 0);
  const firstWeekDay = firstDayOfThisMonth.weekday;

  const firstDayLocation = (() => {
    switch (firstWeekDay) {
      case 1:
        return 2;
      case 2:
        return 3;
      case 3:
        return 4;
      case 4:
        return 5;
      case 5:
        return 6;
      case 6:
        return 7;
      case 7:
        return 1;
      default:
        return 1;
    }
  })();

  const daysOfMonth = (() => {
    if (month === 2) {
      if (year % 4 === 0) {
        if (year % 100 === 0 && year % 400 !== 0) {
          return 29;
        } else {
          return 28;
        }
      }
    } else if (month === 4 || month === 6 || month === 9 || month === 11) {
      return 30;
    } else {
      return 31;
    }
  })();

  interface Day {
    dateNum?: number;
  }

  const daysOfCalendar = (() => {
    const sixWeek = [];
    let dayCount = 1;
    const firstWeek = [];
    for (let i = 1; i <= 7; i++) {
      const day: Day = {};
      if (i >= firstDayLocation) {
        day.dateNum = dayCount;
        dayCount++;
      }
      firstWeek.push(day);
    }
    sixWeek.push(firstWeek);

    for (let i = 0; i < 5; i++) {
      const week = [];
      for (let i = 0; i < 7; i++) {
        const day: Day = {};
        if (dayCount <= daysOfMonth!) {
          day.dateNum = dayCount;
          dayCount++;
        }
        week.push(day)
      }
      sixWeek.push(week);
    }
    return sixWeek;
  })();
  console.log(daysOfCalendar)


  const [ schedules ] = useState(daysOfCalendar);

  function createDays() {
    return (schedules.map(scheduleArray => (
      <tr>
        {
          scheduleArray.map(day => (
            <td>{day.dateNum}</td>
          ))
        }
      </tr>
    )));
  }

  return (
    <Container>
      <Table className='table-bordered'>
        <thead>
          <tr>
            <th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th>
          </tr>
        </thead>
        <tbody>
          {createDays()}
        </tbody>
      </Table>
    </Container>
  );
}





export enum WeekDay {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}

import { DateTime } from 'luxon';
import { Container, Table } from 'react-bootstrap';
import { useState } from 'react';

interface Props {
  year?: number;
  month?: number;
};

export default function Calendar(props: Props) {
  let { year, month } = props;
  if (!year) year = DateTime.local().year;
  if (!month) month = DateTime.local().month;

  const firstDayOfThisMonth = DateTime.local(year, month, 1, 0, 0);
  const firstWeekDay = firstDayOfThisMonth.weekday;

  const firstDayLocation = (() => {
    switch (firstWeekDay) {
      case 1:
        return 2;
      case 2:
        return 3;
      case 3:
        return 4;
      case 4:
        return 5;
      case 5:
        return 6;
      case 6:
        return 7;
      case 7:
        return 1;
      default:
        return 1;
    }
  })();

  const daysOfMonth = (() => {
    if (month === 2) {
      if (year % 4 === 0) {
        if (year % 100 === 0 && year % 400 !== 0) {
          return 29;
        } else {
          return 28;
        }
      }
    } else if (month === 4 || month === 6 || month === 9 || month === 11) {
      return 30;
    } else {
      return 31;
    }
  })();

  interface Day {
    dateNum?: number;
  }

  const daysOfCalendar = (() => {
    const sixWeek = [];
    let dayCount = 1;
    const firstWeek = [];
    for (let i = 1; i <= 7; i++) {
      const day: Day = {};
      if (i >= firstDayLocation) {
        day.dateNum = dayCount;
        dayCount++;
      }
      firstWeek.push(day);
    }
    sixWeek.push(firstWeek);

    for (let i = 0; i < 5; i++) {
      const week = [];
      for (let i = 0; i < 7; i++) {
        const day: Day = {};
        if (dayCount <= daysOfMonth!) {
          day.dateNum = dayCount;
          dayCount++;
        }
        week.push(day)
      }
      sixWeek.push(week);
    }
    return sixWeek;
  })();
  console.log(daysOfCalendar)


  const [ schedules ] = useState(daysOfCalendar);

  function createDays() {
    return (schedules.map(scheduleArray => (
      <tr>
        {
          scheduleArray.map(day => (
            <td>{day.dateNum}</td>
          ))
        }
      </tr>
    )));
  }

  return (
    <Container>
      <Table className='table-bordered'>
        <thead>
          <tr>
            <th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th>
          </tr>
        </thead>
        <tbody>
          {createDays()}
        </tbody>
      </Table>
    </Container>
  );
}





export enum WeekDay {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}


Output

Run
年末年始は機械学習・深層学習を勉強しませんか?
No one still commented. Please first comment.
年末年始は機械学習・深層学習を勉強しませんか?
広告
未経験から最短でエンジニアへの転職を目指すなら