Calendar

Check out the function of the Calendar element.

In the application you have developed, you can ensure that events are displayed in the calendar and new ones are added.

With the Calendar Element, you can assign tasks by dividing time into zones, adding events with specific start and end dates, and making daily plans.

In order to add the Calendar element, drag and drop the Calendar element to the screen from the Elements panel in the application.

1. Adding the Calendar Element

Adding Calendar element Follow the steps below to add the Calendar element.

  1. In the UI Design view, open the Elements panel on the left side.

  2. In the Elements panel, select Calendar from the Display category.

  3. Drag and drop the Calendar element to the screen.

  4. You can customize the Calendar element in the Properties panel.

The Calendar only supports web applications. It does not support mobile applications.

2.Customize settings with Properties

When you select the Calendar element, the Properties panel comes with the Options, Calendar start, Calendar end, Current day, Authorization, and Visibility Property fields.

2.1.Options

These are the options that are shaped according to the added system action and the linked table contents.

The Event Title contents in the Calendar element come from the parameters in the Options field.

  • Action: An action that will take the upcoming events to the calendar element is added to this field.

  • Event Id Field: It is the parameter where the Event Id is selected.

  • Event Title: It is the parameter that selects the column that will appear as the event name on the Calender element.

  • Start Date: It is the column parameter where the start date of the events is drawn.

  • End Date: It is the parameter that the end date of the events is drawn.

  • Event Color Hex: It is the area where the color of the events to be displayed on the Calendar element is selected.

2.2. Calendar Start

This is the area where the start date settings to be displayed in the Calendar element are made.

2.3. Calendar End

It is the field where the end date settings to be displayed in the Calendar element are made.

2.4. Current Day

It is the area in the calendar element where the selected day is displayed.

You can use authorization options for the Collapse element.

Click here for a detailed examination of adding Authorization processes in elements.

Click here for a detailed examination of Authorization processes based on user roles or screen roles.

Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.

You can use visibility options to make the Calendar element always visible, hidden, or visible/hidden depending on a condition.

Click here for detailed information about adding Visibility to elements.

The visibility of the Calendar will be adjusted according to your selections.

Kuika includes system actions such as Arithmetic, Authorization, Condition, Device, Export, GeoLocation, Local Storage, Multi Language, Navigation, Notification, Payment Stripe, UI Control, Trigger, Process Automation, Process Administration and String Operations .

In addition to system actions, you can use your own SQL actions.

You can add actions to the Calendar element with +Add Action.

3. Styling Panel in Calendar Element

In the Styling panel, you can edit the Layout, Text, Border, Fill, or Shadow of the Calendar element and customize the style of the Calendar element according to these Properties.

You can make visual adjustments such as Padding and Sizing. Depending on the size of the Calendar element, you can align the elements within it.

Calendar element supports Size, Min size, Max size, Align, and Display fields.

Click here for detailed information about adding Layout to elements.

You can set Properties such as Calendar element, font family, style, size/color, spacing, and options with the Text section. The calendar element supports all properties of Text.

Click to learn more about adding Text settings in elements.

You can add a color or image to the background of the Calendar element with Fill.

Click here to learn more about adding Fill to elements.

You can add Borders to the outer edges of the Calendar element and give Radius.

Click here for detailed information about adding borders to elements.

You can add Shadow effect to the Calendar element with Shadow in web applications. Shadow is not used in mobile applications.

Click to get detailed information about adding Shadow to elements.

4. Bind Datasource to Calendar element

You can pull data to the Calendar element from the data table you created in Datasources view mode or via the Rest API.

For data extraction, first add the +Add Action → On Click → ManagedDB → GetCalendarEvents system action via the Properties panel.

Then, complete the data source binding processes by filling in the Options parameters from the Properties panel of the Calendar element.

Last updated