Hi, Deion here.

This is a custom Full Calendar component I recreated based on 0xBoom's version, which I originally discovered in a GitHub discussion about Full Calendar components made with ShadCN. Since many people are eagerly awaiting the release of his version, I decided to create a similar one that includes both month and year views. While it may not yet have all of 0xBoom's features, I aimed to replicate the functionality as closely as possible. Looking forward to the official release! 🚀

Feel free to contribute to the project by submitting a pull request or opening an issue on the GitHub repository.

If you have any questions or suggestions, feel free to reach out to me on Twitter @Deion_Dz.

You can further customize the Full Calender component by creating a config file and adding it to the component. Follow the config file given in the code to add changes to your full calender.

The config file contains the following options:

"use client";
import { CalendarProps } from "@shadcn-fullcalender/types/event";


export const calendarConfig: CalendarProps['config'] = {
    addEventConfig: {
        variant: 'primary', // Default variant (can be 'primary', 'secondary', etc.)
        buttonText: 'Add Event', // Default button text
        formTitle: 'Create a New Event', // Default form title
        formDescription: 'Testing', // Default form description
        icon: undefined, // Custom icon for the add event button, if needed
        customForm: undefined, // Custom form component to handle add event functions, if needed
    },
    animationConfig: {
        duration: 300, // Default animation duration in milliseconds
    },
};

Pass the events and config to the FullCalender component to render the calendar.

<FullCalender events={newevents} config={calendarConfig} />