Skip to main content
Version: v11.9.0

Calendar


The Calendar widget is the most popular solution for scheduling events on a full-sized calendar in a web application. This widget can be used to show agenda. The calendar will be automatically switched to the Web or Mobile version, based on the device it is being viewed on.

Features

Display Events in the Calendar

For displaying events in the Calendar widget you need a variable of type Array or an object with single event data. The data must contain a field corresponding to Start property, other properties are optional. The expected date format for the value of Start property is a Date Object - ‘YYYY/MM/DD’ or ‘MM/DD/YYYY’ or ‘DD MMMM YYYY’.

  1. Drag and drop a Calendar widget onto the canvas
  2. Bind the variable consisting the data to the Dataset Value property of the widget.
  3. Set the properties Title, Start, End, All day, Class name to the keys of the variable bound.
note

Start property is a must, other properties are optional.

  1. Enable controls There are five different types of controls on the calendar that can be enabled to:
    • navigate between the months, weeks and days, depending on the calendar view
    • select current day
    • switch the view to Month
    • switch the view to Week
    • switch the view to Day.
  2. Type Type can be:
    • set as basic - will show the events in a single row, or
    • set as Agenda - will show the complete day agenda with hours included.

Capturing Events in the Calendar

The following are the outbound properties of a Calendar widget that can be captured. These values can be captured from JavaScript to be triggered by any Calendar event like on Select:

  • currentview: gives the start and end values of the current calendar view
  • selecteddata: gives the entire dataset corresponding to the selected item within the calendar
  • selecteddates: gives the user selection on the calendar.

Configurations for Calendar

Views Calendar comes in three views - Month, Week and Day.

  • The Month view of the Calendar displays all the days in the month.
- The _Week_ view of the Calendar displays all the days in the week.- The _Day_ view of the Calendar displays all the events on the day.

Properties

PropertyDescription
NameThe name is a unique identifier for the Calendar. Special characters and spaces are not allowed in widget name.
Accessibility
Tab indexThe tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable. NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option "Press Tab to highlight each item on a webpage".
Layout
WidthThe width of your widget can be specified in em, pt, px or % (_i.e _50px, 75%).
HeightThe height of your widget can be specified in em, pt, px or % (_i.e _50px, 75%).
Default Value
ValueThis is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the dataValue returned by the widget.
Dataset
ValueSet this property to a variable to populate the list of values to display.
Events Data
TitleTitle for the Event, set from the Dataset fields.
StartStart date or date time for the event, set from the Dataset fields.
EndEnd date or date time for the event, set from the Dataset fields.
All dayWhether it is an All day event or not
Class nameDisplay Class to be applied to that event.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
TypeThis property allows you to set the type of the calendar widget: - agenda, or - basic (default).
Enable ControlsThis property allows you to enable the header controls for calendar widget. These include - navigation - to navigate previous/next month/week/day(depending upon the display) on the calendar, - today - go to today's location on the calendar, - month - to display entire month, - week - to display entire week, - day - to display entire day. All these controls on the calendar are used to navigate between the months and switch the view to Month(or) Week (or) Day. Note:- This property is shown only for the Web version of the Calendar.
ViewThis property allows you to set the default view of the calendar widget: - month (default), - week or - day.
Selection ModeThis property can be used to control the user selection of the dates using a simple mouse drag operation. The values can be: - None: no selection, the calendar is just there to present data, not to be selected - Single: only one row can be selected at a time - Multiple: many rows can be selected at a time.

Events

EventDescription
Callback Events
On SelectThis event is triggered when a user selects one or more dates.
On View RenderThis event handler is triggered when the calendar view is changed.
On Event DropThis event handler is triggered when dragging of an event in calendar stops and the event has moved to a different day/time.
On Event ResizeThis event handler is triggered when resizing of the event in calendar stops and the event has changed in duration.
On Event ClickThis event handler is triggered when an event is clicked in the calendar.
On Event RenderThis event handler is triggered when an event is rendered.

Methods

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

  • To set the first day of the month view [Default: 0 (Sunday)]:
Page.Widgets.wmcalendar.calendarOptions.calendar.firstDay = 0;
  • To hide the all day slot of the agenda view [Default: true]:
Page.Widgets.wmcalendar.calendarOptions.calendar.allDaySlot= false;
  • To set the text of the all-day slot in the agenda view [Default: ‘all-day’]:
Page.Widgets.wmcalendar.calendarOptions.calendar.allDayText= ‘all-day’;
  • To set the Calendar language to English (en) and rerender the Calendar widget. Similarly, you can apply the same code snippet to Internationalize (i18n) by replacing en with other i18n codes, such as es for the Spanish language.
Page.Widgets.calendar2.applyCalendarOptions('option', 'locale','en');
Page.Widgets.calendar2.applyCalendarOptions('render');

Other properties which can be set using the similar methods: For more information on Calendar, properties see here.

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 labeled 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.
selectDate()It highlights the default date given for the calendar.
<table class="reference notranslate"><tbody><tr><td><p style={{textAlign: "left"}}><b>Case 1 - datavalue (data/string):</b> If the default value is date object, then that particular date will be highlighted. For example: To select 1st June 2017</p><div></div><pre class="lang:js decode:true">Page.Widgets.calendar.datavalue = '01/0/2017';
Page.Widgets.calendar.selectDate();</pre></td></tr></tbody></table>

<table class="reference notranslate"><tbody><tr><td><p style={{textAlign: "left"}}><b>Case 2 - datavalue (Object): </b>If the default value is Object, then the particular dates from start to end date will be highlighted. For example: To select dates from 1st Jan to 10th Jan 2017</p><div></div><pre class="lang:js decode:true">Page.Widgets.calendar.datavalue = {start:'01/01/2017', end:'10/01/2017'};
Page.Widgets.calendar.selectDate();</pre></td></tr></tbody></table>
gotoDate()It shows the calendar view to default date given for the calendar. For example, to go to a specific date - 1st Jan 2107.
Page.Widgets.calendar.datavalue='01/01/2017';
Page.Widgets.calendar.gotoDate();
gotoMonth(int)This method renders the present view (i.e. year view will be the same) for the specified month. For example: To view the February month. Page.Widgets.calendar.gotoMonth(2);
gotoNextMonth()This method renders the present view (i.e. year view will be the same) for the next month. For example: To view the next month. Page.Widgets.calendar.gotoNextMonth();
gotoPrevMonth()This method renders the present view (i.e. year view will be the same) for the prev month. For example: To view the prev month. Page.Widgets.calendar.gotoPrevMonth();
gotoNextYear()This method renders the present view (i.e. month/week view will be the same) for the next year. For example: To view the next year. Page.Widgets.calendar.gotoNextYear();
gotoPrevYear() It renders the present view (i.e. month/week view will be the same ) for the previous year. For example: To view the previous year Page.Widgets.calendar.gotoPrevYear();
rerenderEvents() It rerenders the events from the dataset. For example, to get events on the calendar, we use: Page.Widgets.calendar.rerenderEvents();

See Also

How to create an event and save it in a Database
How to integrate with Google Calendar