Calendar Web Part

This Web Part allows you to manage events on a calendar. Uses an existing calendar list on any site. The location and name of the list is defined in the properties of the web part.

Some Feature:

  • Add attendes
  • Add location from Map
  • RichText Editor, support add images, embedded content, format text, etc
  • Color events (random generated)
  • Callout  with information about owner of event, location and title.
  • Multiple Calendar View (Month, Week, Day and Agenda)

 

 Screenshots

Calendar Views

 

screen1.png

 

Web Part Properties

 

screen1.0

 

screen2

 

Calendar Week View

 

screen1.1

 

screen1.2

 

Calendar Day View

 

screen1.3

Calendar Agenda View

 

screen1.4

Add Event

 

screen3

 

screen4

 

screen5

 

Edit Event

 

screen6

 

screen7

 

 

Delete Event

 

screen9

 

 

 

This web part soon will be available on SharePoint/sp-dev-fx-webpart.

Thank you for reading!

Sharing is Caring!

 

12 COMMENTS

  1. Hello Mendes,
    Thank you for sharing calendar code.
    Is this webpart working in IE11?
    I have tried above webpart from SharePoint/sp-dev-fx-webpart but it is not working in IE11. In Chrome working properly.

    Issue faced:
    1. Page changing to blank screen after (2/3 sec of ) page loaded completely.
    In console it is throwing error:
    “Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args%5B%5D=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args%5B%5D= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ”

    Logged in SharePoint/sp-dev-docs:
    https://github.com/SharePoint/sp-dev-docs/issues/4571

    Steps taken:
    Initially it was not displaying on IE11 but with the help of few polyfills it displayed on page. Once page and webpart loaded completely i am facing above issue.

  2. Looks great! Nice work.

    If you make it possible to overlay multiple calendars/lists from different sites in one, similar to the classic SharePoint calendar, and then allow filtering base on calendar and/or other metadata + add a good year view (with one cell per day), our company would probably pay a decent amount for this calendar. There are no modern calendars out there offering a year with and good filtering AFAIK, and our company needs a global calendar application, ideally based on a SharePoint calendar(s) so can allow Exchange sync.

    Thanks!

  3. Hello Joao i downloaded the sample from the github link and deployed it to my tenant. I’m able to add events fine from the webpart page but when i click on edit event it gets stuck. It brings an empty panel upon click of edit event and doesn’t let me edit events. Do you know why this is happening. Please let me know.

  4. Hi Joao,

    I am trying to use this web part in SharePoint 2019 onPrem (Modern page).

    Do you have a version for this environment?

    I tried to ” npm install” this but I got a lot of errors.

    Any suggestion?

    Thanks,
    Ricardo

    • Hi Ricardo,

      Did you achieve this in SharePoint 2019 onPrem environment? I need to do the same thing. For me it’s throwing the errors same like you.

  5. Hi, thank you for sharing this. I would like to try it soon. Btw, may I know if you are planning to add Year view inside the calendar? Thank you and have a nice day!

  6. Hi,

    The web part seem to show the events one hour earlier than the same events in the default SharePoint calendar.

    Something to do with daylight savings? The time zone is correct (GMT +1)

  7. Hi João,

    Thanks for your post.

    How do I get the Calendar web part into my tenant?
    I cannot find a package file to download on GitHub.

  8. Hi All,

    I have a requirement where I want to get data from multiple SPO list and display events on the calendar.

    The displayed events can be controlled using check boxes.

    For example if I only check calendar 1(list name) only events from calendar 1 will be displayed but if I check multiple lists then events from all checked lists should be displayed together (just as calendar overlay).

    Can you please help me with such a solution.

LEAVE A REPLY

Please enter your comment!
Please enter your name here