Calendar
Definition
The Calendar Widget in Zenphi allows you to visually display records from a selected table as calendar entries, using one of your table’s Date/Time fields as the basis for positioning them on the calendar. This makes it ideal for scheduling, tracking deadlines, managing appointments, or monitoring project timelines — all from a centralized and interactive dashboard view.
Each entry on the calendar can include additional field data for context, with full support for both single-day events and multi-day durations (using start and end dates). Users can interact with calendar records directly — adding, editing, or deleting entries — and optionally trigger flows or navigate to detail pages using action buttons.
Whether you’re managing an events calendar, a campaign timeline, or task schedules, the Calendar widget turns raw data into an easy-to-understand, intuitive visual timeline — enabling teams to stay aligned and organized in real-time.
Example Use Cases for Calendar Widget
1. Company-Wide Leave Calendar
HR teams can use the Calendar Widget to display all approved employee leave requests in one unified view. Events are pulled from a "Leave Requests" table using the approved leave date range. This helps team leads plan resourcing and avoid conflicts.
2. Project Milestone Tracker
Project managers can track upcoming milestones by connecting the calendar to a “Project Tasks” table. Each milestone has a start and end date and is color-coded by project. This gives stakeholders an at-a-glance view of critical deadlines across projects.
3. Interview Scheduling Overview
Recruiting teams can display scheduled candidate interviews based on the interview date field in a “Job Applications” table. Each event card shows candidate name, role applied for, and assigned recruiter, keeping everyone aligned with interview schedules.
4. Event & Webinar Calendar
Marketing teams can maintain a shared calendar of upcoming webinars, product demos, or launch events. Using records from an “Events” table with start and end dates, this calendar makes planning and promotion easier across the organization.
5. Training & Certification Tracker
L&D departments can display scheduled internal training sessions and certification renewal dates. Each card shows the training topic, facilitator, and attendees, helping ensure no one misses their upskilling sessions or deadlines.
Configuration
The Calendar Widget is built to offer flexibility and control when visualizing your data across time. Here's a breakdown of how to properly configure it to match your use case:
1. Data Source
The first step is to select a Zenphi Table as the data source for the widget. The table should contain at least one Date/Time field, as calendar placement depends on temporal data.
2. Fields to Show
You can customize which columns from your table will be displayed on each calendar event.
- Select any number of fields to show on the calendar entry — from just a title to a full set of contextual metadata.
- The first field selected will act as the main visible title on the calendar view.
- Remaining fields will be visible in hover or detail overlays when interacting with each event.
Example:
- First field: "Task Name" → Appears as the calendar entry's title.
- Additional fields: "Owner", "Priority", "Description" → Displayed on hover or in detail view.
3. Start Date Field
In the “Which Date/Time field would you like to use as the start date?” section, all Date/Time type fields from your table will be listed. Select the one you want to base your event start point on.
This is mandatory — without a start date, records can’t be placed on the calendar.
4. Has End Date?
This toggle defines whether the calendar event is single-point (e.g., a meeting) or duration-based (e.g., a campaign).
- If disabled: The record will be shown as a single event at the exact time/date defined in the start date.
- If enabled: You will be prompted to select an End Date from available Date/Time fields. The record will then span across the start and end range.
🧩 Examples:
-
Single-Day Event: A “Marketing Meeting” on July 3rd from 10:00–11:00 AM.
- ✅ Start Date:
Meeting Time
- ❌ Has End Date: Disabled
- ✅ Start Date:
-
Multi-Day Duration: A “Recruitment Campaign” running from June 10 to June 25.
- ✅ Start Date:
Campaign Start
- ✅ End Date:
Campaign End
- ✔ Has End Date: Enabled
- ✅ Start Date:
This flexibility makes the Calendar widget highly adaptable — from planning sprints to tracking legal deadlines.
5. Editing Options
Empower users to manage data directly from the dashboard by enabling any or all of the following options:
- Add: Displays a “+” button at the top of the widget to let users create new records.
- Edit: Adds an “Edit” option in the 3-dot menu of each event, allowing updates to the record.
- Delete: Enables a “Delete” option in the 3-dot menu for removing the record.
These capabilities are especially useful for interactive dashboards — making it more than just a reporting tool, but a workspace.
Action Buttons
The Action Buttons in the Calendar Widget enhance each calendar entry with powerful, contextual capabilities. When users hover over an event, a 3-dot menu appears, allowing them to trigger automations or navigate to detail views directly from the calendar interface.
You can configure two types of actions: Run Flow and Detail Page.
1. Run Flow
If you have a Zenphi Flow that begins with a Table Action Trigger, it will appear in the action configuration dropdown. You can select one or more flows to attach to calendar entries. Once configured, a button for each flow will appear in the 3-dot menu of every calendar event.
When clicked, the flow will be triggered using the specific record's data — making actions highly contextual and efficient.
✅ Example Use Cases for Calendar:
-
Approve Leave Request
- Users see employee leave events on the calendar.
- Managers click “Approve” to run a flow that updates the record, notifies HR, and logs the approval.
-
Reschedule Meeting Automatically
- Clicking a “Reschedule” flow button opens a Zenphi flow to suggest new times, update the record, and send calendar invites.
-
Notify Stakeholders for Campaign Events
- For each multi-day campaign event, a "Notify Team" button triggers a flow that sends updates to assigned team members.
2. Detail Page
If you’ve created Detail Pages within your Zenphi environment, they can be linked to your calendar events. Once selected, each linked page becomes accessible from the 3-dot menu of each record.
These pages offer deeper context, extended formatting, and richer interactivity beyond the basic card view on the calendar.
✅ Example Use Cases for Calendar:
-
View Project Timeline Details
- Clicking into a campaign event opens a detailed view with full team assignments, attachments, and KPIs.
-
Employee Leave Breakdown
- An HR admin clicks on a leave event and views the employee’s balance, leave history, and approvals in a dedicated detail page.
-
Training Session Info
- A training event on the calendar links to a detailed agenda page with location info, materials, and speaker bios.
📘 Learn More
For more detail about action buttons and how to configure them, visit the official documentation:🔗 Zenphi Dashboards – Action Buttons
Appearance
The Calendar Widget is designed to seamlessly blend into your dashboard layout while still providing flexible customization for visual clarity and user experience. Here's how you can tailor its look and feel:
Widget Border
Show Widget Border? This setting controls the visual boundary of your Calendar Widget:
- ✅ Enabled: The widget appears with a border, making it visually distinct as a section on your dashboard.
- 🚫 Disabled: The widget blends into the page background without any border, giving a minimalist or embedded look.
This allows you to decide whether the Calendar should stand out as its own section or feel like part of a continuous layout.
🏷 Show Widget Title
Show Widget Title? This toggle allows you to show or hide the title displayed at the top of the widget.
- ✅ Enabled: The title appears at the top, helping users understand what this calendar is for (e.g., "Marketing Calendar", "Leave Schedule", "Release Timeline").
- 🚫 Disabled: No title is shown — ideal when space is limited or the widget's purpose is already clear from context.
Action Buttons Customization
In the Action Button section of the Calendar Widget configuration, you can define multiple flows or detail pages, and for each one you can:
- Assign a unique color: This helps users quickly differentiate between available actions (e.g., red for delete, green for approve).
- Customize the button label/title: Provide user-friendly names like “View Details,” “Send Reminder,” or “Start Workflow”.
These appear in the 3-dot menu on hover over any event in the calendar, offering intuitive access to the right action, right where it’s needed.
Layout Tip
Since calendar widgets take up more horizontal space by nature, it's often best to place them:
- At the top of your dashboard as a central overview.
- In a wide, borderless section for clean alignment with other widgets.
Filter Conditions & Sort
The Calendar Widget allows you to control what records are shown, who sees them, and how they are ordered — making your calendar highly dynamic, user-specific, and focused on relevant data.
Filter Conditions
Using filter conditions, you can define what data appears in the calendar. This helps you narrow down the dataset based on field values or user-specific logic.
How It Works:
Each filter rule consists of:
-
Field Selection: Choose any column from your table.
-
Operator Selection: Pick from logical operators:
equal to
not equal to
contains
not contains
starts with
ends with
has none of
is null
is not null
-
Value Entry:
- Manually input a static value OR
- Use the Token Picker to insert a dynamic value (such as the current user's ID, email, name, or attributes like "Is Admin").
Combine Conditions with Logic:
- Use
AND
to require multiple conditions to be true. - Use
OR
to allow alternatives for displaying a record.
Smart Filtering with Tokens:
The Token Picker makes your calendar context-aware:
- Only show the current user's meetings
- Hide data from users who aren’t admins
- Display different data to different departments
Filter Condition Examples:
-
Show only events owned by the current user
- Field:
Owner
- Operator:
equal to
- Value:
{{Current User.Email}}
- Field:
-
Show tasks starting today or later
- Field:
Start Date
- Operator:
greater than or equal to
- Value:
{{Today}}
- Field:
-
Only show "Approved" items
- Field:
Status
- Operator:
equal to
- Value:
Approved
- Field:
-
Admins see all items, regular users only their own
-
OR
group:- Field:
Is Admin
- Operator:
equal to
- Value:
true
- Field:
-
OR
- Field:
Owner
- Operator:
equal to
- Value:
{{Current User.Email}}
- Field:
-
↕️ Sort
Sorting defines the display order of calendar records — helpful when multiple events occur on the same day or when scanning in agenda view.
🔧 How It Works:
-
You can select one or more columns to sort by.
-
For each column, you can define the direction:
A → Z
(Ascending)Z → A
(Descending)
Sort Examples:
-
Sort by priority, then by start time
- First Column:
Priority
(Z → A, so "High" comes first) - Second Column:
Start Date
(A → Z)
- First Column:
-
Alphabetical order by event title
- Column:
Event Name
(A → Z)
- Column:
-
Newest created events first
- Column:
Created At
(Z → A)
- Column:
Why This Matters
Together, Filter Conditions and Sorting ensure that:
- Users see relevant and personalized calendar views.
- Information is easy to interpret and visually prioritized.
- Your calendar becomes a focused productivity tool instead of just a visual list of data.
Example Scenario: Building a Company-Wide Leave Calendar
Objective: Create a shared calendar where all team members can view upcoming approved leaves, enabling better planning and reducing last-minute surprises.
Data Source Setup
You have a Zenphi Table called Leave Requests
with the following columns:
Employee Name
(Text)Leave Type
(Single Select: Paid, Sick, Parental)Start Date
(Date/Time)End Date
(Date/Time)Status
(Single Select: Pending, Approved, Rejected)Department
(Text)Approved By
(Text)
🛠️ Widget Configuration
**Data Source:**Select the Leave Requests
table.
**Fields to Show:**Choose:
Employee Name
(this will be shown on the calendar view)Leave Type
Department
Approved By
**Start Date:**Set to Start Date
.
Has End Date?✅ Enabled. Then select End Date
from the dropdown to show duration of leave.
Editing Options:✅ Add✅ Edit ✅ Delete (This allows HR or managers to manage records directly from the dashboard.)
Action Buttons
**Run Flow:**Attach a “Notify Team of Leave” flow with a Table Action Trigger. When clicked from the 3-dot menu of any leave event, it automatically notifies team members via email or Slack.
**Detail Page:**Link to a prepared Detail Page showing the full leave request form for approval, rejection, or notes.
Appearance Settings
-
Show Widget Border? ✅ Enabled to visually separate the leave calendar.
-
Show Widget Title? ✅ Enabled — title set to "Team Leave Schedule"
-
Action Buttons:
Notify Team
(Green, Run Flow)View Details
(Blue, Detail Page)
Filter and Sort
Filter Conditions:
Status
equal toApproved
(only show approved leaves)Department
equal to current user’s department (dynamic using token picker —{{user.department}}
)
Sort:
- By
Start Date
→ Ascending (A to Z)
Final Result
The result is a dynamic, color-coded calendar on your dashboard where:
- Employees can view their department’s upcoming leaves.
- Managers can take action directly on leave entries.
- The team can better plan meetings and deadlines knowing who is out.
Updated about 5 hours ago