Add to Calendar documentation

Text Here

Introduction

Welcome to the documentation for the 'Add to Calendar' field plugin for FLEXIcontent. This plugin extends the capabilities of FLEXIcontent, a robust content construction kit (CCK) designed for Joomla. With the 'Add to Calendar' field plugin, you can seamlessly integrate an 'Add to Calendar' button into your content, making it easy for users to save events and important dates to their calendars.

Key Features

The 'Add to Calendar' field plugin offers a host of powerful features, empowering you to enhance the user experience and streamline event management on your Joomla website. Here are some of the key features:

  • Simplified Event Management:  Easily create and manage events directly within your FLEXIcontent items, without the need for complex coding or external services.
  • Cross-Platform Compatibility: The 'Add to Calendar' button works across various calendar applications, ensuring compatibility with popular platforms like Google Calendar, Apple Calendar, Outlook, and more.
  • Custom Event Details: Tailor event information, including event title, date, time, location, and description, to meet your specific needs.
  • Integration Flexibility: Seamlessly integrate the 'Add to Calendar' button into your Joomla website's frontend, offering a convenient way for users to engage with your events.
  • Multi-Date and Recurring Events: Handle multi-date events and recurring events with ease, providing comprehensive options for event scheduling.
  • Extensive Display Customization: Tailor the appearance of the 'Add to Calendar' button to align with your website's style and branding. Choose from a wide range of display options, including flat, round, 3D, text, date, and more. You can also configure the display as a list of buttons, hide/show icons, and much more to create diverse viewing experiences.
  • Properties as Fields: Utilize content item properties as fields, allowing you to automatically populate event details like event name, description, location, start date & time, and end date & time. This feature streamlines the event creation process and ensures consistency in your event data.

In this comprehensive guide, we will provide step-by-step instructions on how to use and configure the 'Add to Calendar' field plugin within your FLEXIcontent setup, from installation and setup to advanced customization options and troubleshooting tips.

Let's get started!

Text Here

Prerequisites

Before you begin using the 'Add to Calendar' plugin, please ensure that your environment meets the following prerequisites:

  • PHP Minimum Version 8.0: The 'Add to Calendar' plugin requires PHP version 8.0 or higher for optimal performance and security. Make sure your hosting environment supports PHP 8.0 or higher.
  • Joomla Version 3.10 or Higher: Ensure that your Joomla installation is version 3.10 or higher to fully utilize the capabilities of the 'Add to Calendar' plugin.
  • FLEXIcontent Installation: The FLEXIcontent extension must be installed on your Joomla website for the 'Add to Calendar' plugin to function.
Good to know:

The 'Add to Calendar' field plugin is natively compatible with Joomla 5. However, please note that you may need the 'Behaviour - Backward Compatibility' plugin when working with FLEXIcontent until a fully native-compatible version is available.

Text Here

Download

To start using the 'Add to Calendar' field plugin, follow these straightforward steps:

1. Register or Log In and Purchase a License

To get started, you'll need to register or log in and purchase a license for the 'Add to Calendar' field plugin. Here's how:

  • If you don't have an account, you can create one during the license purchase process.
  • If you already have an account, simply log in using your existing credentials and proceed with the purchase of your 'Add to Calendar' extension license.

2. Download your files

After your subscription payment is validated, you will receive a download URL by email. Alternatively, you can access your download files as follows:

  • Log in to your account on our website.
  • Hover over Your Account in the site's main menu.
  • Locate Your Files in the dropdown menu.
  • In the Your Files section, find the 'Add to Calendar' extension package.
  • Click on the download link to save it to your computer.
Text Here

Installation

Before you can start using the 'Add to Calendar' extension, you need to install it on your Joomla website. The installation process slightly varies between Joomla 3 and Joomla 4. Here are installation instructions for both platforms:

Installing the Extension

  •  Log in to your Joomla administration panel.
  • Joomla 3:
    • Navigate to the Extensions tab in the top menu.
    • Select Manage from the drop-down menu.
    • Click on Install.
  • Joomla 4:
    • Navigate to the System tab in the side menu and find Install.
    • Click on Extensions.
  • Choose the Upload Package File tab.
  • Click the Browse for File button or drag and drop the ZIP file into the designated area.
  • Joomla will initiate the installation process once the file has been chosen or dropped.

Activating Plugins

