This tool allows you to create a calendar view from a form. The form should have the following fields:

• Title: A text field.
• Start Date: A date or datetime-local field.
• End Date: A date or datetime-local field.

1- List Page: This page displays all records of the component, with options to customize the view and export the data.

Read more about the list page and how to customize the table through this link.

2- Create: This action allows you to create a calendar.

• Name: Name of the calendar (required, maximum of 255 characters).
• Form: The form that you want to use to create a calendar view (required).
• Date Format: Choose the date format: (required)
  • January 1, 2024
  • 2024-07-20
  • 20-07-2024
  • 07-20-2024
• Modal Size: The size of the modal that appears when you click on the event title to show more details: (required)
  • 1- Small
  • 2- Medium
  • 3- Large
  • 4- Extra Large
  • 5- Full Screen
• Hide Ended Events: If checked, any finished events will not be rendered in the calendar view.

3- Calendar Designer: After creating the calendar, you will be redirected to the calendar designer where you can design the calendar.

• Event Title: Choose the field that will act as the event title.
• Start Date: Choose the field that will act as the start date.
• End Date: Choose the field that will act as the end date.
• Modal Fields: Select the fields you want to include when the user clicks on the event title. You can also change the order of these fields.
• Color: If you want a unique color for each title, you can choose a color field.

4- View: This action allows you to see the calendar details.

• ID: The ID of the calendar.
• Name: Name of calendar.
• Form: The form used to create the calendar.
• Date Format: The date format of the calendar.
• Modal Size: The modal size of the modal when user click on the title.
• Created Date: The created date of the calendar.
• Created By: The creator of the calendar.
• Updated Date: The updated date of the calendar.
• Updated By: The person who updated the calendar.

5- Edit: This action allows you to edit the calendar.

• Name: Name of the calendar (maximum 255 characters).
• Date Format: Choose the date format:
  • January 1, 2024
  • 2024-07-20
  • 20-07-2024
  • 07-20-2024
• Modal Size: The size of the modal that appears when you click on the event title to show more details:
  • 1- Small
  • 2- Medium
  • 3- Large
  • 4- Extra Large
  • 5- Full Screen
• Hide Ended Events: If checked, any finished events will not be rendered in the calendar view.

6- Calendar View: This page allows you to see the form like a calendar.

7- Delete: This action allows you to delete the calendar.