npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pragmatic-scheduler

v1.2.2

Published

React resource scheduler

Downloads

20

Readme

pragmatic-scheduler

Pragmatic Scheduler is a React Resource Scheduler based on Material UI and uses React Grid Layout for the Drag/Drop/Resize functionality

Demo

Demo Available here

Installation

Install the Pragmatic Scheduler package package using npm:

npm install pragmatic-scheduler

Usage

Use Scheduler like any other component. The following example below will produce a Schuedlue with controls to change the date forward/backward

  • users will be able to drag or resize events on a given resource
  • users will be able to drag unassigned events on the calendar
  • users will be able to drag events on to other resources
import React, { useState } from 'react';
import { Box, Typography } from '@mui/material';
import { startOfToday } from 'date-fns';
import { CalEvent } from 'pragmatic-scheduler/dist/types';
import { Scheduler, SchedulerDateControls } from 'pragmatic-scheduler';
import { divisionDetails, events as rawEvents, resources } from '../data/daily';

function Basic() {
  const [activeDate, setActiveDate] = useState(startOfToday());
  const [events, setEvents] = useState<CalEvent[]>(rawEvents);

  const handleEventChange = (event: CalEvent) => {
    setEvents((prevEvents) => {
      const index = prevEvents.findIndex((e) => e.id === event.id);
      const newEvents = [...prevEvents];
      newEvents[index] = event;
      return newEvents;
    });
  };

  return (
    <>
      <Box mb={2} display="flex" justifyContent="center">
        <SchedulerDateControls activeDate={activeDate} setActiveDate={setActiveDate} />
      </Box>
      <Scheduler
        activeDate={activeDate}
        resources={resources}
        events={events}
        divisionDetails={divisionDetails}
        onEventChange={handleEventChange}
      />
    </>
  );
}

export default Basic;

Scheduler Props

The Scheduler component supports the following properties (see the source for the final word on this):


// This set the active date of the Scheduler
activeDate: Date,

// each day in the schedule it will be divided in however many divisions are provided here
// check out the demos for examples of how to do this
divisionDetails: DivisionDetail[];

// The list of resources to appear in the calendar
resources: Resource[];

// The list of events to appear in the calendar
// If an event has no resourceId, it will appear in the Unassigned Section
// if the config prop has unAssignedRows set to more than 0
events: CalEvent[];

// scheduler config
config?: {
  resourceColumnWidth: number; // the fixed width of the resource column
  rowHeight: number; // the fixed height of a single row
  divisionWidth: number; // the width of each division that each day is split into
  unAssignedRows?: number; // the number of rows of unassigned events to show above the calendar. Set to 0 to not have any Unassigned Section
  divisionParts: number; // each division can be further broken into parts. E.g. a 2 hour division may be broke into 4 30 minut parts. This controls the snapping when dragging/resizing.
  daysToDisplay: number; // the number of days to load for the scheduler. Check out the demos for examples
}

// Callback to handle events being changed
onEventChange?: (event: CalEvent) => void;

// Optionally override the header row. Check out the demos for examples
HeaderRow?: React.FC<{ days: ScheduleDay[] }>;

// Optionally override each resource cell. Check out the demos for examples
ResourceCell?: React.FC<{ resource: Resource }>;

// Optionally override each resource header. Check out the demos for examples
ResourceHeader?: React.FC;

// Optionally override the UnassignedHeader. Check out the demos for examples
UnassignedHeader?: React.FC;

// Pass mui BoxProps to style the Unassigned events Box
UnAssignedBoxProps?: BoxProps

// Optionally override how the background grid is displayed. Use this to change the format or add extra information to the grid. Check out the demos for examples
GridCell?: React.FC<{ layout: GridCellLayout }>;

// Optionally override each Event Tile on the Calendar. Check out the demos for examples
EventTile?: React.FC<{ event: CalEvent }>;

Calendar Events

Each event has the following properties:

export type CalEvent = {
  id: string;
  title: string;
  startTime: Date;
  endTime: Date;
  resourceId?: string;
  bgColor?: string;
  textColor?: string;
  draggable?: boolean; // will default to true
  resizable?: boolean; // will default to true
  allowOverlap?: boolean;// will default to false
};

To disable the dragging functionality for a specific event set draggable: false. See Weekly demo for an example To disable the resizing functionality for a specific event set resizable: false. See Weekly demo for an example

To allow an event to be overlapped by another set allowOverlap: true. See Weekly demo for an example

Disable dragging for a specific element

If you wnat to disable dragging for specific part of custom EventTile, add the class name not-draggable. For an example see the info button in the Weekly example

SchedulerDateControls Props

The SchedulerDateControls component supports the following properties (see the source for the final word on this):


// This is the active date of the Scheduler
activeDate: Date,

// Pass a function so the component can change the activeDate
setActiveDate: React.Dispatch<React.SetStateAction<Date>>;

// Change the button Text that trigger the date picker
buttonText?: string;

// When the forward/back buttons are pressed, how many days to move forward/back
moveByDays?: number;

Developer notes

Demo Site

The demo site id hosted on Github Pages, which isn't designed to run SPA. The easiest way to get around this constraint is to use the HashRouter in the demo app rather than BrowserRouter.

Details here

To update the demo page on Github Pages run:

npm run deploy

The predeploy script will build the demo app

NPM process

Icrement the version

npm version patch

Publish (tests and linting will run as defined in the prepublishOnly script)

npm publish