fix: 12 hour clock & css

Mannan-Goyal · Sep 5, 2021 · a28ada3 · a28ada3
1 parent 28f905d
commit a28ada3
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 25 deletions.
diff --git a/src/components/EventProfile.jsx b/src/components/EventProfile.jsx
@@ -24,7 +24,7 @@ const EventProfile = ({img,org,title,desc,start,end,url,backgroundColor,textColo
             />
             </div>
           <div id="eventprofilecard" className="flex-none sm:flex sm:w-4/5" style={{overflowY:todayChecker?"auto":"none",overflowX:"hidden"}}>
-            <div className="flex-auto w-full sm:ml-5 justify-evenly">
+            <div className="flex-auto w-full p-2 sm:ml-5 justify-evenly">
               <div className="flex items-center justify-center sm:justify-between sm:mt-2">
                 <div className="flex items-center">
                   <div className="flex flex-col">
@@ -38,23 +38,23 @@ const EventProfile = ({img,org,title,desc,start,end,url,backgroundColor,textColo
                       className="flex-auto my-3 text-sm"
                       style={{ color: textColor, fontFamily: "Inter" }}
                     >
-                      <span className="mr-3 font-bold inline-block">
+                      <span className="sm:mr-3 font-bold inline-block">
                         <AiOutlineCalendar
                           style={{ display: "inline" }}
                           className="mb-1"
                         />
                         {finalDate(start)} - {finalDate(end)}
                       </span>
-                      <div className="mt-3">
-                      <span className="font-bold">
+                      <div className=" flex sm:block flex-col sm:flex-none sm:mt-3">
+                      <span className="font-bold mt-3 sm:mt-0">
                         <FiUsers
                           style={{ display: "inline" }}
                           className="mb-1"
                         />{" "}
                         {org}
                       </span>
                       <span
-                        className="font-bold ml-2 md:ml-28 sm:ml-6"
+                        className="font-bold mt-3 sm:mt-0 ml-0 sm:ml-28"
                         style={{cursor:"pointer"}}
                         onClick={(e) => {
                           e.preventDefault();

diff --git a/src/components/dateFormat.jsx b/src/components/dateFormat.jsx
@@ -9,25 +9,36 @@ export const finalDate = (date) => {
   }
   const monthString = (num) => {
     const month = [
-      "January",
-      "February",
-      "March",
-      "April",
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
       "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
     ];
     return month[num];
   };
-  return ` ${getOrdinalNum(date.getDate())} ${monthString(
-    date.getMonth()
-  )} ${date.getHours()}:${date.getMinutes()}`;
+  return ` ${getOrdinalNum(date.getDate())} ${monthString(date.getMonth()
+  )} ${formatAMPM(date)}`;
 };
+export function formatAMPM(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0'+minutes : minutes;
+  hours = '0' + hours;
+  hours = hours.slice(-2)
+  var strTime = `${hours}:${minutes} ${ampm}`
+  return strTime;
+}
 
 export const getOrdinalNum = (n) => {
   return (

diff --git a/src/pages/Eventform/index.jsx b/src/pages/Eventform/index.jsx
@@ -12,7 +12,7 @@ import { postEvent } from "../../api/Request";
 const EventForm = () => {
   const [start, setStart] = useState(new Date());
   const [end, setEndDate] = useState(new Date());
-  const [img, setImg] = useState("https://i.imgur.com/GHdv67k.png");
+  const [img, setImg] = useState("https://i.imgur.com/rnyUp4J.gif");
   const [org, setOrg] = useState("Club/Chapter");
   const [title, setTitle] = useState("Event Title");
   const [cname, setCname] = useState("");

diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -36,7 +36,7 @@ const Home = () => {
     }
   }, [finalDate]);
   return (
-    <div className="md:mx-auto box">
+    <div className="md:mx-auto box overflow-x-hidden">
       <FullCalendar
         plugins={[dayGridPlugin, interactionPlugin, listPlugin]}
         events={events}
@@ -45,6 +45,7 @@ const Home = () => {
         eventAdd={events}
         eventDisplay={"block"}
         // slotLabelFormat={{hour:"numeric",minute:"numeric"}}
+        eventTimeFormat={{hour:"2-digit",minute:"numeric",omitZeroMinute:true}}
         customButtons={{
           eventform: {
             text: "Event Form",
@@ -85,9 +86,7 @@ const Home = () => {
         footerToolbar={
           isMobile
             ? {
-                start: "",
                 center: "customToday eventform",
-                end: "",
               }
             : false
         }

diff --git a/src/pages/Home/styles.css b/src/pages/Home/styles.css
@@ -137,8 +137,15 @@ table {
     background-color: #1F1C4F !important;
     padding: 10px !important;
 }
-
-
+.fc-footer-toolbar{
+    z-index:2 !important;
+    position:fixed !important;
+    bottom:0 !important;
+    width:100% !important;
+}
+.fc-header-toolbar{
+    padding:2px 10px !important;
+}
 
 .fc td,
 .fc th {