When installing the 'Add to Calendar' package, both the 'Add to Calendar' field plugin and installer plugin will be enabled by default. If a problem occurs or if you need to re-enable a plugin manually, please follow the steps below. The process is quite similar for Joomla 3 and 4:

  •  Log in to your Joomla administration panel.
  • Joomla 3:
    • Navigate to the Extensions tab in the top menu and select Plugins.
  • Joomla 4:
    • Navigate to the System tab from the side menu, locate Manage and click on Plugins.
  • Search for 'Add to Calendar' in the list of plugins.
  • Click on the enable-icon icon to enable the plugin, or click on the plugin's name and enable the plugin by setting Status to 'Enabled'.
  • Repeat the same steps for the 'Add to Calendar Installer' plugin.

The 'Add to Calendar' extension is now successfully installed and activated on your Joomla website, and ready for use.

In the next section we'll guide you through the update proscess of the plugin, ensuring your extension stays up to date with the latest improvements.

Text Here

Updates

Keeping your 'Add to Calendar' extension up to date is essential to benefit from the latest improvements and features. The update process varies slightly between Joomla 3 and Joomla 4. Please follow the relevant instructions below.

Download ID

Let's start off by setting your download ID in the 'Add to Calendar' Installer plugin, this will be similar across Joomla 3 and 4.

Generating Download IDs

  • Log in to your account on this website.
  • Hover over Your Account in the site's main menu.
  • Locate Your Download IDs in the dropdown menu.
  • From the "Your Download IDs" page, select the number of IDs you wish to create from the dropdown.
  • Then click on Process to generate your download IDs.

You can create multiple Download IDs, each corresponding to a different domain. Once the Download ID is used, the corresponding domain will be defined automatically.

Configure Your Download ID

Now that you have generated a Download ID, locate the 'Add to Calendar' Installer plugin by following the steps mentionned before in the installation process. This time, make sure to click on the plugin's name to access the configuration.

  • In the Options tab, enter the Download ID you have just created.

This ensures that you can benefit from automatic updates while your license is active.

Updating the Extension

Automatic Updates

  • Log in to your Joomla administration panel.
  • Joomla 3:
    • Navigate to the Extensions menu and select Manage.
    • Click on Update.
  • Joomla 4:
    • Navigate to the System menu and locate Update.
    • Click on Extensions.
  • A list of available updates will be displayed. Check if the 'Add to Calendar' extension is listed. If not, click the Find Updates (J3) or Check for Updates (J4) button to refresh the list. If an update is available the extension should be listed. If you encounter any problems please refer to the Troubleshooting guide.
  • Select the 'Add to Calendar' entry in the list and click on Update to install the latest version.

Manual Updates

  • Download the latest version of the extension by following the instructions mentioned in the download section.
  • Then repeat the same steps as mentioned before in the installation process, accoridng to your Joomla version.

By following these instructions, you can ensure that your 'Add to Calendar' extension remains up to date with the latest improvements and features.

Text Here

Usage

In this section, we'll guide you through the process of creating, configuring and using a new 'Add to Calendar' field. This will allow you to customize the 'Add to Calendar' buttons presentation and setup according to your specific requirements.

Creating a New Add to Calendar Field

1. Access the FLEXIcontent Component:

  • Begin by logging in to your Joomla administration panel.
  • In the backend, navigate to the Components tab in the top menu (for Joomla 3) or in the side menu (for Joomla 4).
  • From the dropdown menu, select FLEXIcontent.

2. Add a New Field:

  • Within the FLEXIcontent component, locate the Fields section.
  • To create your new field, click on the New button to get started.

3. Choose Field Type:

  • In the field creation window, select Add to Calendar as the Field Type for your new field.
  • If you don't see "Add to Calendar" in the list, it's possible that you haven't enabled the plugin. Please refer to the installation guide if this is the case.

4. Assign the Field to a Content Type:

  • To make your new field functional, you need to assign it to a specific content type. In Types select at least one type to assign the field to. You have the option to assign the field to multiple types if needed.

5. Save and Close:

  • After configuring the 'Add to Calendar' field settings, click on either Add or Save & Close to create the new field.

You can now begin adding events to the content types to which you assigned this field.

Text Here

Configuring the Add to Calendar Field

