Wondering what’s next for npm?Check out our public roadmap! »

magnolia-calendar-planner

1.0.2 • Public • Published

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

planner-dialog-actions events-in-dialog calendar-view event-update event-new

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

Install

npm i magnolia-calendar-planner

DownloadsWeekly Downloads

3

Version

1.0.2

License

MIT

Last publish

Collaborators

  • avatar