Skip to main content

Basic Component-Calendar

Intro Calendar Component​

This feature allows you to display data, such as events, tasks, similar to Google or Outlook calendar.

Uses:​

  • Event Scheduling and Management: Users organize events, view upcoming activities, and create new events with the calendar component, akin to popular apps like Google Calendar or Outlook.

  • Project Planning and Coordination: For business or project management, the calendar component is used to plan tasks, deadlines, and milestones. It provides a shared view for team members, enhancing collaboration and organization.

1. Create Date Field​

Create a collection or use an existing one to add Date field in it. For this go to Configuration and choose the Date field. Name the field and add data.

DrapCode Builder Collection Constructor

2. Create a Filter​

Go to Components and choose , say, Data Table to show the specific data from the collection. For this bind the collection and create a filter for the same.

DrapCode Builder Collection Constructor

3. Drag and Drop the Calendar Component​

Go to Components and choose Calendar then drag-and-drop it.

DrapCode Builder Collection Constructor

4. Select the Collection and the Filter​

Open the Settings of the Calendar Component from the right-side circular icon and choose -

  • The collection created to bind to this component

  • The filter for the fields

  • The event title

  • The event start time

  • The event end time

    DrapCode Builder Collection Constructor

5. Preview​

Click Preview and you would find the data will get displayed on the calendar

DrapCode Builder Collection Constructor

6. Create a New Record​

Now create a new record from the builder and come back to the calendar. now when you Reload the preview page the new record of data will be displayed in the calendar.

DrapCode Builder Collection Constructor

Conclusion:​

By displaying data like events and tasks in a format similar to Google or Outlook calendar, enhances organization. Users can easily manage and navigate through their schedules, leading to improved time management and productivity.