.gitignore

@@ -1,8 +1,3 @@
 node_modules/
 */node_modules/
 */build/
-
-**/node_modules/
-**/build/
-.DS_Store
-.env

backend/src/db/api/events.js

@@ -268,6 +268,24 @@ module.exports = class EventsDBApi {
         };
       }
 
+      if (filter.calendarStart && filter.calendarEnd) {
+        where = {
+          ...where,
+          [Op.or]: [
+            {
+              start_date: {
+                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+              },
+            },
+            {
+              end_date: {
+                [Op.between]: [filter.calendarStart, filter.calendarEnd],
+              },
+            },
+          ],
+        };
+      }
+
       if (filter.start_dateRange) {
         const [start, end] = filter.start_dateRange;
 

backend/src/db/seeders/20231127130745-sample-data.js

@@ -65,42 +65,6 @@ const CustomersData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    first_name: 'Bob',
-
-    last_name: 'Brown',
-
-    email: 'bob.brown@example.com',
-
-    vat_number: '321654987',
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
-
-  {
-    first_name: 'Charlie',
-
-    last_name: 'Davis',
-
-    email: 'charlie.davis@example.com',
-
-    vat_number: '654321789',
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
 ];
 
 const EmailCampaignsData = [
@@ -139,30 +103,6 @@ const EmailCampaignsData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    template: 'Tax Season Preparation Guide',
-
-    scheduled_date: new Date('2023-11-20T08:00:00Z'),
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
-
-  {
-    template: 'Retirement Planning Essentials',
-
-    scheduled_date: new Date('2023-11-25T08:00:00Z'),
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
 ];
 
 const EventsData = [
@@ -213,38 +153,6 @@ const EventsData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    title: 'Retirement Planning Session',
-
-    note: 'Plan for retirement savings and investments.',
-
-    start_date: new Date('2023-11-15T13:00:00Z'),
-
-    end_date: new Date('2023-11-15T14:30:00Z'),
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
-
-  {
-    title: 'Insurance Policy Review',
-
-    note: 'Evaluate current insurance coverage.',
-
-    start_date: new Date('2023-11-20T11:00:00Z'),
-
-    end_date: new Date('2023-11-20T12:00:00Z'),
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_one" field
-  },
 ];
 
 const TagsData = [
@@ -265,39 +173,19 @@ const TagsData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    name: 'Newsletter Subscriber',
-
-    // type code here for "relation_one" field
-  },
-
-  {
-    name: 'Long-term Client',
-
-    // type code here for "relation_one" field
-  },
 ];
 
 const DonderoorganizationData = [
   {
-    name: 'Karl Landsteiner',
+    name: 'Edward O. Wilson',
   },
 
   {
-    name: 'Leonard Euler',
+    name: 'Frederick Gowland Hopkins',
   },
 
   {
-    name: 'John von Neumann',
+    name: 'Stephen Hawking',
-  },
-
-  {
-    name: 'Gregor Mendel',
-  },
-
-  {
-    name: 'Charles Sherrington',
   },
 ];
 
@@ -336,28 +224,6 @@ async function associateUserWithDonderoorganization() {
   if (User2?.setDonderoorganization) {
     await User2.setDonderoorganization(relatedDonderoorganization2);
   }
-
-  const relatedDonderoorganization3 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const User3 = await Users.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (User3?.setDonderoorganization) {
-    await User3.setDonderoorganization(relatedDonderoorganization3);
-  }
-
-  const relatedDonderoorganization4 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const User4 = await Users.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (User4?.setDonderoorganization) {
-    await User4.setDonderoorganization(relatedDonderoorganization4);
-  }
 }
 
 async function associateCustomerWithSupervisor() {
@@ -393,28 +259,6 @@ async function associateCustomerWithSupervisor() {
   if (Customer2?.setSupervisor) {
     await Customer2.setSupervisor(relatedSupervisor2);
   }
-
-  const relatedSupervisor3 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Customer3 = await Customers.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Customer3?.setSupervisor) {
-    await Customer3.setSupervisor(relatedSupervisor3);
-  }
-
-  const relatedSupervisor4 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Customer4 = await Customers.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Customer4?.setSupervisor) {
-    await Customer4.setSupervisor(relatedSupervisor4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -454,28 +298,6 @@ async function associateCustomerWithDonderoorganization() {
   if (Customer2?.setDonderoorganization) {
     await Customer2.setDonderoorganization(relatedDonderoorganization2);
   }
-
-  const relatedDonderoorganization3 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Customer3 = await Customers.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Customer3?.setDonderoorganization) {
-    await Customer3.setDonderoorganization(relatedDonderoorganization3);
-  }
-
-  const relatedDonderoorganization4 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Customer4 = await Customers.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Customer4?.setDonderoorganization) {
-    await Customer4.setDonderoorganization(relatedDonderoorganization4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -515,28 +337,6 @@ async function associateEmailCampaignWithDonderoorganization() {
   if (EmailCampaign2?.setDonderoorganization) {
     await EmailCampaign2.setDonderoorganization(relatedDonderoorganization2);
   }
-
-  const relatedDonderoorganization3 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const EmailCampaign3 = await EmailCampaigns.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (EmailCampaign3?.setDonderoorganization) {
-    await EmailCampaign3.setDonderoorganization(relatedDonderoorganization3);
-  }
-
-  const relatedDonderoorganization4 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const EmailCampaign4 = await EmailCampaigns.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (EmailCampaign4?.setDonderoorganization) {
-    await EmailCampaign4.setDonderoorganization(relatedDonderoorganization4);
-  }
 }
 
 async function associateEventWithCustomer() {
@@ -572,28 +372,6 @@ async function associateEventWithCustomer() {
   if (Event2?.setCustomer) {
     await Event2.setCustomer(relatedCustomer2);
   }
-
-  const relatedCustomer3 = await Customers.findOne({
-    offset: Math.floor(Math.random() * (await Customers.count())),
-  });
-  const Event3 = await Events.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Event3?.setCustomer) {
-    await Event3.setCustomer(relatedCustomer3);
-  }
-
-  const relatedCustomer4 = await Customers.findOne({
-    offset: Math.floor(Math.random() * (await Customers.count())),
-  });
-  const Event4 = await Events.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Event4?.setCustomer) {
-    await Event4.setCustomer(relatedCustomer4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -631,28 +409,6 @@ async function associateEventWithDonderoorganization() {
   if (Event2?.setDonderoorganization) {
     await Event2.setDonderoorganization(relatedDonderoorganization2);
   }
-
-  const relatedDonderoorganization3 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Event3 = await Events.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Event3?.setDonderoorganization) {
-    await Event3.setDonderoorganization(relatedDonderoorganization3);
-  }
-
-  const relatedDonderoorganization4 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Event4 = await Events.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Event4?.setDonderoorganization) {
-    await Event4.setDonderoorganization(relatedDonderoorganization4);
-  }
 }
 
 async function associateTagWithDonderoorganization() {
@@ -688,28 +444,6 @@ async function associateTagWithDonderoorganization() {
   if (Tag2?.setDonderoorganization) {
     await Tag2.setDonderoorganization(relatedDonderoorganization2);
   }
-
-  const relatedDonderoorganization3 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Tag3 = await Tags.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Tag3?.setDonderoorganization) {
-    await Tag3.setDonderoorganization(relatedDonderoorganization3);
-  }
-
-  const relatedDonderoorganization4 = await Donderoorganization.findOne({
-    offset: Math.floor(Math.random() * (await Donderoorganization.count())),
-  });
-  const Tag4 = await Tags.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Tag4?.setDonderoorganization) {
-    await Tag4.setDonderoorganization(relatedDonderoorganization4);
-  }
 }
 
 module.exports = {

frontend/json/runtimeError.json

@@ -1 +0,0 @@
-{}

frontend/src/components/Events/TableEvents.tsx

@@ -20,7 +20,10 @@ import _ from 'lodash';
 import dataFormatter from '../../helpers/dataFormatter';
 import { dataGridStyles } from '../../styles';
 
-const perPage = 10;
+import BigCalendar from '../BigCalendar';
+import { SlotInfo } from 'react-big-calendar';
+
+const perPage = 100;
 
 const TableSampleEvents = ({
   filterItems,
@@ -98,6 +101,12 @@ const TableSampleEvents = ({
     setIsModalTrashActive(false);
   };
 
+  const handleCreateEventAction = ({ start, end }: SlotInfo) => {
+    router.push(
+      `/events/events-new?dateRangeStart=${start.toISOString()}&dateRangeEnd=${end.toISOString()}`,
+    );
+  };
+
   const handleDeleteModalAction = (id: string) => {
     setId(id);
     setIsModalTrashActive(true);
@@ -461,7 +470,27 @@ const TableSampleEvents = ({
         <p>Are you sure you want to delete this item?</p>
       </CardBoxModal>
 
-      {dataGrid}
+      {!showGrid && (
+        <BigCalendar
+          events={events}
+          showField={'title'}
+          start-data-key={'start_date'}
+          end-data-key={'end_date'}
+          handleDeleteAction={handleDeleteModalAction}
+          pathEdit={`/events/events-edit/?id=`}
+          pathView={`/events/events-view/?id=`}
+          handleCreateEventAction={handleCreateEventAction}
+          onDateRangeChange={(range) => {
+            loadData(
+              0,
+              `&calendarStart=${range.start}&calendarEnd=${range.end}`,
+            );
+          }}
+          entityName={'events'}
+        />
+      )}
+
+      {showGrid && dataGrid}
 
       {selectedRows.length > 0 &&
         createPortal(

frontend/src/pages/events/events-list.tsx

@@ -131,6 +131,10 @@ const EventsTablesPage = () => {
           <div className='md:inline-flex items-center ms-auto'>
             <div id='delete-rows-button'></div>
           </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/events/events-table'}>Switch to Table</Link>
+          </div>
         </CardBox>
 
         <CardBox className='mb-6' hasTable>

frontend/src/pages/events/events-new.tsx

@@ -52,6 +52,9 @@ const EventsNew = () => {
   const router = useRouter();
   const dispatch = useAppDispatch();
 
+  // get from url params
+  const { dateRangeStart, dateRangeEnd } = router.query;
+
   const handleSubmit = async (data) => {
     await dispatch(create(data));
     await router.push('/events/events-list');
@@ -71,7 +74,16 @@ const EventsNew = () => {
         </SectionTitleLineWithButton>
         <CardBox>
           <Formik
-            initialValues={initialValues}
+            initialValues={
+              dateRangeStart && dateRangeEnd
+                ? {
+                    ...initialValues,
+                    start_date:
+                      moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
+                    end_date: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
+                  }
+                : initialValues
+            }
             onSubmit={(values) => handleSubmit(values)}
           >
             <Form>

frontend/src/pages/events/events-table.tsx

@@ -132,7 +132,7 @@ const EventsTablesPage = () => {
             <div id='delete-rows-button'></div>
 
             <Link href={'/events/events-list'}>
-              Back to <span className='capitalize'>table</span>
+              Back to <span className='capitalize'>calendar</span>
             </Link>
           </div>
         </CardBox>