Configuring the 'Add to Calendar' field is essential for tailoring the 'Add to Calendar' button's appearance and behavior on your website. Here's how to configure the 'Add to Calendar' field:

1. Access Field Configuration:

  • In the Fields section, locate the 'Add to Calendar' field you've created.
  • Click on the field's name to access its configuration.

2. Value Options:

Within the Editing tab under "Values" in the "FIELD TYPE specific configuration," you can define how the field behaves in the form view (administrator).

  • Required: Specify whether the field must be filled out when saving the content item.
  • Language: Choose the language in which the 'Add to Calendar' button should be displayed. By default, the option is set to "System," which evaluates to the site's language setup.
  • Timezone: Set a timezone for the 'Add to Calendar' button to avoid discrepancies between the calendar entry and the server/site time. By default, the timezone is set to UTC 0, but you can customize it to match your website's timezone or your target country.

3. Layout Options:

In the Viewing tab under Layout within the "FIELD TYPE specific configuration," you can determine how the 'Add to Calendar' button will be presented on your site in the Item view. Configure the following options to customize the button's appearance and behavior:

  • Enable Debug Mode: Toggle debug mode on or off to assist with troubleshooting and testing.
  • Calendars: Choose which calendars the 'Add to Calendar' button should be compatible with. Available options include Apple Calendar, Google Calendar, iCal, Microsoft 365, Microsoft Teams, Outlook.com, and Yahoo Calendar. Note that iCal is a common format for sharing calendar events, and selecting it enables compatibility with iCal-based calendar applications.
  • Button Style: Select the style for the 'Add to Calendar' button. Options include Default, 3D, Flat, Round, Neumorphism, Text, Date, and None. Customize the button's appearance to match your website's design.
  • Size: Specify the button's size using a number between 0 and 10. You can define a single number like "5" or up to three values like "8|6|4." The first value applies to large screens, the second to medium screens, and the third to small screens. If you provide two values, they apply to large screens and medium+small screens.
  • Light Mode: Choose the button's appearance mode: Light, Dark, or System (follows the system-wide appearance mode). This allows you to adapt the button's style to your site's overall design.
  • Buttons List (Display as Buttons List): Enable this option to display the 'Add to Calendar' button as a list of buttons. This makes it easy for users to choose their preferred calendar platform.
  • CSS Display Inline (CSS Inline Display): Choose whether to display the button using CSS inline display. This option offers flexibility in controlling how the button integrates with your site's layout.
  • Hide Button Label (Only Shows the Icon): Toggle this option to display only the button icon without the label. This provides a minimalist and compact look. Also applies when displaying as buttons list.
  • Button Label (Text Shown Inside the Button): Define the text to be displayed inside the 'Add to Calendar' button. Customize the label to convey the intended action, such as "Add to Calendar" or "Save Event."
  • Trigger: Define how the user activates the "Add to Calendar" button. Please note that the mode of interaction depends on the button's configuration. This option is primarily relevant when the button is displayed in its default mode, showing a list of supported calendars on hover or click. If you choose to configure it for modal display or button list view, for example, this setting will have no effect.
  • List Style (Calendar Types List Style): Choose the style for displaying the list of calendar types. Options include Dropdown, Dropdown-Static, Overlay, and Modal. Each style provides a different visual presentation for users to select their preferred calendar platform.
  • Hide Background (Background Set When Opening the List of Calendar Types): Toggle this option to hide the background that appears when users open the list of calendar types, such as a modal overlay.
  • Hide Button Icon (Only Shows the Label): Choose whether to hide the icon within the 'Add to Calendar' button, leaving only the button label visible. Also applies when displaying as buttons list.
  • Hide List Icons: Toggle this option to hide icons associated with the list of calendar types.
  • Hide Modal Icon: Decide whether to hide the icon in the modal window, which appears when users select a calendar type. Only applies when using multi dates.
  • Hide List Labels: Choose whether to hide labels within the list of calendar types.
  • Hide Checkmark (Checkmark Displayed After User Adds the Event to Their Calendar): Toggle this option to hide the checkmark that appears once the user successfully adds the event to their calendar.

These layout options allow you to fine-tune the appearance and behavior of the 'Add to Calendar' button to best suit your website's design and user preferences.

4. Properties as Fields:

