--- title: "Interface Page Layout - Calendar" description: "Calendar layout displays records as events on an interactive time-based calendar." url: https://help.stackby.com/es/articles/517-interface-page-layout-calendar collection: "Stackby Interfaces (App Builder)" updated: 2026-09-02 language: es alternates: [en] --- # Interface Page Layout - Calendar Calendar layout displays records as events on an interactive time-based calendar.

Plan Availability

Free, Economy, Business, Pro, Enterprise

Permissions

Owner / Creator to configure. Editor to add/edit events. Viewer to browse.

Platform

Web/Browser, Mac app, Windows app

The Calendar layout displays records as events on an interactive time-based calendar. It is the ideal Interface layout for any data that has a temporal dimension — deadlines, schedules, events, campaigns, sprints, and milestones. Users can navigate between month, week, and day views and interact with records directly from the calendar. ![](https://staticfiles.gleap.io/ghelparticle/TjWhphG1nVZwcfJ7jS5rTWbkEByovUw57xhnaW2TB8YsNvU5Yk0CFAhrCG24a0Ajyz5dBkxmimz.png) ### **Common Use Cases** - Content calendar — Schedule blog posts, social media, and campaign launches by publish date - Project milestones — Visualize deadlines and delivery dates across all projects - Event management — Track events, sessions, bookings, or appointments - Sprint planning — Map tasks to sprint start/end dates on a shared team calendar - Leave/holiday tracker — Display approved leave dates by employee - Editorial calendar — Plan and schedule articles from draft to publications. ## **Creating a Calendar Layout Page** 1. In the Interface editor, click + Add Page in the left panel. 2. Select Calendar from the Layout Picker. Click Next. 3. Choose the source Stack and click Finish. 4. Configure the Date settings to select the date field(s) for the calendar.

⚠  Important

The Calendar requires at least one Date field in the source Stack. If no date field exists, create one in the Stack before building the Calendar page.

## **Date Settings** The date settings are the most critical configuration for a Calendar layout: #### **Start Date Field** Select the date field from the source Stack that determines when each record (event) appears on the calendar. This is required. #### **End Date Field (Optional)** Select a second date field that represents when the record ends. When an End Date is configured, records span across multiple calendar days as range bars rather than appearing as single-day events. Ideal for projects, events, or any record with a start and end period.

📝  Note: The End Date field cannot be a computed field (Formula, Rollup, or Last Modified Time). Use a regular Date field. If your end dates are calculated by a formula, consider duplicating the formula result into a writable Date field via automation.

#### **Initial View** Set the default calendar timescale that users see when they open the page: - Month — Shows a full month grid (default). Best for high-level scheduling and deadline awareness. - Week — Shows a 7-day week with hourly slots (if times are enabled). Best for detailed scheduling. - Day — Shows a single-day hourly view. Best for day-specific event management. #### **Position** Set where the calendar initially scrolls to — Today (default), or a specific date. "Today" is recommended for live operational calendars. #### **Set for all visits** When toggled on, the initial view and position settings are locked for all users — they always see the same starting state when they open the page. When toggled off, users can change their view (month/week/day) and the calendar will remember their last position on return visits. ![](https://staticfiles.gleap.io/ghelparticle/dKgN4XQfqvHLcx6guAi07GB2FMbHjjb0tu9h36EBWN14nA7vei4iaQdwXrT0vqU2fxkApQPUtnd.png) ## **Calendar Visualization Properties** ### **Data** - Sort by — When multiple events fall on the same day, set how they are ordered within the day slot. - Filter by — Limit which records appear as events. Examples: show only records with Status = "Confirmed," hide cancelled events, show only events belonging to the current user. - Fields — Choose which fields appear in the event preview popup when a user clicks on a calendar event. - Label — Configure which field's value is displayed directly on the calendar event tile. Due to space constraints, short text fields (name, title) work best. You can configure up to 2 label fields. - Label image — Choose an attachment field to display a thumbnail image on the event tile. Useful for photo-heavy calendars like content or product calendars. ### **Appearance** - Color by — Apply color to calendar event tiles: - By Select field — Event tiles inherit the color of the record's selected option. - By Conditions — Custom color rules (e.g., red for overdue, green for completed). - Fit image size — Resize label images to fill the tile area without overflow. ![](https://staticfiles.gleap.io/ghelparticle/yWQzkKZHyGj5661FwC4VNMfauxUf1uZgWoI9mUH9pd8TfAFnrpbJwVIMI8CnRhsHQL9ZDd6nxFU.png) ## **User Filters** Configure Tabs or Dropdown filters to let users filter the calendar. For example: - Tabs: "All Events," "My Events," "This Week's Deadlines" - Dropdown: Filter by Team, Project, or Status. ![](https://staticfiles.gleap.io/ghelparticle/Sh32wD5UdCs9oX2biansOxxp6wrp6LBC7qyU2WpyVkq9lvhwpXS0KLNQty9mP9kIRxbzggZWhgC.png) ## **User Actions** - Edit records inline — Allow users to click an event tile and edit field values in a quick-edit popup without opening the full record detail panel. - Add / delete records inline — Show a + button on each day slot so users can create new events directly on the calendar. New events are pre-filled with the clicked date. Users can also drag existing events to a different date to update the date field. - Click into record details — Click an event to open the full record detail panel for deep editing.

⚠  Important: Dragging events between dates requires Edit records inline to be enabled. The date field must also be a writable date field — computed date fields (Formula, Created Time, etc.) cannot be dragged.

## **Advanced Settings** - Allow users to export data as CSV — Export visible calendar records as a CSV. - Allow users to print — Print/PDF the current calendar state. The print output shows the calendar in the current view (month/week/day) and zoom level. ## **Tips & Best Practices** ### **Combining Start + End Dates** Using both a Start Date and End Date field creates spanning event bars that visually communicate duration. This is particularly powerful for project timelines and content schedules where knowing how long something runs is as important as knowing when it starts. ### **Time-Aware Calendars** If your date field includes time (date + time format in the Stack), the Calendar layout will show events with specific hour slots in Week and Day views. This enables scheduling tools like meeting calendars, class schedules, or shift planners. ### **Multiple Calendars in One Interface** Add multiple Calendar pages to the same Interface — each connected to a different Stack — to create a multi-source calendar view. For example: a "Marketing Calendar" page sourced from the Content Stack, and a "Product Calendar" page sourced from the Features Stack. ## **Frequently Asked Questions** **Why don't events appear on the calendar even though I have records with dates?** Check the following: (1) Confirm the correct date field is selected in Date settings. (2) Verify the records are not filtered out by page-level or visualization-level filters. (3) Check that the date values in the records are within the current calendar month/week/day being displayed. (4) Ensure the date field contains actual date values, not text that looks like dates. **Can I show events from multiple Stacks on the same calendar?** Not on a single Calendar page — each page is connected to one source Stack. To see events from multiple Stacks, enable multiple Calendar pages (one per Stack) and let users toggle between them, or use a Dashboard page with multiple Calendar visualizations from different Stacks. **Can I set recurring events on the calendar?** The Calendar layout displays individual records as events. Stackby does not natively generate recurring event instances. For recurring events, use Stackby Automations to create records on a schedule, or manually create multiple records (one per occurrence) and filter the calendar to show only upcoming instances. **Why can't I drag events to different dates?** Dragging requires: (1) Edit records inline to be enabled in User Actions, (2) the date field to be a writable date field (not a computed field like Formula or Created Time), and (3) the user to have Editor permissions on the Interface.