Create calendar component

10
closed
daviddossantos
daviddossantos
Posted 5 months ago

Create calendar component #654

Feature request 🚀

  • I will create Pull Request
  • It's just a suggestion

Expected

Hello guys, it would be interesting create calendar component

https://user-images.githubusercontent.com/37313667/144488354-e9b5feca-e032-44d3-bb39-dae40bf10e02.mov

Programme (Optional)

Others (Optional)

jaimin001
jaimin001
Created 5 months ago

Hey @daviddossantos , I would like to work in this issue. However, I am not able to understand this issue properly, like what will be the difference between a normal calendar component and the one you want? Can you please explain me.

daviddossantos
daviddossantos
Created 5 months ago

hello @jaimin001, this calendar it's a print screen of platform Vercel, I would like that very much as an geist component

jaimin001
jaimin001
Created 5 months ago

hey @daviddossantos, I worked on this issue and have made a component like this.

Is it alright or do I have to make some more changes? Please let me know

https://user-images.githubusercontent.com/82583076/145685291-6221fc49-9a1c-4f36-b9db-3f1ccf4d9c39.mp4

daviddossantos
daviddossantos
Created 5 months ago

hey @jaimin001, I liked very much this, it's amazing.

I would be that the design stays a little bit equal weel(font, layout, color) of the Vercel, with this approach:

https://user-images.githubusercontent.com/37313667/145870861-327df17e-13e2-49c8-a782-f6a549099331.mov

daviddossantos
daviddossantos
Created 5 months ago

put your PR here and let's work this to improve

jaimin001
jaimin001
Created 5 months ago

This one is my PR #656. This is my first contribution in open source, Sorry for any mistakes :)

daviddossantos
daviddossantos
Created 5 months ago

Keep cool @jaimin001 :slightly_smiling_face:

daviddossantos
daviddossantos
Created 4 months ago

What do you think of creating a component of the zero, using Geist Component?

Create the basic structure of the Calendar using a few things of the Geist Component.

The code stayed in this way:

import { Divider, Grid, Page, Text, useTheme } from "@geist-ui/react";
import {
  Calendar as IconCalendar,
  ChevronLeft,
  ChevronRight,
  XCircle,
} from "@geist-ui/react-icons";
import { addDays, format, startOfWeek } from "date-fns";
import type { NextPage } from "next";

const Calendar: NextPage = () => {
  const { palette } = useTheme();

  const firstWeek = startOfWeek(new Date());
  const weekDay = Array.from(Array(7)).map((e, item) =>
    format(addDays(firstWeek, item), "EEE")
  );

  return (
    <Page>
      <Page.Content>
        <div className="container">
          <Text font="12px" type="secondary">
            DATE RANGE
          </Text>
          <div className="row">
            <Text font="20px" b>
              12/08/2021
              <Text font="20px" type="secondary" b>
                {` – `}
              </Text>
              12/15/2021
            </Text>
            <XCircle size={18} color={palette.secondary} />
          </div>
          <Divider
            className="divider"
            style={{
              margin: "10px -12px",
              maxWidth: 300,
            }}
          />
          <div className="row">
            <Text font="12px" className="text-month">
              DECEMBER 2021
            </Text>
            <div className="row">
              <Grid.Container gap={1.5} justify="center">
                <Grid>
                  <ChevronLeft size={20} color={palette.secondary} />
                </Grid>
                <Grid>
                  <IconCalendar size={18} color={palette.secondary} />
                </Grid>
                <Grid>
                  <ChevronRight size={20} color={palette.secondary} />
                </Grid>
              </Grid.Container>
            </div>
          </div>
          <Divider className="divider" />
          {weekDay.map((day) => (
            <th key={day} className="week-day">
              <Text type="secondary" font="12px">
                {day}
              </Text>
            </th>
          ))}
        </div>
        <style jsx>{`
          .container {
            width: 300px;
            height: 400px;
            padding: 12px;
            background: #fffc;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            border-radius: 5px;
          }
          .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          }
          .week-day {
            padding: 0 8px;
            font-weight: 500 !important;
            text-transform: uppercase;
          }
        `}</style>
      </Page.Content>
    </Page>
  );
};

export default Calendar;

daviddossantos
daviddossantos
Created 4 months ago

@ofekashery what do you think?

unix
unix
Created 4 months ago

The current task of geist is to maintain the current component, and no additional components will be added. Thank you for your contribution @daviddossantos , but I have very little time to maintain the open source project in the last few months, so I will only merge the bug fixes.

Previous