[text] Calendar

Viewer

copydownloadembedprintName: Calendar
  1. import React, { useState } from 'react';
  2. //import { useNavigate } from 'react-router-dom';
  3. //import blue_plus from '../../assets/images/plus_blue.png';
  4. //import Reminder from '../../components/Reminder';
  5. import { Button } from '../../components/Button';
  6. import { Img } from '../../components/Img';
  7. import {
  8.   addMonths,
  9.   format,
  10.   subMonths,
  11.   eachDayOfInterval,
  12.   startOfMonth,
  13.   endOfMonth,
  14.   isToday,
  15.   isSameMonth,
  16.   getDay,
  17.   subDays,
  18.   addDays,
  19.   startOfWeek,
  20.   endOfWeek,
  21.   isSameDay,
  22. } from 'date-fns';
  23. import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/solid';
  24.  
  25. function Calendar() {
  26.   const [currentMonth, setCurrentMonth] = useState(new Date());
  27.   const [selectedDay, setSelectedDay] = useState(new Date());
  28.   // const [interviewReminders, setInterviewReminders] = useState([]);
  29.   function classNames(...classes: any) {
  30.     return classes.filter(Boolean).join(' ');
  31.   }
  32.  
  33.   let colStartClasses = [
  34.     '',
  35.     'col-start-2',
  36.     'col-start-3',
  37.     'col-start-4',
  38.     'col-start-5',
  39.     'col-start-6',
  40.     'col-start-7',
  41.   ];
  42.   /*   const addInterviewReminder = () => {
  43.     const interviewReminder = {
  44.       date: selectedDay, // Use the selected date or the date you want
  45.       title: 'Interview 1', // Title of the interview
  46.       reminders: ['Reminder 1', 'Reminder 2', 'Reminder 3'], // Array of reminder texts
  47.     };
  48.     setInterviewReminders([...interviewReminders]);
  49.   }; */
  50.   const nextMonth = () => {
  51.     setCurrentMonth(addMonths(currentMonth, 1));
  52.   };
  53.  
  54.   const previousMonth = () => {
  55.     setCurrentMonth(subMonths(currentMonth, 1));
  56.   };
  57.  
  58.   const formattedMonth = format(currentMonth, 'MMMM');
  59.   const firstDayOfMonth = startOfMonth(currentMonth);
  60.   const lastDayOfMonth = endOfMonth(currentMonth);
  61.  
  62.   const days = eachDayOfInterval({
  63.     start: startOfMonth(currentMonth),
  64.     end: endOfMonth(currentMonth),
  65.   });
  66.  
  67.   const totalDays = eachDayOfInterval({
  68.     start: startOfWeek(firstDayOfMonth, { weekStartsOn: 0 }),
  69.     end: endOfWeek(lastDayOfMonth, { weekStartsOn: 6 }),
  70.   });
  71.  
  72.   const startGreyedOutDays = getDay(firstDayOfMonth);
  73.   const endGreyedOutDays = 6 - getDay(lastDayOfMonth);
  74.  
  75.   // const navigate = useNavigate();
  76.   /*   const handleDateClick = (day: any) => {
  77.     const existingReminder = interviewReminders.find((reminder) =>
  78.       isSameDay(reminder.date, day)
  79.     );
  80.  
  81.     if (!existingReminder) {
  82.       // If no existing reminder, create a new reminder with a blue pointer
  83.       const newReminder = {
  84.         date: day,
  85.         title: 'Interview',
  86.         reminders: ['blue'], // Initially, add a blue dot
  87.       };
  88.       setInterviewReminders([...interviewReminders, newReminder]);
  89.     } else {
  90.       // If an existing reminder, add a new pointer with a different color
  91.       const colors = ['orange', 'pink', 'yellow']; // You can extend this list
  92.       const usedColors = existingReminder.reminders;
  93.       const availableColors = colors.filter(
  94.         (color) => !usedColors.includes(color)
  95.       );
  96.  
  97.       if (availableColors.length > 0) {
  98.         existingReminder.reminders.push(availableColors[0]);
  99.         setInterviewReminders([...interviewReminders]);
  100.       }
  101.     }
  102.   }; */
  103.  
  104.   return (
  105.     <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">
  106.       {/* Calendar Header */}
  107.       {/* Calendar Header */}
  108.       <div className="md:w-[220px] h-[95px] mt-[12px] mb-[2px]  ">
  109.         {/* Navigation buttons */}
  110.         <div className="h-[60px] relative bg-white-A700 flex flex-row items-center justify-between">
  111.           <div className="flex items-center">
  112.             <button
  113.               type="button"
  114.               onClick={previousMonth}
  115.               className="flex flex-none items-center justify-center p-1.5 text-black-333 hover:text-black-444"
  116.             >
  117.               <span className="sr-only">Previous month</span>
  118.               <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
  119.             </button>
  120.             <div
  121.               className="text-lg font-semibold"
  122.               style={{ minWidth: '120px' }}
  123.             >
  124.               {format(currentMonth, 'MMMM yyyy')}
  125.             </div>
  126.             <button
  127.               onClick={nextMonth}
  128.               type="button"
  129.               className="flex flex-none items-center justify-center p-1.5 text-black-333 hover:text-black-444"
  130.             >
  131.               <span className="sr-only">Next month</span>
  132.               <ChevronRightIcon className="w-5 h-5" aria-hidden="true" />
  133.             </button>
  134.           </div>
  135.           <div className="w-[650px]"></div>
  136.           {/* interview button */}
  137.           <Button
  138.             className="interview button cursor-pointer flex items-center min-w-[177px] rounded-[11px] p-4 border border-blue_A200_01"
  139.             style={{ borderColor: '#0070f3', height: '49px' }}
  140.             leftIcon={
  141.               <div>
  142.                 <Img
  143.                   className="h-[13px] mr-2.5 w-[13px]"
  144.                   // src={blue_plus}
  145.                   alt="plus"
  146.                 />
  147.               </div>
  148.             }
  149.             //  onClick={() => navigate('/')}
  150.           >
  151.             <div className="font-semibold text-left text-lg text-blue-A200_01">
  152.               Add Interview
  153.             </div>
  154.           </Button>
  155.         </div>
  156.       </div>
  157.       {/* days div starts from here */}
  158.       <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">
  159.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] ml-[-4px] mb-[-3px]">
  160.           Sun
  161.         </div>
  162.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
  163.           Mon
  164.         </div>
  165.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
  166.           Tue
  167.         </div>
  168.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
  169.           Wed
  170.         </div>
  171.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
  172.           Tue
  173.         </div>
  174.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mb-[-3px]">
  175.           Fri
  176.         </div>
  177.         <div className="bg-white-A700 pt-[20px] pb-[15px] mt-[-3px] mr-[-4px] mb-[-3px]">
  178.           Sat
  179.         </div>
  180.       </div>
  181.       {/* Calendar Body */}
  182.       <div className="flex flex-col w-full md:w-auto p-1 ">
  183.         {/* Calendar dates */}
  184.         <div className="grid grid-cols-7 gap-[3px] mt-4 ml-[-4px] bg-gray-200">
  185.           {totalDays.map((day, dayIdx) => (
  186.             <div
  187.               key={day.toString()}
  188.               className={classNames(
  189.                 dayIdx === 0 && colStartClasses[getDay(day)],
  190.                 'flex items-center justify-center mr-[-1px] h-[148px] bg-white-A700'
  191.               )}
  192.             >
  193.               <button
  194.                 onClick={() => {
  195.                   setSelectedDay(day);
  196.                   //  handleDateClick(day); // Handle date click
  197.                 }}
  198.                 type="button"
  199.                 className={`
  200.                   ${isToday(day) ? 'text-black mt-[-55px]' : ''} 
  201.                   ${
  202.                     !isSameMonth(day, currentMonth)
  203.                       ? 'text-gray-400 cursor-not-allowed mt-[-55px]'
  204.                       : ''
  205.                   }
  206.                   ${
  207.                     isSameDay(day, selectedDay)
  208.                       ? 'bg-blue text-white'
  209.                       : 'text-black'
  210.                   }
  211.                   ${
  212.                     isSameMonth(day, currentMonth) && !isToday(day)
  213.                       ? 'text-[18px] text-black mt-[-55px]'
  214.                       : ''
  215.                   }
  216.                   font-semibold mx-auto flex  items-center justify-center 
  217.                 `}
  218.                 disabled={!isSameMonth(day, currentMonth)}
  219.               >
  220.                 <time dateTime={format(day, 'yyyy-MM-dd')}>
  221.                   {format(day, 'd')}
  222.                 </time>
  223.               </button>
  224.               {/* Check if there are interview reminders for this day */}
  225.               {/*     {interviewReminders.map((reminder, index) =>
  226.                 isSameDay(reminder.date, day) ? (
  227.                   <Reminder
  228.                     key={index}
  229.                     date={reminder.date}
  230.                     title={reminder.title}
  231.                     reminders={reminder.reminders}
  232.                   />
  233.                 ) : null
  234.               )} */}
  235.             </div>
  236.           ))}
  237.         </div>
  238.       </div>
  239.     </div>
  240.   );
  241. }
  242.  
  243. export default Calendar;
  244.  

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: