►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 13, 2020
In this 20-minute demo, Sébastien Levert – MVP, reviews 2 ways to insert a React Calendar component into a Teams: 1) as a Teams Channel tab (events only from the team calendar) or 2) as a Personal App (events from both the team and your personal calendars). Showcased is the power and diversity of an SPFx web part - as it and SPFx web parts generally can be placed in products spanning the productivity suite, i.e., SharePoint, Teams tab, Teams Personal App, Office Add-ins.... Quit building calendars and save time getting data courtesy of Microsoft Graph. This web part also delivers the right color calendar as it detects and adopts destination page color theme.
Presenter:
• Sébastien Levert (Valo Intranet) | @sebastienlevert
Supporting materials:
• Video: No-code solution to expose your modern SharePoint Online corporate portal in Microsoft Teams | https://www.youtube.com/watch?v=WyB4MBQwICs
• Video: AMA on SharePoint Framework current and vNext | https://www.youtube.com/watch?v=FNx6I5-wfTo
• Video: PnPjs v2 Deep Dive on Selective Imports | https://www.youtube.com/watch?v=xekNSc3GAtY
• PnP SPFx Web Part Samples | https://github.com/SharePoint/sp-dev-fx-webparts
• Full sized JavaScript Calendar | https://fullcalendar.io
• Fluent UI React | https://github.com/microsoft/fluent-ui-react
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
I,
don't
want
to
bore
you
with
with
slides
that
you
all
want
to
see
code.
So
why
did
you
just
a
quick
introduction
of
why
this
is
really
cool?
First
of
all,
team's
development
or
SharePoint
framework
webparts
development
within
teams
has
been
available
since
since
SPF
X
1.8-
and
this
has
for
me
literally
changed
the
way.
I
see
a
SharePoint
framework
solution.
It's
not
just
a
piece
that
you
put
on
a
page
in
SharePoint
anymore.
You
can
put
that
piece
literally
anywhere
in
your
productivity
suite
from
SharePoint
to
office
add-ins
now
to
even
Microsoft
team.
A
So
it's
really
really
powerful
and
the
cool
thing
is
that
is
the
same
tooling.
You
don't
have
to
relearn
anything
and
since
SPF
X
1.10
we've
been
able
to
even
use
it
as
a
personal
tabs,
and
this
is
where
the
game
is
totally
changing
for
me
and
I'm
gonna
show
you
all
those
examples
later
today.
First,
how
do
you
make
that
happen?
You
take
your
existing
code.
A
First,
you
migrate
it
to
one
point
ten,
so
you
use
the
office
365
CLI,
you
migrate
your
code
to
SPF
X,
one
point
ten
and
in
your
JSON
in
your
web
part
manifest.
You
just
add
that
you
want
to
also
have
it
as
a
team
stab
or
as
a
team's
personal
tab,
and
this
is
where
all
the
magic
happens.
Actually
everything
will
automatically
be
inferred
from
these
supported
hosts.
So
let's
go
and
see
what
does
it
mean
from
a
code
perspective?
A
So
if
I'm
going
to
my
graph
calendar
here,
so
this
sample
I'm,
currently
showing
I'm
gonna
zoom
in
a
little
bit,
so
you
can
see
something
this
sample
is
here
is
available
as
part
of
the
s/pdif
framework
web
parts
sample.
So
it's
called
a
react.
Craft
calendar
and
all
the
instructions
are
right
in
here
so
to
come
back
to
this
later,
but
first
here
we
are
saying
that
it
is
going
to
be
supported
as
a
SharePoint
web
part
as
a
team
stab
and
as
a
team's
personal
app.
A
This
will
make
available
this
Web
part
in
those
different
areas
that
you
might
want
to
use
it
so
what
it
means.
It
means
that
I
can
add
this
apart
to
a
SharePoint
page
to
a
team
stab
within
a
team
into
a
personal
tab
or
a
personal
app
within
your
team's
client.
So
if
we
go
and
see
what's
the
result
of
this,
let
me
go
here
too
and
I'm
gonna.
A
Do
this
I'm
gonna
do
project
Last
Vegas,
which
is
my
thing
here
and
I'm
gonna
go
to
pages
and
in
the
pages
I'm
gonna
go
to
events,
so
in
here,
as
you
can
see,
I
have
a
web
part
automatically
loaded
as
part
of
ESP
effects.
I
actually
have
it
here.
It's
already
loading
from
a
local
build
of
this
web
part.
So
it's
all
here,
I'm,
just
gonna.
Remove
that-
and
here
you
can
see,
I
can
go
edit.
This
page
I
can
add
another
version
of
that
web
part.
A
A
So
if
you
want
to
push
it
a
little
bit
further
and
want
to
start
with
this
starting
point,
one
of
the
biggest
missing
feature
of
communication
sites
today
are
definitely
the
fact
that
there
is
no
calendar
view
of
the
events
list
and
with
this
approach
you
could
really
build
something
really
cool.
But
here
we
have
the
February
2020.
If
I
go
back
from
one
month
to
the
other,
I'm
gonna
see
other
values.
I
can
click
here
and
now.
A
I
see
here
now,
I
see
the
actual
information
about
the
event
this
one
we
see
it
at
8
a.m.
and
then
we
see
the
time
and
everything.
So
that
is
a
great
scenario,
but
as
we
know,
people
are
using
marks
or
themes
more
and
more
and
more
so
why
don't
we
bring
this
actual
calendar
directly
inside
Microsoft
teams?
That's
exactly
what
we
can
see
here
so
now.
I
am
in
my
Microsoft
team's
team.
A
I
am
the
general
channel
where
I
added
the
graph
calendar,
which
is
available
as
part
of
this
year,
so
I
can
actually
hit
craft
calendar
automatically.
I
don't
want
to
post
the
channel,
I'm
gonna
hit,
say:
I'm
gonna
have
a
second
graph
calendar
with
that
small
parentheses
here
and
here
I
say:
I
want
to
be
able
to
load
3,
who
303
items
at
a
time
and
now
autumn
I.
Actually
it's
there
the
best
thing
about
it.
A
It's
exactly
in
the
same
code
that
runs
on
both
the
SharePoint
Online
and
the
team's
things
we're
gonna
come
back
to
the
actual
details
around
the
code.
What's
new
in
SharePoint
framework
1.10
is
the
ability
to
take
this
exact
same
component
but
to
bring
it
to
the
personal
level.
So
here
we're
at
the
team
level.
A
It
needs
to
be
part
of
this
here,
and
this
is
cool,
but
sometimes
you
might
want
to
have
an
app
that
is
more
persistent
that
is
always
available
as
part
of
your
team's
environment
and
that's
exactly
what
personal
tabs
are
about.
So
if
I
go
here
and
I
go
to
the
graph
calendar
here,
this
is
an
app
that
was
deployed
directly
from
our
app
catalog
in
chef
framework.
A
So
the
sharepoint
online
app
catalog,
we
synched
the
app
to
teams
and
now
it's
available
because
we
said
that
it
was
possible
to
use
it
as
a
personal
app
now
it
is
also
available
as
a
personal
app
right
here,
depending
on
where
we're
actually
can
pin
it
now.
So
that's
a
new
feature
of
Microsoft
team.
So
from
now
on,
his
graph
calendar
will
always
stick
around.
So
if
I
go
back
to
my
team's
as
you
can
see
that
graph,
Skyler
is
always
there.
A
I
can
just
click
on
that
and
boom
we're
back
to
the
exact
same
UI.
What
is
interesting?
I,
don't
you
notice,
but
it's
not
the
same
data
while
I'm
in
a
team
I
actually
hook
up
to
the
calendar
that
is
attached
to
the
current
team,
so
I
go
I
use
the
graph
talk
with
the
current
team's
calendar
and
automatically
I
fetch
the
items
here.
I
fetch
the
items
of
the
user
makes
no
sense
to
hard-code
a
team
or
whatsoever.
So
here
you
have
the
ability
to
have
all
those
elements
right
in
there.
Great
maybe
enhancement.
A
Opportunity
here
is
to
also
go
and
fetch
all
your
join.
The
team's
calendars
and
make
them
part
of
this
calendar,
so
you
see
not
only
your
events
but
your
team
events
as
part
of
a
single
dashboard
that
could
be
extremely
powerful
to
really
have
a
good
picture
of
what's
happening
around
everything.
So
what
is
the
code
doing?
So,
let's
go
back
to
your
visual
studio
here
and
let's
go
to
first
couple
of
things
that
I
wanted
to
mention.
A
First
of
all,
we're
just
gonna
simply
provision
the
graph
calendar,
which
is
my
main
component
where
everything
is
being
displayed
and
rendered
so
we're
gonna
go
back
this
a
little
bit
later.
Well,
there's
a
couple
of
things
that
we
have
to
do
initially
to
make
sure
that
we
have
a
well
working
solution.
First,
we
want
to
make
sure
that
we
are
in
teams
if
we're
in
team
or
actually,
if
foreign
teams
make
sure
we
have
the
marks
of
teams
SDK
available.
So
if
we
are
running
within
marks
of
teams,
this
object
will
have
a
value.
A
So
if
this
object
has
a
value
now
we
can
actually
get
the
context
out
of
it.
It
used
to
be
an
async
function.
Now
it's
a
direct
object,
so
we
just
get
the
context
from
it,
and
this
is
what
will
provide
information
like
channel
name
team
name
team
ID,
so
we
can
do
some
of
the
queries
to
the
graph
later
on
with
the
current
context
of
Microsoft
teams.
A
Also,
something
you
want
to
do
is
to
initialize
the
icons
running
on
a
surface
that
is
hosted
in
SharePoint,
but
doesn't
have
all
the
bits
and
pieces
in
SharePoint
actually
so,
for
example,
the
office
to
our
fabric
icons
are
not
loaded
by
default
in
a
SharePoint
framework
web
part
that
runs
within
teams.
So
here
you
need
to
initialize
the
icons,
and
this
is
a
function,
is
actually
being
provisioned
as
part
of
the
office.
A
You
are
fabric
react
package,
so
you
just
need
to
call
that
function
here
and
to
see
that
the
icons
or
it's
not
gonna,
look
good.
You
won't
have
a
great
experience
if
you're
using
the
office
UI
fabric
styles
in
your
and
your
component,
so
this
is
kind
of
the
only
thing
that
happens
on
the
web
parts
side
of
things,
but
now,
if
you
want
to
go
to
a
little
bit
more
stuff,
what
you're
gonna
realize
is
that
we
are
using
this
here.
A
So
the
way
I'm
a
very
lazy
developer
as
I'm,
not
coding
as
much
as
I
used
to
I,
don't
have
time
to
build
amazing
calendar
components.
The
office
UI
fabric
does
not
provide
a
calendar
component
either
so
I
had
to
go
and
find
a
nice
calendar
component.
That
is
open
source
in
that
we
can
use
to
build
those.
So
what
I
did
I
used
a
full
calendar?
The
full
calendar
is
a
really
really
really
nice
library
I.
Have
it
right
here.
A
So
it's
a
fully
javascript
native
calendar
library
that
has
versions
for
view
for
angular
for
react,
so
it
makes
it
really
easy
to
leverage
and
to
assemble
a
page
with
this.
So
basically,
in
that
case,
what
is
cool
that
I
don't
have
to
build
any
of
the
calendaring
components?
The
only
thing
I
have
to
do
is
to
provide
data,
and
how
do
we
provide
data?
Well,
we
have
the
marks
of
graph
to
do
that.
Our
sub
graph
is
your
perfect
best
friend
to
loop
in
some
data
from
this
team.
So
how
do
we
do
this?
A
First,
we
will
gonna
come
back
to
this
here
we
will
load
the
events
when
we
load
when
we
render
this
component
we're
gonna
load.
The
events
based
on
the
calendar
start
date
and
the
calendar
end
dates.
Why
do
we
do
that?
Well,
you
know
when
it
can
during
is
really
hard,
especially
in
software
engineering.
A
It
looks
like
a
simple
thing,
but
it's
actually
probably
one
of
the
worst
thing
to
play
with
dates
and
calendars
are
like
my
worst
enemies
here
and,
as
you
can
see,
I
have
a
26th
of
January
and,
at
the
end,
I
have
the
7th
of
March.
So
I
want
to
be
able
to
do
my
crater
graph
to
include
those
all
of
those
dates,
so
my
full
view
makes
a
sense,
not
just
for
the
current
month,
but
for
the
entire
view
that
I
have
here.
A
So
that's
what
I'm
doing
here
then
I'm
loading
the
events
I
am
using
the
I
guess
previous
marks
of
graph
fly.
It
sorry,
Daryl,
I,
hope
you
are
coming
with
good
news
today,
but
here
I'm
using
the
previous
clients
here
so
I'm,
getting
the
client
from
the
graph
Factory
and
I'm
simply
building
my
URLs.
In
that
case,
slash
group,
slash
group
ID
that
group
IV
was
provision
through
the
context
of
marks
of
teams.
A
So
Microsoft
teams
has
the
information
about
which
group
ID
were
currently
working
on
and
then
afterwards,
I'm,
just
here
running
the
query
Braham
doing
a
little
bit
of
a
filtering
based
on
the
start
date
and
the
end
date.
What
are
the
different
properties
I'm
looking
for,
which
is
the
version
that
I
want
to
call
from
the
graph
which
in
that
case,
is
there
v
1.0
Here
I
am
doing
a
little
bit
of
a
trickier
if
I'm
running
as
far
as
their
personal
tab,
I
want
to
run.
Slash
me
slash
event.
A
So,
instead
of
going
to
the
group,
calendar
I
want
to
go
to
my
personal
calendar.
The
good
thing
here
is
that
that
was
the
only
change
that
I
had
when
I
changed
the
code
to
go
from
SharePoint
framework
1.9
to
1.10.
That's
the
only
piece
of
code
that
I
had
to
change
just
to
add,
can
I
check
if
I'm
in
a
personal
tab
and
if
yes,
just
override
this
setting
here
and
what
is
the
way
to
check.
Well
here
we're
gonna
check.
A
If
it's
running
in
teams
and
that
we
don't
have
a
team's
ID,
then
we
are
in
a
personal
tab.
How
do
we
check
you
for
running
in
teams
or
just
checking
if
we
have
a
team's
context
that
was
passed
as
part
of
the
initializer
of
our
element?
Something
also
that
is
really
really
really
interesting.
That
you
can
play
with
is
to
be
fully
aware
of
the
current
setup
of
your
Microsoft
teams.
A
So
let
me
show
you
something
that
is
really
really
cool
in
this
scenario:
I
can
go
here,
I
can
go
in
my
settings
and
I
can
change
it
to
be
dark,
and
now,
if
I'm
reloading
the
page
I'm
just
gonna
reload
this
one
here,
you're
gonna
see
that
I
now
support
dark
mode
natively
within
this
this
webpart,
so
that
way,
I'm
a
dark
mode
guy
so
I
had
to
so
how
do
we
do
that?
Well,
there
are
some
interesting
api's
that
exist
here
on
the
team's
context.
A
You
actually
have
access
to
the
theme
so
based
on
what
we're
doing
when
you
are
running
in
teams
were
importing,
basically
we're
injecting
on
demand
CSS
to
the
current
web
part
that
now
runs
in
team.
So
you
want
to
have
a
good
example.
Is
in
this
case
I,
don't
know:
let's
go
back
to
SharePoint
when
I'm
in
SharePoint.
You
see.
The
colors
here
are
the
colors
of
the
theme
in
teams.
I
want
to
have
the
blurple,
that
is
from
team,
so
you
really
have
to
have
those
life's
colors.
A
So
we
are
having
an
SCSS
or
a
module
here,
which
is
the
following
here,
which
will
bring
some
of
the
colors
in
there
really
really
really
simple
CSS
me
not
that
much,
but
at
least
we
were
able
to
do
that
same
thing
with
dart.
If
we
are
running
in
a
dark
mode,
then
add
this
piece
in
that
case
here
it's
really
simple,
we're
just
using
the
F,
so
we're
using
the
foreground.
Color
becomes
white
instead
of
gray,
and
this
one
the
today
becomes
this
year.
A
So
at
least
when
you're
running
inside
teams,
with
a
very,
very
small
amount
of
code,
you
can
really
detect,
if
you're
in
a
dark
mode
or
not
in
the
dark
mode
and
then
apply
it
to
your
entire
element
in
there.
So
that
was
what
I
wanted
to
to
showcase
today.
Well,
actually,
the
last
thing
I
wanted
to
show
is
how
easy
it
is
to
work
with
full
calendar.
As
you
can
see
here,
full
calendar
is
actually
just
that.
It
just
manages
everything.
It
manages
the
events
that
were
loaded
initially
through
the
Microsoft
graph.
A
It
manages
the
height
manages
that
what
happens
on
dates
when
we
resize
we
can
even
make
it
fully
responsive.
So
when
I
do
that
here,
like
it
responsive,
ish,
let's
see
with
responsive
age
like
it's
actually
pretty
good
and
finally,
a
couple
of
in
elements
here
and
then
I'm,
also
using
some
of
the
office
to
I
fabric
components.
A
I
could
have
more
details
to
really
make
it
more
functional
calendar
items,
so
that
makes
it
really
really
powerful
in
a
very,
very,
very
low
number
of
lines
of
code,
where
I
have
like
not
even
like
300
lines
of
code
for
my
entire
component
that
does
fully
work
on
the
Microsoft
graph,
so
just
before
I
hand
it
out
to
dial.
In
that
case,
I
wanted
to
come
up
with
a
couple
of
tips
and
tricks
for
you
guys,
which
is
the
following
here.
Just
as
a
reminder.
First,
you
can
always
understand
the
team's
context.
A
That's
the
way
that
you
know
if
you're
running
in
teams,
the
second
thing
importing
things
based
on,
if
you're
in
teams
or,
if
you're,
in
a
dark
mode
of
teams,
really
useful
when
you're
building
trust
platform
solutions,
there's
a
an
interesting
framework
that
is
available,
which
is
called
the
fluent
UI
framework,
which
used
to
be
called
Stardust,
which
could
be
an
interesting
UI
framework
approach.
The
Stardust
is
what
is
being
used
within
Microsoft
team.
So
if
you
want
to
look
into
it,
Microsoft
star
dust
it
hub
there
you
go.
It's
now
called
fluent.
Ui
react.
B
Oh
sorry,
supposed
and
I'll
jump
on
that
one.
So
what
we're
doing
is
that
we
are
basically
gradually
combining
the
classes,
plastic
office,
UI
fabric
react
and
then
the
Stardust
and
they're
basically
now
merged,
rather
than
having
an
competing
set
of
libraries,
and
we
have
one
set
of
viper-
is
customized
retraced
and.
A
That's
great
because
it
means
that
basically,
based
on
your
scale
on
your
use
case,
you'll
be
able
to
go
right
or
left,
and
then
you
have
like
really
really
cool
stuff,
that
you're
gonna
feel
that
our
family,
or
to
how
you're
actually
building
Microsoft
or
you
you
see,
marks
of
teams.
The
cool
thing
is
the
chat
messages
but
yeah,
so
you
can
literally
use
the
fluent
UI
for
this
huge
request,
for
you
guys,
don't
just
use
the
web
version
of
Microsoft
Dean's
everything
will
work
and
then
you're
gonna
go
to
the
client
and
it
won't.
A
So
please
always
test
with
the
real
thing
it
makes
everything
way
way
way
better
and
if
you
want
to
make
it
just-just-just
themes
enabled
you
can
always
hide
from
the
toolbox.
So
if
you
just
want
to
use
SPF
X
to
build
a
nice
team's
app,
you
can
hide
your
web
part
from
the
toolbox.
So
in
the
end
it's
gonna
make
it
a
full
teens
app
with
your
own
tool
chain
or
tool
kit,
and
it's
gonna
make
it
way
easier.