In the "FIELD TYPE specific configuration," navigate to the Properties as Fields tab. This feature empowers you to connect specific content item properties with the 'Add to Calendar' field, using these properties as values for the events you wish to add to a calendar. You can link the following fields to other fields within your content items:

  • Event Name: Connect this field to the corresponding property in your content items to automatically populate the event name.
  • Event Description: Link this field to the relevant property in your content items to automatically include the event description.
  • Location: This field can be linked to various types of location information, such as an address or a remote call link, based on the property in your content items.
  • Start Date & Time: Connect this field to the corresponding property in your content items to automatically set the event's start date and time.
  • End Date & Time: Link this field to the relevant property in your content items to automatically determine the event's end date and time.

By establishing these connections between fields and content item properties, you can streamline the process of creating calendar events while leveraging existing data within your FLEXIcontent items. This not only simplifies event creation but also ensures consistent and accurate information when adding events to users' calendars.

5. Save Changes:

After configuring the 'Add to Calendar' field to your satisfaction, make sure to click the Apply or Save & Close button to save your changes.

Text Here

Creating Events

Let's explore how to seamlessly create and manage different types of events using the 'Add to Calendar' field within your FLEXIcontent item:

1. Create a New or Edit an Existing Item:

  • Begin by logging in to your Joomla administration panel.
  • In the backend, navigate to the Components tab in the top menu (for Joomla 3) or in the side menu (for Joomla 4).
  • From the dropdown menu, select FLEXIcontent.
  • Choose Items.
  • You can create a new item by clicking New and select the content type you've assigned the 'Add to Calendar' field to. Alternatively, you can click on an existing compatible item's title to begin editing.
  • Navigate to the <Your Item type> (Details) tab, in order to access your custom fields.

2. Creating Events:

Now, let's explore how to create and manage different types of events, all of which share common event details. When you click on the Edit button in the 'Add to Calendar' field, a form will open, allowing you to configure the details of your events. If you haven't linked these fields to item properties, you can set the following essential event details:

  • Event Name: Provide a name for the event.
  • Event Description: Add a description for the event.
  • Location: Specify the event's location, which can be an address or a link.
  • Start Date & Time: Set the event's start date and time. Not applicable when using multi-dates.
  • All Day: You can mark the event as "All Day." Not applicable when using multi-dates.
  • End Date & Time: Determine the event's end date and time. This field is available when the event is not marked as "All Day." Not applicable when using multi-dates.

Now, let's explore the different event types you can create:

  • Single Event: Suitable for one-time events.
  • Recurring Event: Ideal for events that occur on a regular schedule, set Recurring Event to "Yes". Choose the recurrence type based on your event's schedule. You can select from options such as daily, weekly, monthly, yearly, or use the more advanced RRule (Recurrence Rule) option.
    • Recurrence:
      • Daily: Set the recurrence interval in days (e.g., every 2 days).
      • Weekly: Specify the recurrence interval in weeks, and you can also select which days of the week the event repeats on. This works together with the recurrence interval.
      • Monthly: Define the recurrence by month type. You can choose a specific day of the month (e.g., 12th of the month) or use a weekday interval (e.g., every second Tuesday of the month). Selecting the weekday interval option opens a repeatable subform where you can set the day of the week and the interval (e.g., every second Monday or fourth Thursday).
      • Yearly: This option allows you to set an event at yearly intervals depending on the reccurence interval you've set.
      • RRULE (Recurrence Rule): is an advanced option for specifying complex recurring patterns for events, allowing you to define the frequency, interval, and other detailed rules for recurrence. Mind that the startDate needs to be valid within the given recurrence ruleset! Click here for a generator.
    • Recurrence Interval: Set the inteval of the recurring event. This is available for each type of recurring event except when using the RRULE. 
    • Recurrence Until: This option defines an end date for the recurrence. Be cautious when using it, as the plugin attempts to count the number of repetitions, which might cause issues, especially when dealing with complex recurring events. If unexpected results occur, try setting a later date to accommodate any discrepancies.
  • Multi-Date Event: For events spanning multiple dates, set Multi Dates to "Yes". This will open a "Dates" field, which is a Joomla subform field. In each subform field, you have these options:

    • Event Name: Enter a distinct event name for each date. To use the global event name, which could be either the linked event name or the event name defined earlier in the 'Add to Calendar' field, leave this field blank.
    • Event Description: Enter a distinct event description for each date. To use the global event description, leave this field blank.
    • Event Location: Enter a distinct event location for each date. To use the global event location, leave this field blank. Remeber a location can be anything, e.g.: an adress or a link.
    • All Day: Mark each date as "All Day."
    • Start Date & Time: Set the start date and time for each date.
    • End Date & Time: Determine the end date and time for each date. This field is only taken into account if the event is not marked as "All Day."

