►
Description
In this 12-minute developer focused demo, Sébastien Levert reviews three MGT components - Agenda, Planner Tasks, and To-Do tasks. Agenda – listing of future events in your calendar – specify event order, by day of week, number events, number days, by reference time zone and customized rendering. Planner Tasks – see tasks assigned to you from multiple projects. Essentially manage Planner tasks (add, delete, modify) without having to launch Planner App. Finally in To-do – access my Reading List, add/delete readings. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 1, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Documentation – Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation – Agenda component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/agenda
• Documentation – Tasks component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/tasks
• Documentation - To Do component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/todo
• Tool – mgt-agenda simple | https://mgt.dev/?path=/story/components-mgt-agenda--simple
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
A
My
name
is
sebastian
livert.
I
am
a
senior
program
manager
on
the
microsoft
graph,
developer,
experiences
team
and
today
will
be
all
about
mgt
or
the
microsoft
craft
toolkit
before
we
go
any
further.
If
you
don't
know
what
the
toolkit
is,
the
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
auth
providers
that
allows
you
to
access
and
work
with
the
microsoft
graph,
so
think
about
web
components
that
you
can
drop
to
any
web
page
that
are
already
bound
to
the
microsoft
graph.
A
So
you
don't
have
to
build
any
of
the
ui
and
you
don't
even
have
to
build
any
of
the
connectivity
with
microsoft
graph.
They
are
fully
functional,
so
there's
already
behaviors
in
these
components,
they're
fully
customizable
and
they
work
with
any
web
framework,
so
think
about
react,
angular
view,
js
or
even
plain
html,
and
they
work
on
all
major
browsers.
A
Why
would
you
care
because
you're
like
me,
you
want
to
cut
on
development
time
and
deliver
really
high
value
to
your
business,
without
focusing
on
the
boilerplate
code,
which
I
would
assume
that
some
of
these
controls
might
be
for
you,
they're
beautiful,
but
they're
flexible.
They
are
style
like
m365,
but
if
you
want
to
customize
it
and
bring
your
own
brand
in
there,
you're
100
capable
of
doing
so,
and
it
works
everywhere
on
the
web
in
teams
in
any
apps
you're.
Thinking
of
that
would
be
web
in
electron.
A
A
Then
we're
going
to
talk
a
little
bit
about
planner
tasks
and
how
we
can
integrate
the
toolkit
with
planner
tasks
directly
and
stay
on
top
of
your
tasks
that
you
have
to
do
in
a
broader
group
of
people
and
finally,
we
will
be
talking
about
to
do
judo
being
the
personal
task
management
system
that
we
have
here
at
microsoft
and
how
you
can
really
leverage
that
system
to
make
it
pop
in
your
own
application.
So
let
me
close
our
slides
and
let
me
go
right
here.
A
Let
me
open
up
visual
studio
code
and
let
me
open
up
this
right
here.
So
I
have
the
code
that
is
all
written
now
we're
going
to
go
through
some
of
the
code.
All
that
code
is
available
on
github.
You
can
have
a
link
to
the
repo
at
the
end
of
this
session,
so
we're
using
the
same
structure
of
the
app
that
we've
been
using
for
the
last
couple
of
weeks.
The
only
difference
that
we're
gonna
find
today
is
we're
gonna
find
some
really
nice
tabs
here.
A
That
will
allow
you
to
go
from
one
scenario
to
the
other,
to
be
able
to
cover
our
three
different
components
today.
The
first
one
is
the
agenda.
How
do
you
actually
make
an
agenda
work?
Well,
it's
as
simple
as
adding
mgt
agenda
to
your
page.
The
mgt
agenda
will
automatically
go
fetch.
Your
next
events
that
are
in
your
calendar
will
render
them
automatically
as
part
of
the
the
app
that
you're
building
and
will
require
a
single
permission.
A
In
that
case,
it's
going
to
be
calendars,
dot,
read
because
it's
all
about
the
personal
calendar
of
the
user
that
is
connected,
so
calendars,
dot,
read.
Allow
you
to
see
to
see
and
read
your
own
calendar.
So
that's
the
easiest
way
of
making
it
happen.
You
see
it
on
the
left,
where
we
have
a
collection
of
different
components
here,
so
we
have,
for
example,
our
date,
the
title
we
have
the
name,
the
location
actually
of
of
this,
and
we
also
have
some
person
component
here.
A
That
brings
some
of
the
capabilities
that
we
saw
in
some
other
other
sessions,
especially
regarding
our
person,
our
person
card,
where
you
can
actually
see
the
whole
information
about
this
specific
person,
so
a
great
way
to
integrate
some
of
the
existing
components
that
we've
already
built.
You
see
how
mgt
is
kind
of
a
building
a
is
building
blocks
that
we're
using
even
within
ngt,
to
build
our
components.
A
The
second
scenario
I
want
to
highlight
is
the
fact
that
ngt
supports
a
custom
query.
So
here
you
have
the
ability
to
specify
an
event
query
in
that
case,
it's
me
slash
events,
so
it
means
these
are
my
events
and
I
want
graph
to
return
the
events
in
specific
order,
in
that
case,
by
daytime
start
or
right
at
the
start
of
the
day,
the
daytime.
That
means
that
they
will
be
ordered
for
me
in
the
way
that
I
want
them
to
be
ordered.
A
A
So
now
I'm
I'm
targeting
a
very
similar
endpoint
with
just
an
order
by,
but
you
could
really
do
whatever
you're
thinking
of
as
part
of
the
query
to
to
graph
here,
you
can
really
customize
it
in
a
really
nice
way.
Let
me
go
to
the
next
scenario
here.
The
next
scenario
is
a
really
interesting
capability.
We
had.
A
We
have
added
to
the
mgt
agenda,
which
allows
you
to
group
by
day
so
to
see
like
a
big
title,
the
date,
so
you
know
which
date
this
event
is
for
so
you're
gonna
have
a
group
of
events
and
also
we're
gonna
limit
to
only
the
seven
next
days
so
for
the
next
week.
I
wanna
see
group
by
day
all
my
events
and
that's
where
you're
gonna
see
that
nice,
rendering,
where
I
see
a
tuesday
today,
I
have
this
then
on
wednesday.
A
The
next
scenario
is
where
you
can
actually
have
a
maximum
of
items.
So
let's
say
you
want
to
just
see.
I
just
want
to
have
the
next
two
events
to
show
that
in
my
ui,
so
I
can
always
stay
on
top
of
things,
but
without
cluttering
my
entire
app
well,
you
can
do
that
by
just
showing
a
max
of
four
like
we're
doing.
In
this
case,
you
can
also
change
the
time
zone.
So
if
you
want
you're
working
with
time
zones,
if
you've
ever
worked
with
dates,
you
know
how
complicated
these
things
can
become.
A
A
The
last
thing
I
wanted
to
show
for
the
agenda
is
our
custom,
rendering-
which
I
think
is
one
of
the
most
customized,
rendering
that
we're
offering
as
part
of
our
sample
gallery
is
our
events,
advanced
events
templating,
where
you'll
be
able
to
have
you
see
here
how
you're
saying
I
want
to
have
the
next
10
days.
I
want
to
have
a
maximum
of
seven
events
being
shown
in
there.
I'm
gonna
override
the
event,
so
basically
every
time
we're
gonna
print
or
render
an
event
on
the
screen.
A
We're
gonna
replace
the
html
that
mgt
usually
renders
by
this
html
here,
where
you're
going
to
be
able
to
register
some
functions
as
part
of
your
template
say
here,
I
want
to
have
a
day
from
date
from
date
time.
I
want
a
time
range
instead
of
the
start
time
and
the
end
time
I
want
to
be
able
to
if
there's
a
join
microsoft
teams,
meeting
link
in
the
body
preview.
Well,
I
want
to
render
that
as
a
as
a
link,
so
I
can
join
in
all
of
that.
A
All
of
these
this
sample
is
available
on
our
program
on
a
playground,
so
you
can
have
a
look
at
it,
but
you
can
see
how
complex
these
can
become
and
when
we're
browsing
here,
look
at
how
great
this
is.
It
really
gives
you
a
timeline
view
of
all
the
events
that
are
happening
around
you.
So
with
just
a
little
bit
of
css
a
little
bit
of
javascript
and
and
gt.
A
You
can
really
build
amazing
solutions
without
the
need
to
go
on
and
build
your
own,
your
own
stuff,
second
component-
and
I
see
we
have
three
minutes
left
so
we're
gonna
go
fairly
quick.
I
think
I'm
gonna
actually
just
show
the
top
ones
for
each
of
them,
one
of
them
being
planner.
Planner
allows
you
to
see
all
the
the
tasks
that
you
are
assigned
to
in
multiple
projects.
So,
if
I
click
here
on
assigned
to
me,
I
will
be
able
to
see
that
I
have
a
product
launch
event
a
logistics
project.
A
All
of
them
will
have
different
tasks.
If
I
click
on
product
launch,
I
will
see
all
of
them.
I
can
actually
act
on
them
and
close
them
or
complete
them.
You
can
see
it
here.
I
can
also
add
a
tasks
right
from
here.
So
it's
really
not
it's
it's
one
of
the
first
components
we
look
at
that
allows
you
to
do
some
rights
back
to
microsoft,
graph,
which
I
think
is
an
amazing
capability
that
we're
offering
lots
of
scenarios.
A
You
can
look
at
here
either
through
a
read-only
capability,
hiding
some
capabilities
targeting
a
specific
group
id.
So
you
just
want
to
focus
on
a
specific
group
id
and
so
on
and
so
forth.
The
last
one
is
the
2d1,
where
you
have
your
tasks,
but
also
all
your
different
task
lists
that
exist
in
microsoft.
To
do
so,
you
see
here
they
are
very
similar
in
nature,
because
both
of
them
are
managing
tasks,
but
they
have
their
small
particularity,
especially
because
there's
a
little
bit
less
metadata
attached
to
to
do
so.
A
For
example,
I
can
go
to
the
reading
list
now.
I
can
find
all
of
my
books
that
I
want
to
read
this
year,
which
would
deliver
value.
I
can
add
a
new
task
right
here
directly
to
my
reading
list
and
I
can
from
here
delete
the
task.
For
instance,
something
that
I
wanted
to
show
before
we're
ending
is
our
native
support
for
dark
mode,
so
mgt
supports
dark
mode.
Natively.
A
B
You
so
much
seb
great,
just
be
able
to
see
all
that
great
demos
and
additional
information.
We
did
have
a
couple
of
questions
in
the
chat
related
to
shared
calendars
and
a
couple
other
areas.
If
you
wouldn't
mind
responding
to
those
that'd
be
great,
I
I
will
absolutely
thank
you.
Everybody.
Thank
you.