PEF Schedules
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.
Installation
- Download and install the module in your Drupal project.
- Enable the module by navigating to
Admin > Extend
in your Drupal admin interface. - Go to the
/admin/openy/branch-schedules
and select a branch.
Usage
After choosing a brunch, you can view the calendar, the main features of the calendar:
- View events in weekly or daily format
- Viewing the main information of the event (clicking on the event)
- Creating a new event (content type session)
- Update of existing events
- Downloading the schedule in PDF format
- Filtering results by categories
Issues or things worth knowing (TUDUS):
- 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
- The color is fixed to the session and not to the category
- PDF format is A3
Retrieving Events
The module provides controllers to handle AJAX requests for fetching events. 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.
Requirements
- Drupal 9|10
- Open Y Repeat
- Vue.js 3
- Axios
- FullCalendar