3. Edit Layout Parameters (Item)

To ensure your field appears in the item view, you'll need to place it within the item layout:

  • In the toolbar, click on Edit layout & global parameters.
  • Select the Fields placement tab.
  • Locate the 'Add to Calendar' field in the Custom (non-Core) fields list.
  • Drag & drop it onto one of the available zones.
  • Click Save to save your changes.

Now, the 'Add to Calendar' button will be visible on your website, allowing users to add your events to their calendars. To preview it, use one of the preview methods from the toolbar.

Text Here

Troubleshooting

Encountering issues with the 'Add to Calendar' plugin on your Joomla website can be frustrating, but it's essential to understand that solutions are readily available. This troubleshooting guide is designed to assist you in diagnosing and resolving common problems that may arise while using the plugin. Whether the 'Add to Calendar' button isn't appearing as expected, or you're facing difficulties with event properties and recurring schedules, this guide provides step-by-step solutions to get your calendar integration back on track.

Issue: The 'Add to Calendar' extension update doesn't appear in Joomla.

Solution:

  • Refresh Update Sites: Sometimes, updates may not show up due to outdated or incomplete update site data. To address this, follow these steps:
    • Log in to your Joomla administration panel.
    • Joomla 3:
      • Navigate to the Extensions menu and select Manage.
    • Joomla 4:
      • Navigate to the System menu, and look for Update.
    • Click on Update Sites.
    • Click the Rebuild button to ensure your update sites are up to date.
  • Contact Support: If the update still doesn't appear, and you've tried the steps above, it's advisable to contact our support team for further assistance. Visit our Support Page, submit a support request, and provide details about the update issue you're facing. Our support team will review your request and provide guidance to resolve the problem.

Issue: The 'Add to Calendar' Button Is Not Visible on My Website.

Solution:

  • Check Field Placement: Ensure that the 'Add to Calendar' field is correctly positioned within your content item layout, following the provided instructions.
  • Field Configuration: Review the field's configuration options, and consider enabling debug mode to identify specific issues related to button display.
  • Template Compatibility: Some Joomla templates or themes may conflict with the plugin. Test with a default Joomla template to rule out template issues.

Issue: The 'Add to Calendar' Button Doesn't Work When Clicked.

Solution:

  • Content Item Configuration: Ensure that the 'Add to Calendar' field is assigned to the appropriate content item type. Verify that you've filled in the necessary event details, or that you've linked the relevant properties.
  • Button Configuration: Double-check the field's configuration, including the 'Event Name,' 'Event Description,' 'Location,' 'Start Date & Time,' and 'End Date & Time.' Ensure they are set correctly or linked to your item properties.

Issue: Issues with Event Properties.

Solution:

  • Linked Properties: If you've linked event properties to content item fields, verify that those properties are correctly populated with the required information. If not, the button may not work as expected.
  • Date and Time Formats: Ensure that your date and time formats are correctly configured in your Joomla settings. Inconsistent date and time formats can cause issues with event creation.

Issue: Problems with Recurring Events.

Solution:

  • Recurrence Configuration: For recurring events, ensure that you've selected the appropriate recurrence type (daily, weekly, monthly, yearly), set the recurrence interval, and specified any necessary details, such as weekly recurrence by day or monthly recurrence by type.
  • Recurrence Until: Be cautious with the 'Recurrence Until' setting, as it might not work as expected for complex recurrence patterns. If you encounter issues, consider adjusting the end date.

Following these troubleshooting steps, you can resolve common issues when using the 'Add to Calendar' Field. For more complex or specific issues, please reach out to our support.

Login

We can create your own desire

You need a component a plugin , module or template ourteam is compose by Joomla! administrator certified, Designer and fullstack dev. 

Secure payment

by Paypal and Stripe

    

Copyright Com'3Elles @ since 2023
https://extensions.com3elles.com  is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla!® name and logo is used under a limited license granted by Open Source Matters, the trademark holder in the United States and other countries.