- import React, { useState } from 'react';
- //import { useNavigate } from 'react-router-dom';
- //import blue_plus from '../../assets/images/plus_blue.png';
- //import Reminder from '../../components/Reminder';
- import { Button } from '../../components/Button';
- import { Img } from '../../components/Img';
- import {
- addMonths,
- format,
- subMonths,
- eachDayOfInterval,
- startOfMonth,
- endOfMonth,
- isToday,
- isSameMonth,
- getDay,
- subDays,
- addDays,
- startOfWeek,
- endOfWeek,
- isSameDay,
- } from 'date-fns';
- import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/solid';
- function Calendar() {
- const [currentMonth, setCurrentMonth] = useState(new Date());
- const [selectedDay, setSelectedDay] = useState(new Date());
- // const [interviewReminders, setInterviewReminders] = useState([]);
- function classNames(...classes: any) {
- return classes.filter(Boolean).join(' ');
- }
- let colStartClasses = [
- '',
- 'col-start-2',
- 'col-start-3',
- 'col-start-4',
- 'col-start-5',
- 'col-start-6',
- 'col-start-7',
- ];
- /* const addInterviewReminder = () => {
- const interviewReminder = {
- date: selectedDay, // Use the selected date or the date you want
- title: 'Interview 1', // Title of the interview
- reminders: ['Reminder 1', 'Reminder 2', 'Reminder 3'], // Array of reminder texts
- };
- setInterviewReminders([...interviewReminders]);
- }; */
- const nextMonth = () => {
- setCurrentMonth(addMonths(currentMonth, 1));
- };
- const previousMonth = () => {
- setCurrentMonth(subMonths(currentMonth, 1));
- };
- const formattedMonth = format(currentMonth, 'MMMM');
- const firstDayOfMonth = startOfMonth(currentMonth);
- const lastDayOfMonth = endOfMonth(currentMonth);
- const days = eachDayOfInterval({
- start: startOfMonth(currentMonth),
- end: endOfMonth(currentMonth),
- });
- const totalDays = eachDayOfInterval({
- start: startOfWeek(firstDayOfMonth, { weekStartsOn: 0 }),
- end: endOfWeek(lastDayOfMonth, { weekStartsOn: 6 }),
- });
- const startGreyedOutDays = getDay(firstDayOfMonth);
- const endGreyedOutDays = 6 - getDay(lastDayOfMonth);
- // const navigate = useNavigate();
- /* const handleDateClick = (day: any) => {
- const existingReminder = interviewReminders.find((reminder) =>
- isSameDay(reminder.date, day)
- );
- if (!existingReminder) {
- // If no existing reminder, create a new reminder with a blue pointer
- const newReminder = {
- date: day,
- title: 'Interview',
- reminders: ['blue'], // Initially, add a blue dot
- };
- setInterviewReminders([...interviewReminders, newReminder]);
- } else {
- // If an existing reminder, add a new pointer with a different color
- const colors = ['orange', 'pink', 'yellow']; // You can extend this list
- const usedColors = existingReminder.reminders;
- const availableColors = colors.filter(
- (color) => !usedColors.includes(color)
- );
- if (availableColors.length > 0) {
- existingReminder.reminders.push(availableColors[0]);
- setInterviewReminders([...interviewReminders]);
- }
- }
- }; */
- return (
- <div className="bg-white-A700 flex flex-col md:flex-row h-[908px] md:h-auto items-start justify-start max-w-[1061px] rounded-[20px] w-full">
- {/* Calendar Header */}
- {/* Calendar Header */}
- <div className="md:w-[220px] h-[95px] mt-[12px] mb-[2px] ">
- {/* Navigation buttons */}
- <div className="h-[60px] relative bg-white-A700 flex flex-row items-center justify-between">
- <div className="flex items-center">
- <button
- type="button"
- onClick={previousMonth}
- className="flex flex-none items-center justify-center p-1.5 text-black-333 hover:text-black-444"
- >
- <span className="sr-only">Previous month</span>
- <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
- </button>
- <div
- className="text-lg font-semibold"
- style={{ minWidth: '120px' }}
- >
- {format(currentMonth, 'MMMM yyyy')}
- </div>
- <button
- onClick={nextMonth}
- type="button"
- className="flex flex-none items-center justify-center p-1.5 text-black-333 hover:text-black-444"
- >
- <span className="sr-only">Next month</span>
- <ChevronRightIcon className="w-5 h-5" aria-hidden="true" />
- </button>
- </div>
- <div className="w-[650px]"></div>
- {/* interview button */}
- <Button
- className="interview button cursor-pointer flex items-center min-w-[177px] rounded-[11px] p-4 border border-blue_A200_01"
- style={{ borderColor: '#0070f3', height: '49px' }}
- leftIcon={
- <div>
- <Img
- className="h-[13px] mr-2.5 w-[13px]"
- // src={blue_plus}
- alt="plus"
- />
- </div>
- }
- // onClick={() => navigate('/')}
- >
- <div className="font-semibold text-left text-lg text-blue-A200_01">
- Add Interview
- </div>
- </Button>
- </div>
- </div>
- {/* days div starts from here */}
- <div className="Daystext-[20px] mb-[-20px] flex flex-col w-full h-[64px] md:w-auto p-1 grid grid-cols-7 gap-[1px] mt-4 text-[18px] text-black-333 font-medium text-center bg-gray-200">
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] ml-[-4px] mb-[-3px]">
- Sun
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
- Mon
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
- Tue
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
- Wed
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
- Tue
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
- Fri
- </div>
- <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mr-[-4px] mb-[-3px]">
- Sat
- </div>
- </div>
- {/* Calendar Body */}
- <div className="flex flex-col w-full md:w-auto p-1 ">
- {/* Calendar dates */}
- <div className="grid grid-cols-7 gap-[3px] mt-4 ml-[-4px] bg-gray-200">
- {totalDays.map((day, dayIdx) => (
- <div
- key={day.toString()}
- className={classNames(
- dayIdx === 0 && colStartClasses[getDay(day)],
- 'flex items-center justify-center mr-[-1px] h-[148px] bg-white-A700'
- )}
- >
- <button
- onClick={() => {
- setSelectedDay(day);
- // handleDateClick(day); // Handle date click
- }}
- type="button"
- className={`
- ${isToday(day) ? 'text-black mt-[-55px]' : ''}
- ${
- !isSameMonth(day, currentMonth)
- ? 'text-gray-400 cursor-not-allowed mt-[-55px]'
- : ''
- }
- ${
- isSameDay(day, selectedDay)
- ? 'bg-blue text-white'
- : 'text-black'
- }
- ${
- isSameMonth(day, currentMonth) && !isToday(day)
- ? 'text-[18px] text-black mt-[-55px]'
- : ''
- }
- font-semibold mx-auto flex items-center justify-center
- `}
- disabled={!isSameMonth(day, currentMonth)}
- >
- <time dateTime={format(day, 'yyyy-MM-dd')}>
- {format(day, 'd')}
- </time>
- </button>
- {/* Check if there are interview reminders for this day */}
- {/* {interviewReminders.map((reminder, index) =>
- isSameDay(reminder.date, day) ? (
- <Reminder
- key={index}
- date={reminder.date}
- title={reminder.title}
- reminders={reminder.reminders}
- />
- ) : null
- )} */}
- </div>
- ))}
- </div>
- </div>
- </div>
- );
- }
- export default Calendar;
[text] Calendar
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Editor
You can edit this paste and save as new:
File Description
- Calendar
- Paste Code
- 29 Apr-2024
- 8.62 Kb
You can Share it:
Latest Code Pastes