WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Calendar

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Enable SPA
  • Choose Widget Template and Layout
  • Widget Template and Icons
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers
  • Configuring Content-Security-Policy
  • Configuring MTLS

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners
  • Connect to MySQL database using SSL
  • How to Switch MariaDB to MySQL Connector

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • UI for API Server-side Pagination
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration

Team Poral Configure Vcs

  • Configure Azure Repos In CodeRepository
Edit

How Tos: Calendar


Create an Event using Calendar

You can use Calendar widget to create an event when user clicks on a date. We will be using a Database table to store the created event. We will be using a Design Dialog to capture the event details. We are using a database table with the following structure:

event_schema

and the Live Variable created for this table:

event_livevar

  1. Create or open a web responsive app
  2. Add a page for the Calendar event, we have used a blank template and layout for the page
  3. Drag and drop a Calendar widget onto the page
  4. Bind the Dataset Value property to the Live Variable and set the Events Data to the corresponding fields of the Live Variable (event_var) event_cal_bind
  5. Drag and drop a Design Dialog on the same page. Note: Design Dialog will be placed in a page view and you can switch between the page and page view using the tab at the bottom of the page.
  6. We will be using the Design Dialog to capture the Title, Description and All Day Event data for the event being created. Add two text widgets and a radio button to the dialog. event_dialog
  7. The Save of Design Dialog should update the database with the event details. For this we will be using a Service Variable triggering the createEvents operation. event_create The data for create event will be taken from the Calendar and Design Dialog event_create_bind The On Success event of this service variable should close the design dialog and refresh the Calendar which is achieved by calling the Live Variable bound to the Calendar. event_create_event
  8. Selecting a date should display the dialog created above. Switch to Page view (from the bottom of the canvas) and select the Event tab from the Calendar Properties panel. For On select event, choose dialog1.open method. event_cal_event
  9. Run the app, event_run1 click on any date (or multiple dates if Multiselect was checked in the Calendar properties) and the dialog will pop, event_run2 enter the details and click on save. You will see the new entry in you calendar. event_run3

Script Access

To set the properties of the calendar widget through script, access the properties on the calendar as (consider the calendar with name ‘wmcalendar’) $scope.Widgets.wmcalendar.propertyname and change or assign the values accordingly. For example:

  • To set the first day of the month view [Default: 0 (Sunday)]:
$scope.Widgets.wmcalendar.calendarOptions.calendar.firstDay = 0;
  • To hide the all day slot of the agenda view [Default: true]:
$scope.Widgets.wmcalendar.calendarOptions.calendar.allDaySlot= false;
  • To set the text of the all day slot in the agenda view [Default: ‘all-day’]:
$scope.Widgets.wmcalendar.calendarOptions.calendar.allDayText= ‘all-day’;

Other properties which can be set using the similar methods:

MethodDescription
allDaySlotDetermines if the title ("all-day") slot is displayed at the top of the calendar. When false, all-day events will not be displayed in agenda views.
allDayTextThe text for title ("all-day") slot at the top of the calendar.
slotDurationThe frequency for displaying time slots. Default: '00:30:00' (30 minutes)
slotLabelFormatDetermines the time-text that will be displayed on the vertical axis of the agenda views. default: 'h(:mm)a' The default English value will produce times that look like "5pm" and "5:30pm".
slotLabelIntervalDetermines how often the time-axis is labelled with text displaying the date/time of slots.
snapDurationIf not specified, this value is automatically computed from slotDuration. With slotDuration's default value of 30 minutes, this value will be 1 hour.
scrollTimeDetermines how far down the scroll pane is initially scrolled down. default: '06:00:00' (6am). The user will be able to scroll upwards to see events before this time. If you want to prevent users from doing this, use the minTime option instead.
minTimeDetermines the starting time that will be displayed, even when the scrollbars have been scrolled all the way up. default: "00:00:00" The default "00:00:00" means the start time will be at the very beginning of the day (midnight).
maxTimeDetermines the end time (exclusively) that will be displayed, even when the scrollbars have been scrolled all the way down. default: "24:00:00" The default "24:00:00" means the end time will be at the very end of the day (midnight).
slotEventOverlapDetermines if timed events in agenda view should visually overlap. default: true. When set to true (the default), events will overlap each other. At the most half of each event will be obscured. When set to false, there will be absolutely no overlapping.

Google Calendar IntegrationPrerequisites:

Obtain Google Calendar API Key

  1. Go to the Google Developer Console and create a new project.
  2. Once in the project, go to APIs & auth > APIs on the sidebar.
  3. Find "Calendar API" in the list and turn it ON.
  4. On the sidebar, click Credentials.
  5. In the "Public API access" section, click "Create new Key".
  6. Choose "Browser key".
  7. If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
  8. Your new API key will appear. It might take second or two before it starts working.

Make your Google Calendar public:

  1. In the Google Calendar interface, locate the "My calendars" area on the left.
  2. Hover over the calendar you need and click the downward arrow.
  3. A menu will appear. Click "Share this Calendar".
  4. Check "Make this calendar public".
  5. Make sure "Share only my free/busy information" is unchecked.
  6. Click "Save".

Obtain your Google Calendar's ID

  1. In the Google Calendar interface, locate the "My calendars" area on the left.
  2. Hover over the calendar you need and click the downward arrow.
  3. A menu will appear. Click "Calendar settings".
  4. In the "Calendar Address" section of the screen, you will see your Calendar ID. It will look something like "abcd1234@group.calendar.google.com".

WaveMaker App Integration

  1. Open a web responsive app
  2. Drag and drop a Calendar widget
  3. Include the following script inside the HEAD tag of index.html in the app (you can locate the index.html file from the left File panel).
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/gcal.js"></script>
  1. Insert the below snippet in the script part of the calendar widget page. Insert the below code in the $scope.onPageReady function. Here our calendar name is wmcalendar.
    var googleCalendarOptions = {
            googleCalendarApiKey: 'your_google_api_key',
            events: {
                googleCalendarId: 'your_calendar_id',
                eventDataTransform: function(events) {
                    $scope.Widgets.wmcalendar.dataSet = events;
                    return events;
                }
            }
        };

_.extend($scope.Widgets.wmcalendar.calendarOptions.calendar, googleCalendarOptions );
  1. Now the calendar is successfully configured with the google.
  2. In order to use the data received from the google calendar API, the data will be sent to the eventDataTransform callback which we have assigned earlier in the googleCalendarOptions variable. Use the events parameter sent to the function. The events parameter would contain the data we received from the google calendar api.
Last updated on 1/20/2020 by Swetha Kundaram
← Smart Forms: Conditional Flows for form WidgetCalendar Usage - Create an Event →
  • Create an Event using Calendar
  • Script Access
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.