Building a Custom fullCalendar.io Component in Retool

As businesses continue to adapt to digital solutions, integrating seamless scheduling and event management functionalities within applications has become crucial. At ZeroCodez, we understand the importance of powerful, real-time calendar solutions. Today, we'll walk you through building a custom calendar component for Retool using fullCalendar.io, React, and TypeScript.

This extensive guide will take you from setting up your development environment to developing, testing, and finally deploying your custom calendar component. By the end of this tutorial, you will have a comprehensive calendar feature that not only enhances user interactivity but also integrates smoothly with your Retool applications.

Overview

The fullCalendar.io component is designed to offer a robust and efficient event management system. It provides various views such as month, week, and day, along with interactive features like event clicking and rendering. The following key features are covered in this guide:

• Event Management: Provides tools to manage events effectively.

• Multiple Views: Supports day, week, and month views.

• Responsive Design: Optimized for different screen sizes.

• Real-time Interactivity: Uses the interaction plugin for dynamic event handling.

Prerequisites

Ensure you have the following installed on your local machine:

• Node.js: The runtime environment for JavaScript.

• npm or yarn: The package managers for handling project dependencies.

• VSCode or another code editor: For writing and managing your code.

Step 1: Setting Up Your Development Environment

First, let's clone the custom component template repository and install the necessary dependencies.

Open your terminal in VSCode or another editor.

Clone the repository with the following command:

git clone https://github.com/tryretool/custom-component-collection-template new-custom-component

Navigate into the newly created directory:

cd new-custom-component

Install the required dependencies:

npm install

Log in to your Retool account:

npx retool-ccl login

You'll need your Retool account URL and API token for this step.

Initialize the custom component library:

npx retool-ccl init

Provide the component name (Full Calendar) and its description (fullCalendar.io dependency used in this). The package.json file will be updated automatically based on your inputs.

Step 2: Installing Additional Dependencies

To fully utilize the functionalities of fullCalendar.io, we need additional dependencies. Run the following command to install them:

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction moment prop-types react@latest react-dom@latest

Step 3: Setting Up Source Files

Now, create three new files within the src directory:

1. CalendarComponent.module.scss: For styling the calendar components.

2. CalendarComponent.tsx: The main React component that integrates FullCalendar.

3. CalendarWrapper.tsx: A wrapper component that connects the calendar with Retool's state management.

Step 4: Developing the Calendar Component

CalendarComponent.tsx

The CalendarComponent handles the core logic and rendering of the calendar. Here’s how to set it up:

import React, { useEffect, useState } from 'react';
import FullCalendar, { EventInput } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import moment from 'moment';
import styles from './CalendarComponent.module.scss';

interface CalendarComponentProps {
  eventsData: { title: string; start: string }[];
}

const CalendarComponent: React.FC<CalendarComponentProps> = ({ eventsData }) => {
  const [calendarEvents, setCalendarEvents] = useState<EventInput[]>([]);

  useEffect(() => {
    if (eventsData) {
      const formattedEvents: EventInput[] = eventsData.map((event) => ({
        title: event.title,
        start: moment(event.start).toDate(),
      }));
      setCalendarEvents(formattedEvents);
    }
  }, [eventsData]);

  const renderEventContent = (eventInfo: any) => {
    return (
      <div className={styles.eventContainer}>
        <p className={styles.eventTitle}>{eventInfo.event.title}</p>
      </div>
    );
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay',
      }}
      initialView="dayGridMonth"
      events={calendarEvents}
      eventContent={renderEventContent}
      eventClick={(info) => {
        console.log('Event clicked:', info.event);
      }}
    />
  );
};

export default CalendarComponent;

CalendarWrapper.tsx

The CalendarWrapper component connects the CalendarComponent with Retool’s state management, allowing dynamic data integration.

import React from 'react';
import { Retool } from '@tryretool/custom-component-support';
import CalendarComponent from './CalendarComponent';

interface CalendarEvent {
  title: string;
  start: string;
}

export const CalendarWrapper: React.FC = () => {
  const [calendarEventData] = Retool.useStateArray<CalendarEvent>({
    name: 'calendarEventData',
  });

  if (!calendarEventData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <CalendarComponent eventsData={calendarEventData} />
    </div>
  );
};

CalendarComponent.module.scss

Enhance the visual appeal of your calendar component by adding appropriate styles.

.eventContainer {
  width: 100%;
  border: 2px solid #2d67b1;
}

.eventTitle {
  color: #41b54a;
  text-align: center;
  font-size: 20px;
}

Step 5: Updating index.tsx

Make sure to export the CalendarWrapper component from index.tsx:

export { CalendarWrapper } from './CalendarWrapper';

Step 6: Running the Development Server

Now, start the development server to test your component:

npx retool-ccl dev

This will initiate the development server and enable you to see your custom component within Retool. To verify, open Retool and navigate to Settings > Custom Component Libraries. Ensure your library name is listed.

Step 7: Adding the Component to a Retool Application

1. Create a new app within Retool.

2. Add a new component by searching for its name (Full Calendar), and drag and drop it into your app container.

3. To test with static data, create a query that returns sample event data:

const data = [
  { title: "test1", start: "2024-06-04" },
  { title: "test2", start: "2024-06-30" },
  { title: "test3", start: "2024-06-22" }
];
return data;

4. Pass this query result into the component as calendarEventdata.

Step 8: Testing and Deployment

After thoroughly testing your component, deploy it with:

npx retool-ccl deploy

This will make the FullCalendar component accessible across all your Retool applications.

View fullsize

Conclusion

Integrating a powerful, real-time calendar feature like fullCalendar.io into your Retool application can significantly enhance user experience and operational efficiency. By following this detailed guide, you can develop a custom calendar component that adapts to your specific needs and enhances your application's functionality.

At ZeroCodez, we are committed to providing robust solutions and simplifying complex development processes. If you have any questions or need further assistance, don’t hesitate to reach out. Explore our comprehensive range of services to fully realize your application's potential.