PEF Schedules

The PEF Schedules module allows Ys to create and manage schedules with a simple, calendar-based view. It leverages the FullCalendar library for a rich, interactive experience.
Tags:

YCloudYUSA/y_pef_schedule

The “PEF Schedules” module provides a calendar-based interface for creating and managing branch schedules. It integrates with the Open Y platform, allowing for seamless schedule creation and display.

Key Features:

  • Calendar-Based Interface: Utilizes the FullCalendar library for an intuitive drag-and-drop scheduling experience.
  • Branch Schedules: Allows administrators to create and manage schedules for different branches.
  • Configuration Options: Settings include configurable time intervals for calendar slots, event snapping granularity, and slot label intervals.
  • Integration with Open Y: Works with existing Open Y content types like Activities and Classes.
  • Display Options: Schedules can be displayed using the Simple Schedule block, Activity Finder, or Group Schedules.
  • PDF Export: Option to download schedules as PDF documents.

Configuration

The module provides settings for customizing the calendar’s appearance and behavior:

  • Slot Duration: Defines the length of each time slot (e.g., 00:30:00 for 30 minutes).
  • Snap Duration: Determines the granularity of time slot selection and event dragging (e.g., 00:15:00 for 15 minutes).
  • Slot Label Interval: Specifies the interval between time labels displayed along the calendar’s axis (e.g., 01:00:00 for every hour).
  • Min Time: The earliest time visible on the calendar (e.g., 04:00:00).
  • Max Time: The latest time visible on the calendar (e.g., 23:00:00).
  • Default Color: Sets the default color for activities displayed on the calendar, using a hexadecimal color code (e.g., #3788d8).

These settings can be accessed at Admin > YMCA Website Services > Settings > Schedules calendar settings (/admin/openy/settings/schedules-calendar).

Block Content Type

The module introduces a new block content type:

  • Simple Schedule: Provides a calendar view of a branch schedule.

Menu Links

The module adds the following menu links:

  • Schedules Calendar: Located under Admin > Content, allows administrators to select a branch and view its schedule.
  • Schedules calendar settings: Located under Admin > YMCA Website Services > Settings, provides access to the module’s configuration settings.

Dependencies

  • drupal:openy_repeat
  • drupal:colorapi

Repeat Schedules Paragraph

The “Repeat Schedules” paragraph type provides additional configuration options for displaying schedules:

  • Display instructor: A boolean field to show or hide the instructor’s name in the schedule display.
  • Display end time: A boolean field to show or hide the end time in the schedule display.
  • Categories exclude: Allows excluding specific activity categories from the schedule display.
  • Filter: Allows filtering content by category, class name, or instructor name.

Templates

  • branches-list.html.twig: Template for displaying a list of branches with links to their respective schedules.
  • block--lb-simple-schedule.html.twig: Template for rendering the Simple Schedule block.

Additional Information

For installation instructions and usage details, refer to the following resources:

The Y PEF Schedule module provides a calendar functionality for scheduling events. It includes a Vue.js component, fullcalendar-app, to display and interact with the calendar.

Requirements

Installation

composer require ycloudyusa/y_pef_schedule
drush en y_pef_schedule lb_simple_schedule
  1. Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.
  2. Enable the module by navigating to Admin > Extend (/admin/modules) in your Drupal admin interface, then enabling "Y PEF Schedules Admin tool" and "LB Simple Schedule".

Configuration

  1. Configure the calendar settings at Admin > YMCA Website Services > Settings > Schedules calendar settings (/admin/openy/settings/schedules-calendar)
  2. Go to Admin > Content > Schedules Calendar (/admin/openy/branch-schedules) and select a branch.

After choosing a branch, you can view the calendar. The calendar features include:

  1. Viewing events in weekly or daily format.
  2. Viewing the main information of the event (by clicking on the event).
  3. Creating a new event (using the Session Content Type).
  4. Updating existing events.
  5. Downloading the schedule in PDF format.
  6. Filtering results by categories.

Showing the calendar on a page

Once you have added sessions to a calendar, you can add the calendar block to a Layout Builder page to display on the site. Ensure the "LB Simple Schedule" is enabled first.

  1. Edit the Layout of a Layout Builder page (Branch, Landing Page, etc).
  2. Create or find a section, then Add Block.
  3. Choose Add custom/content block then Simple Schedule.
  4. Add a Title and choose a Branch to populate the calendar.
  5. Save the block and the page.

Customization

A few options are available for advanced customization of the calendar.

Retrieving Events

The module provides controllers to handle AJAX requests for fetching events. To create a custom request, use the following route in your JavaScript code:

axios.get('/fullcalendar-api/get-event-data-date-range/{location}/{start}/{end}/{category}')
  .then(response => {
    const events = response.data;
    // Process the received events as needed
  })
  .catch(error => {
    console.error('Error fetching events:', error);
  });

Replace {location}, {start}, {end}, and {category} with the appropriate values.

Creating Events

The fullcalendar-app component allows users to create events interactively. When a date is clicked, a modal form is displayed for users to enter event details such as title, category, time, and date.

To customize the form or extend the functionality, refer to the Vue.js component documentation and customize the handleDateClick and createEvent methods in the fullcalendar-app component.

Troubleshooting

Known issues

  1. After creating a series of events, it is created, but only one event is displayed in the calendar, the page must be refreshed to see the correct data
  2. The color is fixed to the session and not to the category
  3. PDF format is A3
Last modified March 11, 2025: feat: improve docs (3e852052)