Allow events to have a "TBD" or "All Day" time

.github/ISSUE_TEMPLATE/add-to-calendar.yml

@@ -1,13 +1,13 @@
 name: 💁🏽‍♀️ Add an event for maintainers to the calendar 🎙
 description: Use this form to add an event for maintainers or highlighting maintainers to the Maintainer Month calendar.
-title: "EVENT_NAME"
+title: 'EVENT_NAME'
 
 body:
   - type: markdown
     attributes:
       value: |
         :tada: Thanks for letting us know about an upcoming event! :tada:
-        
+
         Use this form to add an event for maintainers or highlighting maintainers to the Maintainer Month calendar. Your request will be reviewed within 72 hours.
 
   - id: eventname
@@ -16,36 +16,44 @@ body:
       label: Event Name
     validations:
       required: true
-      
+
   - id: date
     type: input
     attributes:
       label: Event Date
-      placeholder: "MM/DD"
+      placeholder: 'MM/DD'
     validations:
       required: true
 
+  - id: endDate
+    type: input
+    attributes:
+      label: Event End Date
+      placeholder: 'MM/DD'
+    validations:
+      required: false
+
   - id: UTCStartTime
     type: input
     attributes:
       label: Start time in UTC
-      placeholder: "14:00"
+      placeholder: '14:00'
     validations:
       required: true
 
   - id: UTCEndTime
     type: input
     attributes:
       label: End time in UTC
-      placeholder: "15:00"
+      placeholder: '15:00'
     validations:
       required: true
 
   - id: type
     type: dropdown
     attributes:
       label: Event Type
-      description: "Type of event"
+      description: 'Type of event'
       options:
         - conference
         - podcast
@@ -61,15 +69,15 @@ body:
     type: input
     attributes:
       label: Event Language
-      description: "Primary language of the event (e.g., English, Spanish, Mandarin)"
+      description: 'Primary language of the event (e.g., English, Spanish, Mandarin)'
     validations:
       required: true
 
   - id: location
     type: input
     attributes:
       label: Event Location
-      description: "Primary location of the event - either Virtual or a City + Country"
+      description: 'Primary location of the event - either Virtual or a City + Country'
     validations:
       required: true
 
@@ -85,25 +93,25 @@ body:
     type: input
     attributes:
       label: Event URL
-      description: "Web URL of event"
-      placeholder: "https://"
+      description: 'Web URL of event'
+      placeholder: 'https://'
 
   - id: eventdescription
     type: textarea
     attributes:
       label: Event Description
-      description: "What is this event about?"
-  
+      description: 'What is this event about?'
+
   - id: expectedparticipants
     type: input
     attributes:
       label: Participants
-      description: "Expected number of participants"
-      placeholder: "###"
-  
+      description: 'Expected number of participants'
+      placeholder: '###'
+
   - id: expectedmaintainers
     type: input
     attributes:
       label: Maintainers
-      description: "Expected number of maintainers participating"
-      placeholder: "###"
+      description: 'Expected number of maintainers participating'
+      placeholder: '###'

api/events.js

