Schedulio NPM | npm.io

schedulio

Highly designed, optimized and extensible react schedule component.

Introduction

A powerful and versatile scheduling solution designed to simplify your life. With its highly extensible architecture, stunningly beautiful UI, and meticulously optimized codebase, managing your events has never been easier.

Schedulio Images

Light mode schedule

Dark mode schedule

Features

Highly Extensible: Our component is designed with flexibility in mind, allowing you to effortlessly incorporate your custom components and themes. It's your canvas to create the scheduling tool that suits your vision.
Beautiful UI: Enjoy a visually appealing and intuitive UI that enhances the scheduling experience, while the extensibility ensures it remains in line with your brand and requirements.
Efficient Performance: Our codebase is optimized for efficiency, even when handling substantial event data. Your schedules remain responsive and performant.
User-Friendly Integration: Whether you're an experienced React developer or new to the framework, our component is designed to be straightforward to integrate, saving you time and effort.

Install

To use schedulio, you can install it via npm or from GitHub Repository. Choose the option that suits your project's requirements.

NPM

If you are using a package manager like npm you can easily install schedulio by running the following command:

npm install schedulio

NOTE:If schedulio isn't functioning correctly in your React TypeScript project, consider restarting it.

Quickstart

import React from "react";
import { useSchedule } from "schedulio";

const FunctionComponentExample = () => {
  /*
   *NOTE: The current version of Schedulio only works with 24H time format
   *NOTE: StartHour and EndHour of the schedule can be only a round time => 8 15:00
   *NOTE: can't be 15:15 in this case a round function run to transform your endHour(15:30) to 16:00
   */
  const events = [
    {
      object: "first event",
      description: "will be a boring event",
      startHour: "15:00", // 24H Format equal to 3PM
      duration: 60, // minutes
      day: "Tue",
      id: "unique ID_6565658",
    },
  ];
  const { Schedule, currentEvents } = useSchedule({
    defaultEvents: events,
    startHour: "8:00",
    endHour: "17:00",
  });

  return (
    <div style={{ width: "100%" }}>
      <Schedule />
    </div>
  );
};

export default FunctionComponentExample;

Params

Params of useSchedule Hook

Param	Type	Description	default value	Required
`startHour`	string	can be only a round time like '8:00','8'	"00:00"	not required
`endHour`	string	can be only a round time like '15:00','15'	"23:00"	not required
`days`	string[]	specify the days of the schedule	"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"	not required
`defaultEvents`	Event[]		[]	not required
`startDate`	date	date of the first day in the schedule header	Current Date	not required
`IDGenerator`	function	Function that return `id` to the new events	Function that return a string with a 20 length	not required
`eventTheme`	Theme	specify the theme of the event	schedulio work with random themes by default	not required
`onCreateEvent`	async function(`newEvent`)	async function injected by `newEvent` object	-	not required
`onUpdateEvent`	async function(`updatedEvent`)	async function injected by `updatedEvent` object	-	not required
`onDeleteEvent`	async function(`deletedEvent`)	async function injected by `deletedEvent` object	-	not required
`randomThemes`	Theme[]	customize random themes array	-	not required
`eventComponent`	React component	Schedulio is highly extensible so feel free to add other params to your custom event component	-	not required
`darkMode`	boolean		false	not required

Params of Event object

Key	Type	Required
`startHour`	string	`true`
`duration`	number	`true`
`day`	string	`true`
`id`	string or number	`true`
`object`	string	`false`
`description`	string	`false`

Params of Theme object

Key	Type	Required
`name`	string	`true`
`titleColor`	string	`true`
`backgroundColor`	string	`true`
`borderColor`	string	`true`
`modeSupported`	`dark` , `light` , `both`	`true`

Complet Example

import React from "react";
import { useSchedule } from "schedulio";
import axios from "axios";

const CustomEventComponent = ({
  day,
  startHour,
  duration,
  object,
  description,
  newParam,
}) => {
  // return your jsx
};

const FunctionComponentExample = () => {
  const events = [
    {
      object: "first event",
      description: "will be a boring event",
      startHour: "15:00", // 24H Format equal to 3PM
      duration: 60, // minutes
      day: "Tue",
      id: "45654544",
      newParam: "labla", // you can add params to use it in your custom event component
    },
  ];
  const { Schedule, currentEvents, defaultDays } = useSchedule({
    defaultEvents: events,
    startHour: "8:00",
    endHour: "17:00",
    darkMode: false, // default value
    theme: {
      name: "indigoTheme",
      titleColor: "#ffffff",
      backgroundColor: "#6366f1",
      borderColor: "#6366f1",
    },
    days: ["Tue", "Sat", "Sun"],
    IDGenerator: () => {
      var id = "";
      for (let i = 0; i < 20; i++) {
        id += parseInt(Math.random() * 10);
      }
      return id;
    },
    onCreateEvent: async (newEvent) => {
      const response = await axios.post("/api/v1/saveEvent", newEvent);
      console.log("event has been saved");
    },
    onUpdateEvent: async (updatedEvent) => {
      const response = await axios.put("/api/v1/updateEvent", updatedEvent);
      console.log("event has been updated");
    },
    onDeleteEvent: async (deletedEvent) => {
      const response = await axios.delete("/api/v1/deleteEvent", deletedEvent);
      console.log("event has been deleted");
    },
    eventComponent: CustomEventComponent,
  });
  console.log(defaultDays); // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  return (
    <div style={{ width: "100%" }}>
      <Schedule />
    </div>
  );
};

export default FunctionComponentExample;

currentEvents

Thhe currentEvents returned by useSchedule hook is a react state so any change in the schedule events trigger re-render in your schedule container component. In this case, you can access the new value of your schedule in real time.