Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

calend-dev

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

calend-dev

Support for:

  • 0.0.2
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Calend - calendar component for React

Support for:

  • day view
  • three days view
  • week view
  • month view
  • agenda list view

LIVE DEMO: https://calend.nibdo.com

Alt text

If given interface and controls is not enough for you, you can use callbacks to access internal state and expand functionality to your ui.

TODO:

  • dragging events

If you have any suggestion, feel free to open discussion or contact me directly at hello@nibdo.com

Install

npm i calend

Example

import Calend, { CalendarView } from 'calend' // import component
import 'calend/dist/styles/index.css'; // import styles

    <Calend
      onEventClick={onEventClick}
      onNewEventClick={onNewEventClick}
      events={[]}
      initialDate={new Date().toISOString()}
      hourHeight={60}
      initialView={CalendarView.WEEK}
      disabledViews={[CalendarView.DAY]}
      onSelectView={onSelectView}
      selectedView={selectedView}
      onPageChange={onPageChange}
    />

Props

proptypedefaultrequireddesc
initialDatestringfalsestarting date for calendar
initialViewCalendarView - day, three days, week, monthCALENDAR_VIEW.WEEKtruestarts in calendar view
selectedViewCalendarViewfalseselected view for control outside of the component
disabledViewsCalendarView[]falsedisable views you don't need
hourHeightnumber40falseheight for one hour column in px
eventsCalendarEvent[][]trueevents for calendar
onNewEventClickcallback funcfalsecallback for clicking on calendar table to create new event
onEventClickcallback funcfalsecallback for clicking on event
onSelectViewcallback funcfalsecallback for view change event
onPageChangecallback funcfalsecallback for navigating through calendar pages
showMoreMonthcallback funcfalsecallback for accessing events which didn't fit in month view
disableMobileDropdownbooleanfalsedisable button for triggering mobile dropdown with views
timezonestringfalseIANA timezone format, if not provided, system timezone will be used

Usage

Events

Before passing events to calendar, adjust data to this format: Date key has to be in dd-MM-yyyy format

const events = {
    '01-11-2021': [
        {
        id: 1,
        startAt: '2021-11-21T18:00:00.000Z',
        endAt: '2021-11-21T19:00:00.000Z',
        timezoneStartAt: 'Europe/Berlin', // optional
        summary: 'test',
        color: 'blue',
        }
    ],
    '21-11-2021': [
        {
        id: 2,
        startAt: '2021-11-21T18:00:00.000Z',
        endAt: '2021-11-21T19:00:00.000Z',
        timezoneStartAt: 'Europe/Berlin', // optional
        summary: 'test',
        color: 'blue',
        }
    ]
}

Group events array under day when they occur and pass starting and ending date in ISO string format in UTC timezone.

According to your needs, you can set timezone for each event and also set default timezone with "timezone" prop in IANA format. If you don't provide timezone prop, your system default timezone will be used.

You can keep other event properties, those will be ignored.

Callbacks

Create functions and handle data from callback in your application

If you want access to type of callback data, you can import them like this

import Calend, {
    OnEventClickData,
    OnNewEventClickData,
    ShowMoreMonthData,
    OnPageChangeData,
    OnSelectViewData
} from 'calend';

onNewEventClick

Passing data for creating new event

type OnNewEventClickData {
    event: CalendarEvent;
    day: Date;
    hour: number;
}

const onNewEventClick = (data: OnNewEventClickData) => {
    // do something
};

onEventClick

Passing data after clicking on existing event

type OnEventClickData {
    startAt: string;
    endAt: string;
    timezoneStartAt?: string;
    timezoneEndAt?: string;
    summary: string;
    color: string;
    [key: string]: any;
}

const onEventClick = (data: OnEventClickData) => {
    // do something
};

onSelectView

Access current selected view if you want to handle state in your app

const handleSelectView = (view: OnSelectViewData) => {
    // do something
}

onPageChange

Callback to handle actions after page change (going back and forth)

const onPageChange = (data: OnPageChangeData) => {
    // do something
}

showMoreMonth

Callback returns array of CalendarEvent which did not fit inside day column in month view

const showMoreMonth = (data: ShowMoreMonthData) => {
    // do something
}

Development

Storybook Support

Storybook is used for visualization while improving Calend. It can be used by running npm run storybook from the root of the project. Not all controls are fully supported so far.

Keywords

FAQs

Package last updated on 11 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc