How can I use a local version of full calendar in my project?

Question

I'm trying to see if I can contribute a fix to a couple of issues we've been having with full calendar.

I've cloned the full calendar repo using git clone --recursive git://github.com/fullcalendar/fullcalendar.git and run yarn install .

I've gone into our project used npm link to link up the packages like so:

npm link \
 ~/dev/fullcalendar/packages/common \
 ~/dev/fullcalendar/packages/core \
 ~/dev/fullcalendar/packages/interaction \
 ~/dev/fullcalendar/packages-premium/premium-common \
 ~/dev/fullcalendar/packages-premium/resource-common \
 ~/dev/fullcalendar/packages-premium/resource-timeline \
 ~/dev/fullcalendar/packages-premium/scrollgrid \
 ~/dev/fullcalendar/packages-premium/timeline \
 ~/dev/fullcalendar/packages-contrib/vue

However, the packages don't seem to be playing nice with each other, seemingly they can't see eachother, so I get many, many errors when I try to run the project such as

ERROR in /Users/abarratt/dev/main/src/PODFather-Main/symfather/node_modules/@fullcalendar/common/main.d.ts(96,36):
96:36 Cannot find module './util/scrollbar-width' or its corresponding type declarations.
    94 | export { CssDimValue, ScrollerLike, SectionConfig, ColProps, ChunkConfig, hasShrinkWidth, renderMicroColGroup, getScrollGridClassNames, getSectionClassNames, getSectionHasLiquidHeight, getAllowYScrolling, renderChunkContent, computeShrinkWidth, ChunkContentCallbackArgs, sanitizeShrinkWidth, ChunkConfigRowContent, ChunkConfigContent, isColPropsEqual, renderScrollShim, getStickyFooterScrollbar, getStickyHeaderDates, } from './scrollgrid/util';
    95 | export { Scroller, ScrollerProps, OverflowValue } from './scrollgrid/Scroller';
  > 96 | export { getScrollbarWidths } from './util/scrollbar-width';
       |                                    ^
    97 | export { RefMap } from './util/RefMap';
    98 | export { getIsRtlScrollbarOnLeft } from './util/scrollbar-side';
    99 | export { NowTimer } from './NowTimer';

I'm assuming there's some yarn workspaces vs npm battle going on here but perhaps it's just something simple I need to tweak, or some step I've neglected.

Any help would be much appreciated:)

Answer 1

The answer it would seem, is yalc. By building using yarn run build as well as yarn run build-contrib followed finally with a manual yarn run ci inside the vue package (because something seems to break in the build-contrib script so it doesn't get fired properly), I was then able to publish and sym-link these correctly into my npm project properly, with all workspace linking resolved.

I've written the following bash script to do the job for me: yalc-init-local-fullcalendar-link.sh

#!/bin/sh

if ! command -v yalc &> /dev/null; then
    echo ""
    echo "Hi,"
    echo ""
    echo "You must install yalc globally to link the local full calendar packages."
    echo "You can do that by running"
    echo "sudo npm install yalc -g"
    echo ""
    echo "Andy Barratt"
    echo ""
    exit
fi

START_DIR=`pwd`

if [[ -z "$FULLCALENDAR_DIR" ]]; then
  FULLCALENDAR_DIR="$HOME/dev/fullcalendar"
fi

yalc_publish_packages_in_folder()
{
    cd $@
    for package in */ ; do
        cd $package
        echo "Publishing `pwd`"
        yalc publish
        cd ..
    done
}

# Do some cleanup first
git checkout package.json
rm -rf .yalc
rm yalc.lock
rm -rf node_modules
npm ci

# Build full calendar
cd $FULLCALENDAR_DIR
yarn run build
yarn run contrib:build
# seems one of the other contributing packages has a bug in it,
# so we'll go ahead and run the vue one manually for now.
cd $FULLCALENDAR_DIR/packages-contrib/vue
yarn run ci

yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages
yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages-contrib
yalc_publish_packages_in_folder $FULLCALENDAR_DIR/packages-premium

cd $START_DIR
for package in node_modules/@fullcalendar/*/ ; do
    package_name=@fullcalendar/`basename $package`
    echo Linking $package_name
    yalc link $package_name
done