This article provides a comprehensive guide on implementing calendar views in your Knack app and covers all the available settings.
This article covers the following topics:
What are calendar views?
A calendar view is utilized to showcase numerous records from your database in a calendar format that is accessible through your Live App.
What do calendars look like in the Live App?
Calendars display multiple records from one of the tables in your database in a graphical calendar interface.
Calendars can be displayed in multiple formats, such as a month, week, or day views:
When you click on a calendar event, you will be able to see more details in a popup modal. You can also access each record's details by linking them to a child page where you can edit or view more information about that specific record.
What do I need to be able to use calendars?
Calendar views are only available if a Date/Time field is used in your table. Only tables that have at least one Date/Time field will be available as an option to display records within a calendar view.
Note: In order to utilize the date/time field in a calendar view, you must enable the Calendar Options in the field's settings by selecting "Yes, add options like repeat and end-time to use with a calendar". (Refer to the image above.)
Where do I access calendars?
You can easily add and access calendar views in the Pages section of the Builder, just like any other view types.
To add calendar views to your pages, simply click on the "Add View" button. To find existing calendar views, navigate to the specific page in your Builder that contains the calendar view.
Tip: To learn more about how to add, edit, and delete calendar views from your app, see About Views.
Note: By default, new calendars will use the first date/time field in the table's field list as the source to display records in the calendar. The first short text field will serve as the label, and the first six fields will be used for displaying popup details.
Adding All Day and Repeating Events
To enable the option of adding all day and repeating events, make sure to use a Date/Time field in your app with the calendar options enabled. When updating the date/time field value via inline-editing in the Builder, you can define whether the event is an all day event or a repeating event.
To access the settings of a calendar view, simply hover over the view and click on the pen icon that appears at the top left corner:
This action will open the view settings in the toolbox located to the left of the view preview. For calendar views, you will find the following options:
The Source section is where you can manage the records that will be displayed in the calendar.
By default, the calendar will display all the records from the table. However, in the Source section of the settings, you have the flexibility to customize which records are shown by adding additional rules and filters.
Data: You have the option to include filters to narrow down the records that will be displayed. For instance, you can specify a filter to show only the Events that have a status field value of "Approved".
Limit: You have the option to display all the available records or choose to limit the number of records shown.
Tip: To learn more on working with views' source, see this article here.
The "Calendar Settings" section allows you to customize how the calendar interacts with your table to showcase events.
Below is a list of the available options in the Calendar Settings section, arranged from top to bottom:
Display: The Calendar option is the default choice when using a graphical interface, allowing you to view events in a calendar format. Alternatively, the list option enables you to display events as rows of text while still being able to navigate through different date ranges such as days, weeks, or months.
Starting Range: The calendar provides various options to display events in different date ranges that are by month, by week, or by day. Users have the flexibility to choose the range they want to view in the calendar.
This selection determines the starting range for the calendar.
Date Field: Choose a field that the calendar will utilize as the date to position each event on the calendar. This field must be of the Date/Time field type.
Label Field: Choose a title, name, or any other field that can easily identify the entire record, and the calendar will display it alongside the date value.
Week Start: Choose whether you prefer the week on your calendar to start on Sunday or Monday.
Exclude Weekends: Select this option to exclude weekends from the calendar.
Starting & Ending Time: Specifies the time range displayed in week and day views.
Feeds: Feeds provide users with the ability to download feeds that contain all the events displayed in the calendar:
Show RSS Feed Link: An RSS feed can be subscribed to and will automatically update events in an RSS feed reader.
Show iCal Download Link: A downloadable format that can be used to import the current events into another calendar service. Only the date/time and label field values will be included in the download.
Notes on Feeds:
- The iCal download/URL of your calendar events will include only the upcoming and previous six months of events, based on the date you download the events. The iCal format will also not update with new events automatically from your App to the secondary calendar.
- The feed will not work if it's meant to show records connected to the logged-in user, or similar. Only the date/time and label field values will be included.
- You can sync Knack calendar events to a Google calendar by right-clicking the iCal download link (on your Live App calendar view) and selecting the "Copy Link Address" option. You can then paste that URL into the “Add by URL” option in the Other Calendars section of your Google Calendar.
- If you get an error, "We could not parse the calendar at the URL requested", it likely is due to the file size of your iCal .ics file. Google recommends a file size of less than 1MB, so the number of records or other filters may need to be applied to keep the file size under that limit.
Event Options: These options provide additional functionalities for users when they click on a date/time on the calendar.
Click on an event to show details: When enabled, users have the ability to click on each event and access more detailed information through a pop-up modal.
Please refer to the Event Details section below for instructions on formatting this pop-up.
Click on the calendar to add events: When enabled, users have the ability to click on a specific day in the calendar to effortlessly add a new event. The date field will automatically default to the selected day.
For instructions on formatting this form, please refer to the New Event Form section.
Drag events to different times: When activated, users have the ability to drag an event and modify the date, time, and duration as needed.
Label Format: Specify the format in which field labels will be displayed on event details.
Event Colors: Customize the display of events by applying rules to showcase them in various colors based on the criteria you set.
Filters Options: Enables you to determine the users and criteria for filtering your records in the view.
Don’t allow records to be filtered: By disabling this option, users will have the freedom to add any filters they prefer to the calendar. This will result in an "add filters" link being displayed above the calendar interface.
Allow users to add custom filters: Filters provide users with tools to refine the records displayed in the calendar. You can add filters as options for the user to choose from or as a menu.
- Enabling users to add filters will result in a filter button appearing above the calendar view, as shown in the example below.
- As soon as a filter is added, the calendar will automatically update. Users of your Live App can add multiple filters as needed.
Which fields can be filters: You have the ability to select the fields that will be available as filters. This can be limited to the fields used in the calendar view or include all the fields in the table.
Filter defaults: You have the option to include preset filters that will automatically filter the records when the page loads.
Use a filter menu: Enabling a filter menu will display links above the calendar that users can click on to filter the records based on the rules you have set up.
Title & Description: This section allows you to give your calendar view a title and provide a description to give your users a better understanding of the content included in this calendar.
Title: This section will determine the main title displayed above the calendar view.
Description: You have the option to include additional description text that will be displayed below the calendar title.
If your calendar is set up to display additional information about a record when you click on it in the calendar, you can customize the details that appear here. The event details follow the same format and have the same settings as the details view.
Tip: To learn more about managing details views, see this article here.
New Event Form
If your calendar is set up to enable the addition of new records when the calendar is clicked, you can easily manage the form inputs in this section. The event form follows the same model as the form view.
Tip: To learn more about form view settings, see our article here.
Notes and Troubleshooting
- If you have enabled calendar options for a Date/Time field and the end date is set before the start date's value, the calendar will automatically use the end date as the start date, and vice versa.
- If a calendar view is set to display in the month view, the "All Day" option on the Add Event Form in the Live App will be automatically checked by default. However, in week and day view displays of a calendar view, the "All Day" option is not checked by default when adding a new event.
- Currently, event forms do not support submit rules, display rules, record rules, and email rules like form views do.