Skip to main content

The Calendar UI

info

Update on 5.17th, I have updated the calendar UI today.

Today in Calendar function​

If I want to import some tsx components into the mdx file, like I amd doing in this file. I need to make sure the name of import is using PascalCase. For example, I am adding a jsx file name called: "ui_for_operating" and when I called it, the name of calling and the code should be:

import UiForOperating from '@site/src/components/test_calendar/ui_for_operating';

...

<UiForOperating />

The calednar, or the time is really important in the project management. Thus, for the first, I am adding the today function from the official documentation and here is the code for tsx.

function ModifiersToday() {
  const initialFooter = <p>Try clicking the today’s date.</p>;
  const [footer, setFooter] = useState(initialFooter);

  const handleDayClick: DayMouseEventHandler = (day, modifiers) => {
    if (modifiers.today) {
      setFooter(<p>You clicked the today’s date.</p>);
    } else {
      setFooter(initialFooter);
    }
  };
  return <DayPicker onDayClick={handleDayClick} footer={footer} />;
}

Later I want to add today as an output format, to present automatically:

import React, { useState } from 'react';
import 'react-day-picker/dist/style.css';

import { DayMouseEventHandler, DayPicker } from 'react-day-picker';
import { format } from 'date-fns';

export default function App() {
  const today = new Date();
  const formattedToday = format(today, 'MMMM dd, yyyy');
  const initialFooter = <p>Today is {formattedToday}. Try clicking the today's date.</p>;
  const [footer, setFooter] = useState(initialFooter);

  const handleDayClick: DayMouseEventHandler = (day, modifiers) => {
    if (modifiers.today) {
      const formattedDate = format(day, 'MMMM dd, yyyy');
      setFooter(<p>Today is {formattedDate}.</p>);
    } else {
      setFooter(initialFooter);
    }
  };

  return <DayPicker numberOfMonths={2} onDayClick={handleDayClick} footer={footer} />;
}

This is using format from date-fns library, for formatted date applying.

Then in the handleDayClick and the initialFooter function, I use the format function to format today day as a string. We use the 'MMMM dd, yyyy' format, which will format the date as something like "May 17, 2024". Then I change them again, for after clicking, the time will be different and change back.

Finally the output:

SuMoTuWeThFrSa

Today is July 19, 2024.

css for it​

Chat with GPT, I want to ensure the display is more advanced. First highlight today, and present interraction for clicking:

  1. We use the useEffect hook to monitor changes to selectedDate. If the selected date is not today, we set a timer to reset selectedDate to undefined after 2 seconds, reverting to today's breathing light effect.
  2. In the handleDayClick function, we set the clicked date as selectedDate, updating the footer content based on whether it is today's date.
  3. We have defined a modifiers object to identify today's date and the selected date. The today modifier is used to identify today's date, while the selected modifier is used to identify the selected date.
  4. We use the modifiersStyles object to define the styles for the dates. For the today modifier, we apply a breathing animation to create a breathing light effect. For the selected modifier, we set the background color and text color.
  5. In the styles.css file, we define the breathe animation to create the breathing light effect.

For highlighting today:

  1. In the modifiersStyles object, we made the following adjustments to the today modifier:

    • Set a semi-transparent yellow background color: rgba(255, 255, 0, 0.5).
    • Set borderRadius to 50% to make it appear round.

  2. For the selected modifier, we also set borderRadius to 50% to make it appear round.

  3. In the styles.css file, we modified the definition of the breathe animation:

    • During different stages of the animation, we use transform: scale() to change the size of the element, creating a breathing effect.
    • At the same time, we adjusted the opacity at different stages to make the breathing effect more pronounced.
SuMoTuWeThFrSa

Today is July 19, 2024.

The code is under the path of src/components/test_calendar/ui_for_operating_css.tsx and the css file is src/components/test_calendar/ui_for_operating_css.css. Then I called it on my operating UI.

(previous one)The Calendar of my tasks

Hey! Matthew! Here is your ongoing calendar!~ 😊

SuMoTuWeThFrSa
I will do the task of LLM these days
SuMoTuWeThFrSa
test