add calendar button

app/components/conferences/eventPoster/components/EventStrip.js

@@ -1,7 +1,17 @@
 import { useState, useEffect } from 'react';
-import { Badge, Button, Col, Container, Row } from 'react-bootstrap';
+import {
+  Badge,
+  Button,
+  Col,
+  Container,
+  Row,
+  Dropdown,
+  ButtonGroup,
+} from 'react-bootstrap';
 import { GoLocation } from 'react-icons/go';
 import styles from '../styles/index.module.css';
+import { atcb_action } from 'add-to-calendar-button';
+import { BiCalendarPlus } from 'react-icons/bi';
 
 function EventStrip({
   event,
@@ -15,6 +25,7 @@ function EventStrip({
   const [timezone, setTimezone] = useState('');
   const [startDate, setStartDate] = useState(event.attributes['starts-at']);
   const [endDate, setEndDate] = useState(event.attributes['ends-at']);
+  const [config, setConfig] = useState({});
 
   useEffect(() => {
     // Fetch the timezone from the user's browser
@@ -35,6 +46,28 @@ function EventStrip({
 
     setStartDate(`${new Date(start).toLocaleTimeString('en-US', options)}`);
     setEndDate(`${new Date(end).toLocaleTimeString('en-US', options)}`);
+
+    const config = {
+      name: event?.attributes['name'],
+      description: event?.attributes['description'],
+      startDate: '2024-03-25',
+      startTime: '11:00',
+      endTime: '14:30',
+      organizer: 'Rocket.Chat|[email protected]',
+      location: 'https://meet.google.com/dbt-czaj-whr',
+      options: [
+        'Apple',
+        'Google',
+        'iCal',
+        'Microsoft365',
+        'MicrosoftTeams',
+        'Outlook.com',
+        'Yahoo',
+      ],
+      iCalFileName: 'rocket-chat-gsoc-alumni-summit-2024',
+    };
+
+    setConfig(config);
   }, [event.attributes['starts-at'], event.attributes['ends-at'], timezone]);
 
   return (
@@ -47,24 +80,35 @@ function EventStrip({
         <Col style={{ overflow: 'auto' }}>{event.attributes.name}</Col>
         <Col
           xs={2}
-          md={1}
-          xl={1}
-          sm={1.5}
-          xxl={1}
+          md={1.5}
+          xl={0.5}
+          sm={2}
+          xxl={1.5}
           className="event-join-button"
         >
           {showMainstage ? (
-            <Button size="sm" onClick={handleJoin}>
-              Join
-            </Button>
+            <>
+              <Button size="sm" onClick={handleJoin}>
+                Join
+              </Button>
+            </>
           ) : (
-            <Button
-              size="sm"
-              href={customLink || `/conferences/greenroom/${eid}`}
-              target="_blank"
-            >
-              Join
-            </Button>
+            <ButtonGroup>
+              <Button
+                size="sm"
+                href={customLink || `/conferences/greenroom/${eid}`}
+                target="_blank"
+              >
+                Join
+              </Button>
+              <Button
+                variant={'light'}
+                size="sm"
+                onClick={() => atcb_action(config)}
+              >
+                <BiCalendarPlus color="#ff6a71" />
+              </Button>
+            </ButtonGroup>
           )}
         </Col>
       </Row>

app/package.json

@@ -17,6 +17,7 @@
     "@jitsi/react-sdk": "^1.0.0",
     "@rocket.chat/icons": "^0.31.3",
     "@rocket.chat/sdk": "^1.0.0-alpha.42",
+    "add-to-calendar-button": "^2.6.9",
     "axios": "^0.26.1",
     "bootstrap": "^5.1.3",
     "crypto-js": "^4.1.1",
@@ -54,4 +55,4 @@
   "volta": {
     "node": "16.4.0"
   }
-}
+}