Simple calendar planner component build in magnolia cms(FullCalendar.js, Bootstrap, Moment.js, Bootstrap datetimepicker ...)

Features

Offers an editor-friendly way to create/update events and with entering end/start date to show on fullcalendar if Allow actions is selected from planner dialog other users who access the calendar page can create also events by clicking a day from calendar or updated their own events

Usage

Enable the planner-component desired areas like this:

availableComponents:
    planner:
     id: planner:components/planner

Include following css files in page template header

    <link rel="stylesheet" href="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/css/fullcalendar.min.css">
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/css/fullcalendar.print.css">
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/css/planner.css">

Include following js files in page template footer

  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/jquery-3.2.0.min.js"></script>
  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/bootstrap.min.js"></script>
  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/moment.js"></script>
  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/bootstrap-datetimepicker.js"></script>
  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/fullcalendar.min.js"></script>
  <script src="${ctx.contextPath}/.resources/magnolia-calendar-planner/webresources/js/functionality.js"></script>

Create shortcut for event categories app Create simple content node with name "eventCategories" under any available magnolia menu groups /* /modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps/eventCategories */

To avoid further configuration create folder with name "events" Inside folder create categories for events and set colors for each category. If "events" folder name is already taken in your project create new folder and update the following yaml files to match the new folder name

light-modules/magnolia-calendar-planner/dialogs/components/planner.yaml

#line 14 and line 40
#from path: /events
#to path: /newFolderNameForEventCategories

light-modules/planner/templates/components/planner.yaml

line 5
from rootPathForEventsCategories: /events/
to rootPathForEventsCategories: /newFolderNameForEventCategories/

Information on Magnolia CMS

This directory is a Magnolia 'light module'. https://docs.magnolia-cms.com

License

Contributors