Chronous

Chronous is a versatile npm package, offering a customizable and feature-rich calendar solution adaptable for both desktop and mobile platforms. With Chronous, users can easily modify and tailor the calendar to suit their specific needs, enabling seamless integration into various web applications.

Installation

npm

$ npm install chronous

yarn

$ yarn add chronous

Usage

import { useState } from 'react'
import Chronous from 'chronous'
import ModalWindow from 'src/features/ModalWindow'
import { EventT } from 'src/types'
import ChevronRight from 'src/assets/icons/chevron-right.svg'
import ChevronLeft from 'src/assets/icons/chevron-left.svg'
import ChevronDown from 'src/assets/icons/chevron-down.svg'

export const App = () => {
  const [events, setEvents] = useState<EventT[]>([])

  return (
    <Chronous
      events={events}
      view="week"
      config={[{ maxWidth: 450, mode: 'mobile' }]}
      nextButton={<ChevronRight />}
      prevButton={<ChevronLeft />}
      dropDownArrow={<ChevronDown />}
      eventModal={({ onClose, ...event }) => (
        <ModalWindow
          onClose={onClose}
          id={event.id}
          events={events}
          selectedEvent={event}
          setEvents={setEvents}
        />
      )}
      newEventModal={({ onClose, time, day }) => (
        <ModalWindow
          day={day}
          time={time}
          events={events}
          onClose={onClose}
          setEvents={setEvents}
        />
      )}
    />
  )
}

🔥 Play around with Chronous

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE11, Edge	last 3 versions	last 3 versions	last 3 versions

Props

Props	Description	Default	Type
events	List of events to be displayed on the calendar	There are default events that will be gone as soon as you pass a property events	{id: string; title: string; start: string; end: string; overlapping?: number; color?: string; textColor?: string; opacity?: number}[]
view	Specifies calendar view	'week'	"day" | "week" | "month"
mode	Specifies calendar mode	'desktop'	"mobile" | "desktop"
selectedEvent	Returns a selected event id	-	string
startHour	Sets starting day hour	0	number
endHour	Sets ending day hour	24	number
currentDay	Specifies current day	new Date()	string | Date
nextButton	Sets a custom arrow that gets you to the next day/week/month	<RightArrow />	ReactNode
prevButton	Sets a custom arrow that gets you to the previous day/week/month	<LeftArrow />	ReactNode
dropdownArrow	Prop for custom dropdown arrow	<ChevronDown />	ReactNode
customEventComponent	Sets a custom eventComponent	<EventComponent />	ReactNode
eventModal	Sets a custom event modal that will be open when a user clicks on existing event	-	eventModal: ((argument: {onClose: () => void, id: string, title: string, start: string, end: string, overlapping: number, color: string, textColor: string, }) => React.ReactNode)
newEventModal	Sets a custom event modal that will be open when a user clicks on an empty cell to create new event	-	newEventModal: ((argument: {onClose: () => void, day: Date, time: string }) => React.ReactNode)
onCellClick	Allows a user to pass a custom functionality and modal window that will be triggered on cell click	-	onCellClick: (argument: {day: Date, time: string}) => void
onEventClick	Allows a user to pass a custom functionality and modal window that will be triggered on an event click	-	onEventClick: (argument: {id: string, title: string, start: string, end: string, overlapping: number, color: string, textColor: string, }) => void
onViewChange	Returns a chosen view on view change	-	onViewChange: (view: "day" | "week" | "month") => void
onDateChange	Returns start and end date on date change	-	(start: Date, end: Date) => void
config	Takes an array of objects to manipulate view: maxWidth, mode, view	-	{maxWidth: number, mode: "day" | "week" | "month", view: "day" | "week" | "month"}[]
config parameters:
maxWidth	Defines a width after which the mode will change	-	number
mode	Specifies calendar mode	-	"mobile" | "desktop"
view	Specifies calendar view	-	"day" | "week" | "month"