@@ -14,7 +14,7 @@ dayjs.extend(timezone)
 const TBD = 'TBD'
 
 export const getEvents = (year) => {
-  const events_path = year ? `content/${year}/events` : 'content/events';
+  const events_path = year ? `content/${year}/events` : 'content/events'
   const eventFiles = fs.readdirSync(events_path)
 
   const events = eventFiles
@@ -30,13 +30,15 @@ export const getEvents = (year) => {
 }
 
 export const getEventBySlug = (slug, year) => {
-  const event = getDataFromMD(year?`content/${year}/events/${slug}.md`:`content/events/${slug}.md`)
-  const link = year? `/${year}/schedule/${slug}` : `/schedule/${slug}`;
+  const event = getDataFromMD(
+    year ? `content/${year}/events/${slug}.md` : `content/events/${slug}.md`,
+  )
+  const link = year ? `/${year}/schedule/${slug}` : `/schedule/${slug}`
 
   return {
     slug,
     ...event,
-    link
+    link,
   }
 }
 
@@ -59,6 +61,7 @@ export const parseEvent = (event) => {
     event.date,
     event.UTCStartTime,
     event.UTCEndTime,
+    event.endDate,
   )
 
   return {
@@ -68,9 +71,14 @@ export const parseEvent = (event) => {
 }
 
 // TODO: refactor
-const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
+const formatEventDateTime = (
+  startDate = dayjs.utc(),
+  startTime,
+  endTime,
+  endDate,
+) => {
   // Date
-  const [month, day] = date.split('/')
+  const [month, day] = startDate.split('/')
 
   if (isNaN(month) || isNaN(day)) {
     throw new TypeError('date must be in mm/dd format (e.g. 06/12).')
@@ -80,61 +88,78 @@ const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
     .utc()
     .date(day)
     .month(month - 1)
+
   const formattedDate = UTCDate.format('MMM D')
 
+  let formattedEndDate = null
+
+  if (endDate && endDate !== startDate) {
+    const [endMonth, endDay] = endDate.split('/')
+
+    if (isNaN(endMonth) || isNaN(endDay)) {
+      throw new TypeError('date must be in mm/dd format (e.g. 06/12).')
+    }
+
+    const endUTCDate = dayjs
+      .utc()
+      .date(endDay)
+      .month(endMonth - 1)
+
+    formattedEndDate = endUTCDate.format('MMM D')
+  }
+
   // Start time
-  let formattedStartTime = {}
+  let formattedStartTime = {
+    utc: TBD,
+    pt: TBD,
+  }
 
-  if (startTime && startTime !== TBD) {
+  if (startTime) {
     const [startHour, startMinute] = startTime.split(':')
 
     const UTCStartTime = UTCDate.hour(startHour).minute(startMinute)
 
-    if (isNaN(UTCStartTime)) {
-      throw new TypeError(
-        'UTCStartTime must be in hh:mm format (e.g. 12:30) or be "TDB".',
-      )
-    }
-
-    const PTStartTime = UTCStartTime.tz('America/Los_Angeles')
+    if (!isNaN(UTCStartTime)) {
+      const PTStartTime = UTCStartTime.tz('America/Los_Angeles')
 
-    const formattedUTCStartTime = UTCStartTime.format('HH:mm a')
-    const formattedPTStartTime = PTStartTime.format('HH:mm a')
+      const formattedUTCStartTime = UTCStartTime.format('HH:mm a')
+      const formattedPTStartTime = PTStartTime.format('HH:mm a')
 
-    formattedStartTime = {
-      utc: formattedUTCStartTime,
-      pt: formattedPTStartTime,
+      formattedStartTime = {
+        utc: formattedUTCStartTime,
+        pt: formattedPTStartTime,
+      }
     }
   }
 
   // End time
-  let formattedEndTime = {}
+  let formattedEndTime = {
+    utc: TBD,
+    pt: TBD,
+  }
 
   if (endTime && endTime !== TBD) {
     const [endHour, endMinute] = endTime.split(':')
 
     const UTCEndTime = UTCDate.hour(endHour).minute(endMinute)
 
-    if (isNaN(UTCEndTime)) {
-      throw new TypeError(
-        'UTCEndTime must be in hh:mm format (e.g. 12:30) or be "TDB".',
-      )
-    }
-
-    const PTEndTime = UTCEndTime.tz('America/Los_Angeles')
+    if (!isNaN(UTCEndTime)) {
+      const PTEndTime = UTCEndTime.tz('America/Los_Angeles')
 
-    const formattedUTCEndTime = UTCEndTime.format('HH:mm a')
-    const formattedPTEndTime = PTEndTime.format('HH:mm a')
+      const formattedUTCEndTime = UTCEndTime.format('HH:mm a')
+      const formattedPTEndTime = PTEndTime.format('HH:mm a')
 
-    formattedEndTime = {
-      utc: formattedUTCEndTime,
-      pt: formattedPTEndTime,
+      formattedEndTime = {
+        utc: formattedUTCEndTime,
+        pt: formattedPTEndTime,
+      }
     }
   }
 
   return {
     date: formattedDate,
     startTime: formattedStartTime,
     endTime: formattedEndTime,
+    endDate: formattedEndDate,
   }
 }

components/events-list/EventsList.jsx

@@ -12,16 +12,20 @@ import DateTimeChip from '../date-time-chip/DateTimeChip'
 import EventTypeChip from '../event-type-chip/EventTypeChip'
 import PlayLink from '../play-link/PlayLink'
 import Chip from '../chip/Chip'
-
 const EventsList = ({ events }) => {
+  const dateLabel = (event) =>
+    `${event.formattedDate.date} to ${event.formattedDate.endDate}`
+
   return (
     <section className="events-list">
       <div className="events-list__header">
         <div className="events-list__header-content">
           <h1 className="events-list__title">{getLiteral('schedule:title')}</h1>
-          <p className="events-list__subtitle">{getLiteral('schedule:description')}</p>
-          <ButtonLink 
-            href="https://github.com/github/maintainermonth/issues/new?template=add-to-calendar.yml" 
+          <p className="events-list__subtitle">
+            {getLiteral('schedule:description')}
+          </p>
+          <ButtonLink
+            href="https://github.com/github/maintainermonth/issues/new?template=add-to-calendar.yml"
             isExternal={true}
             className="events-list__add-button"
           >
@@ -39,7 +43,11 @@ const EventsList = ({ events }) => {
             })}
           >
             <div className="events-list__date">
-              <Chip label={event.formattedDate.date} />
+              {event.formattedDate.endDate ? (
+                <Chip label={dateLabel(event)} />
+              ) : (
+                <Chip label={event.formattedDate.date} />
+              )}
             </div>
 
             <div className="events-list__event">
@@ -68,7 +76,7 @@ const EventsList = ({ events }) => {
               </div>
 
               <div className="events-list__info">
-                <p 
+                <p
                   className="events-list__text"
                   dangerouslySetInnerHTML={{
                     __html: md().render(event.description || ''),
@@ -80,7 +88,7 @@ const EventsList = ({ events }) => {
         ))}
       </div>
     </section>
-  );
-};
+  )
+}
 
-export default EventsList;
+export default EventsList