Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Basic
  • Interaction
  • Advanced
  • Layout
  • Style
  1. Appizap Studio
  2. Widget Library

Calendar

Used to display dates and corresponding events in the application. Can be used in various types of organizations, especially when the events/tasks are the core part of the work culture.

PreviousIFrameNextCustom Component

Last updated 4 months ago

Basic

Provide the JSON array of items that fill the calendar events. Each item must have the following properties and details.

Property
Description

id

The unique ID value for the item

title

The title text for the event. Recommended to keep it short

start

The timestamp value that specifies the start time of the event

end

The timestamp value that specifies the end time of the event

color

The hex-colour value that fills the event box on the calendar

[
  {
    "id": "1",
    "title": "Coding",
    "start": "2024-06-23 10:00:00",
    "end": "2024-06-23 12:30:00",
    "color": "#079968"
  },
  {
    "id": "2",
    "title": "Rest",
    "start": "2024-06-24",
    "end": "2024-06-25",
    "allDay": true
  }
]

Interaction

License Key

Event Handlers

Event
Description

Change

Advanced

Editable

Changes the calendar into an editable mode where the users can drag and drop the events as needed. The events can be edited when this mode is ON. Following are the properties the user can edit.

Property
Description

Event ID

This is a mandate value. This must be unique for the event.

Event Name

This is a mandate value. Recommended to keep it short to denote the event.

Event Color

Hex-color value to fill the event on the calendar.

Group ID

Group ID groups events for drag and resize together.

Default Date

Specify the initial date for the calendar to display after load. This value must be in the timestamp format. Example - "2024-06-23T06:19:18.884Z".

Default View

Loads the calendar into the view-type specified here. Types of view-

View
Description

Month

Displays the default month and all the dates using the monthly calendar view

Week

Displays the default week and all the days as columns

Day

Displays the default day and splits the hours into rows to show the events

List

Shows the events of the day as the list. The day and date are shown in the header. Time and event titles are displayed as the details.

Start From

Mention the day on which the calendar should start the display. It can be set as any day among all the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

Properties
Description

Show Event Times

Displays the time value of the event by default.

Show Weekends

Users can remove the weekend days off the calendar by toggling this OFF.

Show All-Day

Displays all-day slot in week and day views.

Display Max Events

Maximum number of events per day in month view. Specify '0' for cell height limit.

Event Max Stack

Maximum number of events to stack horizontally in week and day views. Specify '0' for no limit.

Layout

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Style

Property
Description

Background

Users can change the colour of the calendar background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Text

Set the colour of the text. Recommended to set in contrast with the background.

Button Background

Button Text

Title

Specify the colour for the calendar title text

Selected Background

Set the background colour for the events that are selected by the user on the calendar.

The key code that was purchased as the license to use the 'Full calendar' library. Refer this for more info

The "Change" event is activated when the value of the widget is changed. When this event triggers, the associated action gets executed.

Set the background colour for the header buttons.

Set the font colour for the text of the header buttons.

schedulerLicenseKey
Set the visibility