The Modern React Calendar Library

Eventar is a modern and easy-to-use calendar library for React, built with tailwindcss and framer-motion. Fully customizable and supports multiple views.

Playground

This is a playground area where you can play with the calendar library.

Props

Year Range

2025
2027
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030

Spinner Variant

Default Modal Configs

Loading...

Code Snippet

import { Eventar, SpinnerVariant } from "eventar";
import "eventar/dist/eventar.css";

const Calendar = () => (
  <Eventar
    events={sampleEvents}
    isLoading={false}
    error={error ?? ""}
    navigation={true}
    views={["day","week","month","year"]}
    defaultView="month"
    yearRange={["2024","2025"]}
    showPastDates={false}
    theme="light"
    spinnerComponent={SpinnerVariant.BARS}
    showAgenda={false}
    defaultModalConfig={{
      "showModalHeaderStrip": true,
      "disableActionButton": false,
      "actionButtonName": "Custom Action",
      "titleStyles": "text-2xl font-bold text-gray-800"
    }}
  />
);

export default Calendar;
JavaScript

Custom Modals Examples

Here are some examples of custom modals that you can use in your project.

Compact Event Modal

A compact event modal to display event details.

Code Snippet

import { 
Eventar,
SpinnerVariant,
Modals
} from "eventar";
import "eventar/dist/eventar.css";

const Calendar = () => (
  <Eventar
    events={sampleEvent}
    isLoading={isloading}
    error={error ?? ""}
    navigation={true}
    views={["day", "week", "month", "year"]}
    defaultView="month"
    yearRange={["2025", "2024"]}
    showPastDates={true}
    theme="light"
    spinnerComponent={SpinnerVariant.BARS}
    showAgenda={true}
    customEventViewer={(event) => {
      <Modals.Compact event={event} />;
    }}
  />
);

export default Calendar;
JavaScript

Card Event Modal

A card event modal to display event details.

Code Snippet

import { 
Eventar,
SpinnerVariant,
Modals
} from "eventar";
import "eventar/dist/eventar.css";

const Calendar = () => (
  <Eventar
    events={sampleEvent}
    isLoading={isloading}
    error={error ?? ""}
    navigation={true}
    views={["day", "week", "month", "year"]}
    defaultView="month"
    yearRange={["2025", "2024"]}
    showPastDates={true}
    theme="light"
    spinnerComponent={SpinnerVariant.BARS}
    showAgenda={true}
    customEventViewer={(event) => {
      <Modals.Card event={event} />;
    }}
  />
);

export default Calendar;
JavaScript

Simple Event Modal

A simple event modal to display event details.

Code Snippet

import { 
Eventar,
SpinnerVariant,
Modals
} from "eventar";
import "eventar/dist/eventar.css";

const Calendar = () => (
  <Eventar
    events={sampleEvent}
    isLoading={isloading}
    error={error ?? ""}
    navigation={true}
    views={["day", "week", "month", "year"]}
    defaultView="month"
    yearRange={["2025", "2024"]}
    showPastDates={true}
    theme="light"
    spinnerComponent={SpinnerVariant.BARS}
    showAgenda={true}
    customEventViewer={(event) => {
      <Modals.Simple event={event} />;
    }}
  />
);

export default Calendar;
JavaScript

Hooks

Here are some examples of hooks that you can use in your project.

useEvents

Description

The useEvents hook is a custom React hook designed to simplify the management of calendar events fetched from an API endpoint. It provides a comprehensive solution for handling asynchronous data fetching, complete with loading states, error handling, and data transformation capabilities. The hook accepts configuration options including the API endpoint, an optional delay for testing purposes, initial events data, and a data transformation function. It returns an object containing the current events array, loading state, error information, a refresh function for manual data fetching, and a setter function for direct events manipulation.

Parameters

endpointrequired

API endpoint to fetch events

Type: string
refactorDataoptional

Transform API data to calendar events

Type: (data: T[]) => CalendarEvent[]
delayoptional

Delay before fetching (in ms)

Type: number

Return Values

eventsArray of calendar events
isLoadingLoading state indicator
errorError message if fetch fails
refreshFunction to refetch events

Code Snippet

import { Eventar, useEvents } from "eventar";
import "eventar/dist/eventar.css";

interface myData {
  id: string;
  meetingId: string | number;
  seriesId: string | number;
  title: string;
  link: string;
  start_timestamp: string;
  end_timestamp: string;
}

const Calendar = () => {
  const { events, isLoading, error } = useEvents<myData>({
    endpoint: "your-api-endpoint",
    refactorData: (data) => {
      return data.map((item, index) => {
        return {
          id: index.toString(),
          meeting_id: item.meetingId,
          series_id: item.seriesId,
          title: item.title,
          meetingLink: item.link,
          start: new Date(item.start_timestamp),
          end: new Date(item.end_timestamp),
        };
    });
  },
  delay: 1000,
});

  return (
    <Eventar 
    events={events}
    isLoading={isLoading}
    error={error ?? ""}
    views={["month"]}
    />
  );
};

export default Calendar;
JavaScript

useResources

Description

The useResources hook is a custom React hook designed to simplify the management of calendar mapped resources fetched from an API endpoint. It provides a comprehensive solution for handling asynchronous data fetching, complete with loading states, error handling. The hook accepts configuration options including the API endpoint, an optional delay for testing purposes. It returns an object containing the current resources array, loading state, error information, a refresh function for manual data fetching.

Parameters

endpointrequired

API endpoint to fetch resources

Type: string
delayoptional

Delay before fetching (in ms)

Type: number

Return Values

resourcesArray of calendar resources
isLoadingLoading state indicator
errorError message if fetch fails
refreshFunction to refetch resources

Code Snippet

import { Eventar, useEvents } from "eventar";
import "eventar/dist/eventar.css";

const Calendar = () => {
  const { resources, isLoading, error } = useResources({
    endpoint: "your-api-endpoint",
    delay: 1000,
});

  return (
    <Eventar 
    events={events}
    resources={resources}
    isLoading={isLoading}
    error={error ?? ""}
    views={["month"]}
    />
  );
};

export default Calendar;
JavaScript

Version History

Here is the version history of the project.

February 24, 2025

v1.0.3

  • Fixed: Readme documentation.
  • Added: Clock in the header.
  • Added: Resources Management through events mapping.
  • Added: Resources fetching hook.
  • UI/UX: Improvements in overall design.
  • Added: Special days highlighting.
February 15, 2025

v1.0.2

  • Fixed: Readme documentation.
  • Fixed: Event rendering issue in week view.
  • Added: Custom modal examples.
  • Enhanced: Event management.
  • UI/UX: Improvements in modals.
February 10, 2025

v1.0.1

  • Fixed: Days header in month view.
  • Fixed: Event rendering issue in week view.
  • Fixed: Readme documentation.
  • Basic UI improvements.
  • Added: Agenda view for event listing.
February 08, 2025

v1.0.0

  • Initial Release of package on npm registry.
  • Basic features like calendar views, Light/Dark mode, and event management.

Contribute & Support

Contribution

We value community involvement! Whether you'd like to submit a pull request, report a bug, or suggest new features, your contributions help make this project better. Join our growing community of developers and help shape the future of Eventar.

Support

Need assistance? Our community is here to help! If you encounter any issues or have questions about implementing Eventar, please reach out through our GitHub issues. We strive to provide timely and helpful responses to all inquiries.

Eventar

Eventar is a simple, lightweight, and customizable calendar event library for React, built with Tailwind CSS and Framer Motion.

Made with ❤️ by Yasir Mansoori

npmGitHub

© 2025 Eventar. All rights reserved.